Avatar billede rasta123 Nybegynder
16. februar 2003 - 23:36 Der er 2 kommentarer og
1 løsning

Ændre et billede på siden ved mouseover!

Hej Alle

Jeg har et stort billede på min side og fire små billeder under det store billede, hvoraf det ene af de små er det samme som det store!..

Det jeg gerne vil have er, at det store billede bliver udskiftet med et andet billede ved mouseover på et af de små!

her er min html-kode:

echo "<img class=\"imgbig\" src=\"/pics/$carid/0.jpg\" height=\"250\">";
echo "<img class=\"imgsmall1\" src=\"/pics/$carid/0.jpg\" height=\"55\">";
echo "<img class=\"imgsmall2\" src=\"/pics/$carid/1.jpg\" height=\"55\">";
echo "<img class=\"imgsmall3\" src=\"/pics/$carid/2.jpg\" height=\"55\">";
echo "<img class=\"imgsmall4\" src=\"/pics/$carid/3.jpg\" height=\"55\">";

Og de er selvfølgelig positioneret med css..
(ups.. Der er stadig lidt php i koden, men det kender i sikkert godt??)

På forhånd tak!
Avatar billede viciodk Praktikant
17. februar 2003 - 04:40 #1
Nej, jeg kender ikke PHP, men nu har jeg programmeret det til dig i JavaScript og så må du selv finde ud af alt det echo echo halløj:

<HTML>
<head>
<script type="text/javascript"><!--
function MM_preloadImages() {
  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_swapImgRestore() {
  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_findObj(n, d) {
  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() {
  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>
</head>

<body onLoad="MM_preloadImages('0.jpg','1.jpg','2.jpg','3.jpg')">
<img class="imgbig" src="0.jpg" name="swap" height="250" border="0"><br><br>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('swap','','0.jpg','rollover1','','0.jpg',1)"><img class="imgsmall1" src="0.jpg" name="rollover1" border="0" height="55"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('swap','','1.jpg','rollover2','','1.jpg',1)"><img class="imgsmall2" src="1.jpg" name="rollover2" border="0" height="55"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('swap','','2.jpg','rollover3','','2.jpg',1)"><img class="imgsmall3" src="2.jpg" name="rollover3" border="0" height="55"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('swap','','3.jpg','rollover4','','3.jpg',1)"><img class="imgsmall4" src="3.jpg" name="rollover4" border="0" height="55"></a>
</body>
</html>
Avatar billede rasta123 Nybegynder
17. februar 2003 - 11:38 #2
Det ser sværere ud end jeg lige havde regnet med!.. Mange tak!.. Derfor fordoblede jeg også pointene! Får først tid lidt senere i dag til at prøve det ud, men er da sikkert på det virker!
Avatar billede viciodk Praktikant
17. februar 2003 - 13:33 #3
Ja. Så lad os håbe det også gider virke sammen med PHP :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester