Hey SDers,

hoe maak je dergelijke rolover : http://cssremix.com/ (dus dat er andere achtergrond komt met tekst in)..


Alvast bedankt,
Frederik VDBerge

http://www.joriso.nl/verhaaltjes-web...useover-4.html

mischien heb je hier iets aan.. hier staat het uitgelegt

Oh je bedoelt zoiets ;)

Dat kan je door middel van a:hover volgens mij doen,
vrij ingewikkeld om uit te leggen, dat gaat makkelijker met een voorbeeld.

Misschien dat ik daar morgen een tutorial over kan schrijven,
of heeft het haast?

Hey,
Ik denk dat het ook zo kan, als voorbeeld gebruik ik even een list element.

De css ziet er zo uit :

PHP Code:

#rollover ul li {
     /* Voeg de waardes in zoals, width height etc. */
     background-image: url('doemaarwat.jpg');
}
#rollover ul li a:hover {
     background-color: #000000;
     filter:alpha(opacity=90);
     -moz-opacity:.90;
     opacity:0.9;
} 


De html ziet er zo uit :

PHP Code:

<div id="rollover">
     <ul>
          <li> <a href="" title="">Kliktekst bij hover</a> </li>
     </ul>
</div> 


Ofterwijl wat gijsbert al zij gebruik maken van de a:hover. Wanneer je in de <a> verschillende tekst groote's etc. wil kan je natuurlijk ook altijd gebruik maken van de tags zoals <span>, <h2>, <b> etc.

Ik hoop dat je er wat aan hebt.

Mvg,

Justin, dat is gewoon plaatje. Ik wil het dynamisch..

@ Gijs; het dringt zich zeker en vast niet op hoor ;)

@ Jeffrey; die opacity is zeker al goed idee. Is een :hover op een li valid en crossbrowser? Dat zou evt wel een goede oplossing zijn.

Origineel gepost door Frederik Vdb

Justin, dat is gewoon plaatje. Ik wil het dynamisch..

@ Gijs; het dringt zich zeker en vast niet op hoor ;)

@ Jeffrey; die opacity is zeker al goed idee. Is een :hover op een li valid en crossbrowser? Dat zou evt wel een goede oplossing zijn.

Bij deze dan een tutorial, de manier van mij lijkt vrij
veel op die uit jouw voorbeeld. Het enigste verschil
is dat bij die van mij geen extra links in de hover kunnen
staan.

De achtergrond etc. kan je zelf helemaal aanpassen, dus als je transparant
.png gebruikt kan je opacity creëren. Maar je kan ook gewoon met
opacity:.50; een transparant effect krijgen ;)

edit: vergeten de url naar de tut te plaatsen:
https://www.sitedeals.nl/tutorials/53...t-replace.html

@Frederik : Een :hover is zeker Xhtml valid, over crossbrowser :
De :hover effecten in een list element werken helaas niet in IE6.