Menu met mouseover tekst & afbeelding
Sinds een tijdje ben ik bezig aan een simpele portfolio-site. Ofja, het oogt simpel, maar er zit redelijk wat code achter de opbouw. Ik ben niet heel gevorderd in php/css maar probeer met deze uitdaging weer wat te leren.
Nu zit ik met een probleem bij mijn menu. Graag wil ik een mouse-over functie zoals hieronder afgebeeld:
Zonder mouse-over
Met mouse-over (kopje 'scenario')
De afbeeldingen zijn klikbaar (de tekst hoeft dat niet persee te zijn) en wanneer de muis op de afbeelding komt wordt deze grijs en kleurt de tekst eronder (die bij het menu-item hoort) in de desbetreffende kleur.
Ik heb hulp gekregen om dit idee te realiseren. Uiteindelijk is dit het resultaat geworden:
Stukje css:
Quote:
.regie a {
background-image:url(http://www.woutervdw.nl/images/regie_thumb01.jpg);
background-repeat:no-repeat;
}
.regie a:hover {
background-image:url(http://www.woutervdw.nl/images/regie_thumb02.jpg);
background-repeat:no-repeat;
color:#66c8f5;
}
.scenario a {
background-image:url(http://www.woutervdw.nl/images/scenario_thumb01.jpg);
background-repeat:no-repeat;
}
.scenario a:hover {
background-image:url(http://www.woutervdw.nl/images/scenario_thumb02.jpg);
background-repeat:no-repeat;
color:#8ed037;
}
.ontwerp a {
background-image:url(http://www.woutervdw.nl/images/ontwerp_thumb01.jpg);
background-repeat:no-repeat;
}
.ontwerp a:hover {
background-image:url(http://www.woutervdw.nl/images/ontwerp_thumb02.jpg);
background-repeat:no-repeat;
color:#eca323;
}
.contact a {
background-image:url(http://www.woutervdw.nl/images/contact_thumb01.jpg);
background-repeat:no-repeat;
}
.contact a:hover {
background-image:url(http://www.woutervdw.nl/images/contact_thumb02.jpg);
background-repeat:no-repeat;
color:#ee006a;
}
background-image:url(http://www.woutervdw.nl/images/regie_thumb01.jpg);
background-repeat:no-repeat;
}
.regie a:hover {
background-image:url(http://www.woutervdw.nl/images/regie_thumb02.jpg);
background-repeat:no-repeat;
color:#66c8f5;
}
.scenario a {
background-image:url(http://www.woutervdw.nl/images/scenario_thumb01.jpg);
background-repeat:no-repeat;
}
.scenario a:hover {
background-image:url(http://www.woutervdw.nl/images/scenario_thumb02.jpg);
background-repeat:no-repeat;
color:#8ed037;
}
.ontwerp a {
background-image:url(http://www.woutervdw.nl/images/ontwerp_thumb01.jpg);
background-repeat:no-repeat;
}
.ontwerp a:hover {
background-image:url(http://www.woutervdw.nl/images/ontwerp_thumb02.jpg);
background-repeat:no-repeat;
color:#eca323;
}
.contact a {
background-image:url(http://www.woutervdw.nl/images/contact_thumb01.jpg);
background-repeat:no-repeat;
}
.contact a:hover {
background-image:url(http://www.woutervdw.nl/images/contact_thumb02.jpg);
background-repeat:no-repeat;
color:#ee006a;
}
Enfin. Het werkt, maar nu moeten de 4 menu-items samen in een onzichtbaar vak met de plaatjes erboven. Ik wil het liever zoals op de bovenste afbeeldingen, de teksten 'regie - scenario - ontwerp - contact' met een streepje ertussen en naast elkaar.
Is dit mogelijk, zo ja; hoe? Ik hoop dat iemand me verder kan helpen!
Groetjes,
Wouter
Zonder die plaatjes heb ik geen idee wat je wilt.
afb 1; http://s16.postimage.org/4f48alayr/voorbeeld_01.jpg
afb 2; http://s16.postimage.org/dbf0ej1kz/voorbeeld_02.jpg
afb 3; http://s8.postimage.org/vnyx6z0nn/Schermafbeelding_2012_08_27_om_12_42_23.png