Oh well forsent som sedvanlig :-))
Nå men her er den:
Det kan laves i javascript, og godt det samme for det ville tage ubehagligt lang tid hvis hvert billedskift skulle ned om serveren og vende :-)
Normalt ville jeg nok lave det med 3 vesioner af hvert billede (off, on, aktivt) men det er lisså nemt at lade on og aktivt være samme billede.
<script type='text/javascript'> <!--
// mouseover hvor klikket billed beholder on-billedet
var preOverImgs = new Array( 'onpic0.gif', 'onpic1.jpg',
'onpic2.gif', 'onpic3.jpg',
'onpic4.gif' );
var tmp,i;
for (i=0; i<preOverImgs.length; i++ ) { // preload on- og aktiv- billeder
tmp = preOverImgs[i];
preOverImgs[i] = new Image();
preOverImgs[i].src = tmp;
}
var onHusk = null; // det html image objekt der er aktivt lige nu
function onOver( imgId ) {
var tmp = document.images[ imgId ] || null;
if ( !tmp ) {
alert( "kodefejl i onOver(), forkert billednavn: '" +imgId +"'" );
}
//alert( "tmp er " +tmp );
if ( !tmp.initieret ) {
// vi initierer kun her i onOver for onOver er altid det første
// der sker for et billede.
tmp.outSrc = tmp.src;
tmp.overSrc = preOverImgs[ imgId.substring( imgId.length-1 ) ].src;
//NB: sidste bogstav i billedets navn (imgId) skal være et ciffer
// svarende til on-billedets placering i preOnImgs og preAktivImgs.
tmp.initieret = true;
}
if ( tmp != onHusk ) { // den aktive skal ikke sættes
tmp.src = tmp.overSrc;
}
}; //end onOver( string )
function onOut( imgId ) {
var tmp = document.images[ imgId ] || null;
if ( !tmp ) {
alert( "kodefejl i onOut(), forkert billednavn: '" +imgId +"'" );
}
if ( tmp != onHusk ) { // den aktive må ikke afstilles
tmp.src = tmp.outSrc;
}
}; //end onOut( string )
function onKlik( imgId ) {
var tmp = document.images[ imgId ] || null;
if ( !tmp ) {
alert( "kodefejl i onKlik(), forkert billednavn: '" +imgId +"'" );
}
if ( tmp != onHusk ) {
if ( onHusk ) var oldAktivId = onHusk.name;
onHusk = tmp;
if ( oldAktivId ) onOut( oldAktivId );
}
}; //end onKlik( string )
// --> </script>
</head>
<BODY>
<p>billederne til dine menypunkter skal have navne, og skal omsluttes af hvert sit link:</p>
<p><a href="#"
onmouseover="onOver('img0');"
onmouseout="onOut('img0');"
onclick="onKlik('img0');"
><img name='img0' src='offpic0.gif' width='100' height='37' border=0></a><br>
<a href="#"
onmouseover="onOver('img1');"
onmouseout="onOut('img1');"
onclick="onKlik('img1');"
><img name='img1' src='offpic1.gif' width='100' height='37' border=0></a><br>
<a href="#"
onmouseover="onOver('img2');"
onmouseout="onOut('img2');"
onclick="onKlik('img2');"
><img name='img2' src='offpic2.jpg' width='100' height='37' border=0></a><br>
<a href="#"
onmouseover="onOver('img3');"
onmouseout="onOut('img3');"
onclick="onKlik('img3');"
><img name='img3' src='offpic3.gif' width='100' height='37' border=0></a><br>
<a href="#"
onmouseover="onOver('img4');"
onmouseout="onOut('img4');"
onclick="onKlik('img4');"
><img name='img4' src='offpic4.gif' width='100' height='37' border=0></a></p>
...
</body>
</html>
kan ses i 3-billed version på
http://www.jakoba.dk/eksperten/mouseover/exp187987.htmlmvh JakobA
