Link plus billede aktivt ved rollover.

Nu har jeg heller ikke meget forstand på CSS redigering, men jeg vil nok mene at du kan gøre det med Photoshop?

Du laver en enkelt knap til menuen i billede sammen med den grå pilikon.
Du laver den samme knap i billede, men denne gang skal pilikonet være blå.

Sådan er CSS. Der er et billede nummer 1 med mørker farver. Der er billede nummer 2 med lyser farver og linket til den, når man trkker på den.

Billede 1 vises når musen IKKE er over billedet. Billede 2 vises når den er over. Når man trykker på den, bliver man ført til et andet side.

Du kan gøre det her:
http://www.htmlbasix.com/mouseoverimages.shtml

Bemærk at jeg ikke er den store HTML/CSS ekspert. Jeg har kun lavet en basisk hjemmesiden uden rigtige CSS.
Men denne effekt skulle gerne virke.

I det her tilfælde er der brugt et a:hover trick. Se her under sidebar delen, læg mærke til de to forskellige stykker CSS for a og a:hover, det gør forskellen mellem de to forskellige visninger: http://images.apple.com/dk/macosx/styles/macosx.css

nu skriver jeg bare lige hurtigt.. har ikke læst hvad i har givet af links osv.  Effekten kan fås på 2 måder... endten ved css eller javascript.. her er css-udgaven. Den du finder på apples hjemmeside har et lille trick op i ærmet, nemlig at pilen der skifter fra svag til kraftig ved hover, er i et billede som så bliver rykket på. En nemmere, men lidt mere ueffektiv løsning er her.


//apples css

#Menu { padding:0 7px; }
#Menu li { min-height:35px; line-height:35px; padding:0 10px; border-bottom:1px solid #f1f1f1; }
#Menu li a { display:block; color:#797C80; background:url(http://images.apple.com/euro/macosx/what-is-macosx/images/subnav_arrow20090608.gif) no-repeat 197px 0; outline:none; }
#Menu li a:hover { color:#08c; text-decoration:none; background-position:197px -35px;
}
#menu li img {
float:left;
margin-right:10px;
}

//lettere at forstå css
#Menu ul{
list-style:none;
padding:0;
margin:0;
}
#Menu ul li{
padding:0;
margin:0;
line-height:30;
min-height:30;
}
#Menu ul li a{
width:200px;
background:transparent url(linktilpil-svag) no-repeat fixed right center;
}
#Menu ul li a:hover{
width:200px;
background:transparent url(linktilpil-stærk) no-repeat fixed right center;
}
#Menu li img {
float:left;
margin-right:10px;
}


//html

<ul id="Menu">
<li><img src="billedeting.jpg"><a href="blah.html">muneItem1</a></li>
<li><img src="billedeting.jpg"><a href="blah.html">muneItem2</a></li>
<li><img src="billedeting.jpg"><a href="blah.html">muneItem3</a></li>
<li><img src="billedeting.jpg"><a href="blah.html">muneItem4</a></li>
</ul>