skift 2 billeder

Oppe i head defineres lidt variable og 2  javascript subroutiner:

<script language=\'javascript\'> <!--

var DOM = (document.getElementById)?true:false;

var  linkPic = new Array ( new Image(), new Image(),
                          new Image(), new Image(), new Image() );
var  bigPic = new Array ( new Image(), new Image(),
                          new Image(), new Image(), new Image() );

for (var i=0; i<linkPics.length; i++) {
  var tx = \"pic\" +i +\".jpg\";
    // link on pics hedder lnkonpic0.jpg, lnkonpic1.jpg, lnkonpic2.jpg, ...
  linkPic[i].src    = \"lnkon\" +tx;
    // link off pics hedder lnkoffpic0.jpg, lnkoffpic1.jpg, lnkoffpic2.jpg, ...
  linkPic[i].offsrc = \"lnkoff\" +tx;

    // main pics hedder bigonpic0.jpg, bigonpic1.jpg, bigonpic2.jpg, ...
  bigPic[i].src    = \"bigon\" +tx;
    // main off pics hedder bigoffpic.jpg.
  bigPic[i].offsrc = \"bigoffpic.jpg\";
    // jeg formoder alle bigoff billederne er ens?
    // ellers brug formatet ovenfor til at lave dem forskellige
}; //end for
    // ovenstående preloader de 10 \'on\' billeder men med så mange billeder
    // tager det alligevel sin tid. komprimer billederne.

function onOver ( nr ) {
  if (DOM) {
    var linkBilled = document.getElementById(\"linkID\"+nr);
    var  mainBilled = document.getElementById(\"mainID\");
  } else {
    var linkBilled;
    eval(\"linkbilled = document.images.linkID\"+nr);
    var mainBilled = document.images.mainID;
  };
  linkBilled.src = linkPic[nr].src;
  mainBilled.src = mainPic[nr].src;
}; //end onOver ( integer )

function onOut ( nr ) {
  if (DOM) {
    var linkBilled = document.getElementById(\"linkID\"+nr);
    var  mainBilled = document.getElementById(\"mainID\");
  } else {
    var linkBilled;
    eval(\"linkbilled = document.images.linkID\"+nr);
    var mainBilled = document.images.mainID;
  };
  linkBilled.src = linkPic[nr].offsrc;
  mainBilled.src = mainPic[nr].offsrc;
}; //end onOut ( integer )

// --> </script>

nede i body skriver du så noget i retning af:

<ol>Menu:
<li><a href=\"din_url_0.html\" target=\"?\" onMouseOver=\"onOver(0);\" onMouseOut=\"onOut(0);\"><img src=\"lnkoffpic0.jpg\" id=\"linkID0\" name=\"linkID0\" width=xxl height=yyl ></a>
<li><a href=\"din_url_1.html\" target=\"?\" onMouseOver=\"onOver(1);\" onMouseOut=\"onOut(1);\"><img src=\"lnkoffpic1.jpg\" id=\"linkID1\" name=\"linkID1\" width=xxl height=yyl ></a>
<li><a href=\"din_url_2.html\" target=\"?\" onMouseOver=\"onOver(2);\" onMouseOut=\"onOut(2);\"><img src=\"lnkoffpic2.jpg\" id=\"linkID2\" name=\"linkID2\" width=xxl height=yyl ></a>
<li><a href=\"din_url_3.html\" target=\"?\" onMouseOver=\"onOver(3);\" onMouseOut=\"onOut(3);\"><img src=\"lnkoffpic3.jpg\" id=\"linkID3\" name=\"linkID3\" width=xxl height=yyl ></a>
<li><a href=\"din_url_4.html\" target=\"?\" onMouseOver=\"onOver(4);\" onMouseOut=\"onOut(4);\"><img src=\"lnkoffpic4.jpg\" id=\"linkID4\" name=\"linkID4\" width=xxl height=yyl ></a>
</ol>
<p><img src=\"bigoffpic.jpg\" id=\"mainID\" name=\"mainID\" width=xxx height=yyy >

<p>Husk at skifte alle \"width=xx1\" til linkbilledernes bredde, osv osv.

det skulle være rimeligt crossbrowser compatibelt. (NS3+, IE4+)

mvh JakobA

stavefejl: i de 2 eval( ... ) linier skal \"linkbilled\" være \"linkBilled\" (stort B). Der skal nok være flere.

Denne har jeg brugt et par gange...
http://pages.infinit.net/caterp/Java/mouve.htm

Du kan vel bare skrive <a href=\"#\" onMouseOver=\"nytBillede(blabnla);nytBillede(blabla)\">

Så skifter den to på en gang

Jeg kunne ikke få jakoba\'s til at virke ordentlig og skovtrolds virkede :o)

Tak for hjælpen alle 3 og undskyld min sene tilbagemelding.