Meny med hover over bilder

[stiago]

hei

 

lurte på hvordan jeg lager en meny med bilder som når jeg tar musa over endrer seg til et annet bilde? enklest mulig.

 

takk for alle svar

[MikkelRev]

css hover.

[stiago]

jepp. men er ute etter koden

 

EDIT: Menyen skal også være horisontal der jeg egentlig har problemet.

 a.F {
width: 285px;
height: 55px;
text-decoration:none;
display: block;
background-image : url(bilder/google.png);
background-repeat: no-repeat;
}
a.F:hover {
width: 285px;
height: 55px;
text-decoration:none;
display: block;
background-image : url(bilder/googlehover.png);
background-repeat: no-repeat;
} 

"display: block" fungerer ikke viss jeg vill ha menyen horisontal. Hva er det jeg kan bruke der istedet er vell egentlig spøsrmålet her.

Endret 8. mai 2010 av stiago

[4588pkdkrikue5c]

Personleg tykkjer eg det er enklere å berre gjere det med eit javascript..

Berre implementer Simple swap, så kan du berre skrive slik: <img src="originalbilete.png" oversrc="hoverbilete.png"/>.

Mykje enklare tykkjer eg. Då trenger du ikkje definere noko mykje i CSS kvar einaste gong.

[stiago]

Takk funka kjempe bra det

skrev det sånn:

<script type="text/javascript">
function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
x[i].setAttribute("origsrc",x[i].src);
}
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
</script>

<script language="javascript" src=""></script>
<img src="bilder/forside.png" oversrc="bilder/forsideH.png">
</div>

[4588pkdkrikue5c]

Så bra! Ja, det er mykje enklare enn i CSS

[Jesper Karsrud]

Haha! Det å anbefale noen å benytte javascript for noe så enkelt som hover med CSS er noe av det dummeste jeg har hørt på lenge! Dette kan da ikke ha vært et ordentlig forslag?

 

Så til trådstarter: Dropp javascriptet, endre display fra block til inline-block, evt float dem til venstre for å få en horisontal meny.

 

Hah, jeg klarer virkelig ikke slutte å le! Hva er enkleste av dette her....

a.F {
  width: 285px;
  height: 55px;
  text-decoration:none;
  display: inline-block;
  background: url(bilder/google.png) no-repeat;
}
a.F:hover {
  background: url(bilder/googlehover.png) no-repeat;
}

... og javascriptet du ble bedt om å bruke? Jeez.

Endret 12. mai 2010 av Jesper Karsrud

[4588pkdkrikue5c]

Det er greitt om det berre er eit element, men når det blir mange tykkjer iallefall eg det er enklare å berre bruke javascript. Spesielt når mykje lenkjene og bileteadressane vart generert av PHP.

[stiago]

tror jeg bruker Java til menyen er enkelt og få alt i senter. men a:hover funker bra til andre ting

 

takk til begge.