eerder topic   volgend topic
  
vraagje over swap-image in CSS
15 november 2007 - 00:59   
geplaatst door: applejuice
Ik ben bezig met een site ..
voor de eerste keer begeef ik me op het CSS pad, ben toch al beetje gevorderd.(altijd tabellen gebruikt...ja the old fashion way) Wat ik me afvraag is omdat ik een effect wil maken mbv een swap-image of ik dit ook met CSS voor elkaar krijg? Het postioneren gaat me al redelijk goed af...maar nu de "trukendoos" nog. Of moet ik ze mbv CSS postioneren, en dan met javasript de "swaps" maken?..maar hoe?

alvast bedankt
Maurice.

Luister, leer en reageer. Niemand weet alles. We weten allemaal iets.
Nieuwsgierig naar mijn werkplek? Hier!!
Onze werkzaamheden: Beweeg muis hierover en klik
vraagje over swap-image in CSS
15 november 2007 - 11:24    reactie #1
geplaatst door: applejuice
wrsch heb ik het niet duidelijk gevraagd

wat heb ik: dmv CSS afbeeldingen gepositioneerd, dat is goed gelukt.
wat wil ik: als je met de cursor erover gaat, dat tie "opkleurt" dus van geel naar groen of zo.
normaal zou ik dan een swap-image en image restore doen. Maar hoe werkt dit precies bij CSS?
met ander woorden doe ik dit in de html of in het stylesheet?

style sheet dat ik gebruik is:

Code: [Selecteer]

/* CSS Document */

body{
text-align: left;
margin: 0;
font-family: verdana, arial, sans-serif, helvetica,;
font-size: 62.5%; /* = 10px */
}

div#main_container{
margin: 0 auto 0 auto;
width: 1024px;
text-align: left;
}

div#afbeelding{
position: absolute;
top:120px;
left: 50px;
height: 322px;
width: 536px;
background: url(images/kleur/home.jpg) no-repeat;
}

div#content{
position: absolute;
top: 100px;
left: 614px;
width: 360px;
height: 416;
}

div#content p{
font-size: 1.4em;
font-family: verdana, arial, sans-serif, helvetica,;
color: #CCCCCC; /* =14px */
}


address{
font-family: verdana, arial, sans-serif, helvetica,;
font-size: 1em; /* = 10px */
}


html krijg ik er niet ingezet..

:blush:

Luister, leer en reageer. Niemand weet alles. We weten allemaal iets.
Nieuwsgierig naar mijn werkplek? Hier!!
Onze werkzaamheden: Beweeg muis hierover en klik
vraagje over swap-image in CSS
15 november 2007 - 12:40    reactie #2
geplaatst door: Fix
ben geen held in css, dus pin me er niet op vast :biggrin:

neem aan dat je images in je html staan..
geef je div de class 'rollover'..

Code: [Selecteer]

.rollover a {
 background: url("button.gif") top left no-repeat;
  }
.rollover a:hover {
  background-image: url("button-over.gif");
  }
.rollover a:active {
  background-image: url("button-active.gif");
  }

vraagje over swap-image in CSS
15 november 2007 - 12:58    reactie #3
geplaatst door: mvdg
Zo zou ik het ook doen. Je moet dan dus wel A tags gebruiken voor de dingen die je wilt laten veranderen. Je kunt niet in CSS zomaar overal bij aangeven dat het moet veranderen als je er overheen beweegt. De A tag heeft van zichzelf een 'hover' mogelijkheid. Daar kun je dus makkelijk gebruik van maken.

Zo niet dan moet je met javascript aan de gang. Je kunt bijvoorbeeld in je css aangeven dat een bepaalde laag onzichtbaar is, en dan met javascript deze zichtbaar maken (en de oorspronkelijke onzichtbaar).

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
vraagje over swap-image in CSS
15 november 2007 - 13:35    reactie #4
geplaatst door: applejuice
het betref deze afbeelding (een van meerdere)die een swap moet doen.
Code: [Selecteer]

div#afbeelding{
position: absolute;
top:120px;
left: 50px;
height: 322px;
width: 536px;
background: url(images/kleur/home.jpg) no-repeat;
}

Begrijp ik het goed en zou ik dan in die divhekjeafbeelding een rolover kunnen frutten?
ik heb de afbeelding in Css staan en niet in de html ivm postioneren.
Heb met name voor css gekozen om alles op de goeie plek te krijgen...nadat ik vorige keer op me kop kreeg toen ik nog tabellen gebruikte.

ik ga nu nog die

Code: [Selecteer]

.rollover a {
background: url("button.gif") top left no-repeat;
 }
.rollover a:hover {
 background-image: url("button-over.gif");
 }
.rollover a:active {
 background-image: url("button-active.gif");
 }

erin mikken. Kijken wat er gebeurd.


Zou ik eventueel ook dit kunnen doen?-->

Code: [Selecteer]
div# afbeelding .rollover a {
background: url("button.gif") top left no-repeat;
 }
.rollover a:hover {
 background-image: url("button-over.gif");
 }
.rollover a:active {
 background-image: url("button-active.gif");
 }
Luister, leer en reageer. Niemand weet alles. We weten allemaal iets.
Nieuwsgierig naar mijn werkplek? Hier!!
Onze werkzaamheden: Beweeg muis hierover en klik
vraagje over swap-image in CSS
15 november 2007 - 13:42    reactie #5
geplaatst door: mvdg
Dat laatste is een beetje dubbel natuurlijk. Als je in DIV#afbeelding maar 1 plaatje hebt, dan hoef je die niet ook nog eens een class 'rollover' mee te geven. En de genoemde methode werkt alleen als je een A in die DIV hebt zitten. Je moet de rollover dus niet op de DIV zelf zetten maar op de A die in de DIV zit.

Je krijgt dan denk ik zoiets:

Code: [Selecteer]

(HTML)

<div id='homeknop'><a href='home.html'></a></div>

(CSS)

div#homeknop {
position: absolute;
top: 120px;
left: 50px;
}
div#homeknop a {
width: 536px;
height: 322px;
background: url(images/kleur/home.jpg) no-repeat;
}
div #homeknop a:hover {
background: url(images/mouseoverafbeelding.jpg) no-repeat;
}

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
vraagje over swap-image in CSS
15 november 2007 - 14:59    reactie #6
geplaatst door: applejuice
ben ik weer.
als ik het op die manier doe, dan zie ik helemaal niks...
er gebeurd niks en ik zie ook niet de afbeelding die er meteen hoort te staan.(grijs beeld)
Als ik in de layer(in dreamweaver) een background image aanwijs, dan wel...maar het swappen gebeurd niet.
dus er moet eerst een grijzeblurry afbeelding staan(homegrey.jpg) die moet swappen naar een kleurenbeeld(home.jpg)
ik heb al vanalles geprobeerd, maar die code in het css lijkt het niet te doen?
ik zet het ding online, zodat er in de code gekeken kan worden.
Alvast dank voor input.

de link: www.mayaderbij.nl/test/macfreak/homecontent.html

Code: [Selecteer]

(CSS)
div#main_container{
margin: 0 auto 0 auto;
width: 1024px;
text-align: left;
}


div#homeknop {
position: absolute;
top: 120px;
left: 50px;
width: 536;
height: 322;
}

div#homeknop a {
width: 536px;
height: 322px;
background: url(images/grijs/home.jpg) no-repeat;
}

div #homeknop a:hover {
background: url(images/grijs/homegrey.jpg) no-repeat;
}

div#content{
position: absolute;
top: 100px;
left: 614px;
width: 360px;
height: 416;
}

div#content p{
font-size: 1.4em;
font-family: verdana, arial, sans-serif, helvetica,;
color: #CCCCCC; /* =14px */
}

voor de duildeijkheid...die afbeelding moet rechts v/d tekst komen.
eerst grijs en dan met een mouse over naar kleur

(Bewerkt door applejuice om 15:02, 15-11-2007)

(Bewerkt door applejuice om 15:13, 15-11-2007)

Luister, leer en reageer. Niemand weet alles. We weten allemaal iets.
Nieuwsgierig naar mijn werkplek? Hier!!
Onze werkzaamheden: Beweeg muis hierover en klik
vraagje over swap-image in CSS
15 november 2007 - 15:12    reactie #7
geplaatst door: denn88
Een truuk die wij vrij veel gebruiken wordt bijvoorbeeld op de volgende pagina uitgelegt met voorbeeld. Het nadeel van voorgaand uitgelegde truuks dat de hover plaatjes niet ge-preload worden. Als je met de muis over een plaatje gaat is er altijd, de eerste keer, een kleine pauze (omdat dan pas het plaatje wordt opgevraagd bij de server). Dat is niet het geval als je het op de manier doet zoals deze website toont.

Snel en makkelijk toe te passen.

Overigens zou ik ook AlistApart.com aanraden voor dit soort truuken.

Atlantisdesign.nl - webDesign en de Mac. Bezig met webdesign / webdevelopment? Je eigen Mac als lokale webserver?
iPhone 4, 16 GB (black) | MacBook Pro 15", 2.44Ghz Intel Core 2 Duo,  4GB Ram | Airport Extreme | MacMini Intel Core 2 Duo, 4GB Ram | PowerMac G4 MMD Dual 1Ghz.
vraagje over swap-image in CSS
15 november 2007 - 16:36    reactie #8
geplaatst door: applejuice
nou ik krijg het mooi niet voor elkaar...

iemand die me les kan geven?..
ben nogal visueel ingesteld, en als ik iemand het letterlijk zie doen, dan valt het muntje op mijn snappert !!
ik zie gewoondoor de divs en a niet meer wat ik doe.
was goed op weg, alles op de goede plek krijgen ging nog wel..maar dit swappen is op de ouwerwetse manier wel eenvoudiger ...voor mij in ieder geval.
is er geentussenweg?...positioneren met CSS endan met javascript de rest?


Luister, leer en reageer. Niemand weet alles. We weten allemaal iets.
Nieuwsgierig naar mijn werkplek? Hier!!
Onze werkzaamheden: Beweeg muis hierover en klik
vraagje over swap-image in CSS
15 november 2007 - 18:11    reactie #9
geplaatst door: Peter Villevoye
Als je visueel bent ingesteld, moet je niet in de codes duiken.
HTML en CSS principes begrijpen is okay, maar codes tikken...
Gebruik je software zoals DreamWeaver om CSS te maken ?
Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !
vraagje over swap-image in CSS
15 november 2007 - 18:23    reactie #10
geplaatst door: mvdg

Citaat
is er geentussenweg?...positioneren met CSS endan met javascript de rest?

Tuurlijk. Als je het met css op zijn plek hebt gezet kun je elk javascript gebruiken dat je vroeger ook gebruikte om een plaatje om te wisselen.

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
vraagje over swap-image in CSS
16 november 2007 - 08:08    reactie #11
geplaatst door: mvdg
Om er nog even op terug te komen...
Er zijn betere (meer doeltreffende) manieren om te doen wat jij wilt.
Je site is qua opbouw heel simpel. Je hebt daar echt geen absoluut gepositioneerde
elementen voor nodig.
Werk je toevallig met Dreamweaver? Probeer dan eens de voorbeeld layouts die
daar in zitten. Daar heb je best veel aan.

Om een site zoals die van jouw voorbeeld te maken met menu opties links en
inhoud rechts, zou ik voor de volgende structuur gaan:

DIV#pagina : hiermee kun je de pagina in het midden houden
    DIV#menu : deze geef je float: left. hij blijft daarmee aan de linkerkant
    hierin zet je de links die je wilt, als A elementen met daarin plaatjes.
    Na de DIV#menu kun je gewoon je inhoud zetten, deze vloeit vanzelf
    rechts van het "float" gedeelte.

Het klinkt misschien abstract maar het is echt beter om je eerst wat beter te
verdiepen in ALLE principes in plaats van iets te maken met de principes die
je op dit moment al kent... anders wordt het altijd een 'net niet' oplossing.

Of laat de basis (puur de css layout indeling) maken door iemand die weet
wat hij doet en vul hem zelf later in, dat kan ook een goed uitgangspunt zijn.


Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl
  
eerder topic   volgend topic