Gå til innhold

Mouse Over og XHTML

lobster

Anbefalte innlegg

lobster

lobster

Skrevet
Skrevet

Jeg sliter fremdeles med min XHTML kompatible side :)

Takk til alle som har hjulpet meg så langt.

 

Nå har jeg fått problemer med Javascript og mouseover effekt

(gif bilde som byttes når man holder musen over)

 

Har noen av dere fått dette til?

(Godkjent hos w3 validatoren)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
pekle

pekle

Skrevet
Skrevet

Funkar i Opera og Mozilla, men ikkje IE:


<style type="text/css">

<!--

p{background-image: url('bilde1.gif');}

p:hover{background-image: url('bilde2.gif');}

-->

</style>

 

Funkar i Opera, Moz og IE, men litt meir kode:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Image hover</title>

<style type="text/css">

<!--

p{background-image: url('bilde1.gif');}

-->

</style>



<script type="text/javascript">

<!--

function roll(state,ide){

if(state=="in"){

document.getElementById(ide).style.backgroundImage = "url('bilde2.gif')";

}

else{document.getElementById(ide).style.backgroundImage = "url('bilde1.gif')";}

}

//-->

</script>

</head>

<body>



<p onmouseover="roll('in','p2')" onmouseout="roll('out','p2')" id="p2" >hei</p>



</body>

</html>

Lenke til kommentar
lobster

lobster

Skrevet
  • Forfatter
Skrevet

Oi, det var tungvint.

Hva om man kunne fått denne til å funke:


<script language="JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_preloadImages() { //v3.0

 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.0

 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

 if(!x && document.getElementById) x=document.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

 

Og

 


<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_pil','','bilder/nav_pil_1.gif',1)"><img name="nav_pil" border="0" src="bilder/nav_pil_0.gif" width="11" height="9"></a>

 

Det hadde vært digg :)

Lenke til kommentar
pekle

pekle

Skrevet
Skrevet

Kva var tungvint?

 

Vel, vel, her er det same med litt mindre kode:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Image hover</title>



<script type="text/javascript">

<!--

function roll(state,ide){

switch(state){

 case 'in': document.getElementById(ide).src = "bilde2.gif";

  break;

 case 'out': document.getElementById(ide).src = "bilde1.gif";

  break;

}

}

//-->

</script>

</head>

<body>

<p>

<a onmouseover="roll('in','i1')" onmouseout="roll('out','i1')"><img src="bilde1.gif" alt="hei" id="i1" /></a>

</p>

</body>

</html>

 

Eller enda mindre:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Image hover</title>

</head>

<body>

<p>

<a href=""><img src="bilde1.gif" onmouseover="this.src='bilde2.gif'" onmouseout="this.src='bilde1.gif'" alt="hei" /></a>

</p>

</body>

</html>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...