avancerad onMouseOver

Hej,

Jag håller på med ett litet projekt i skolan, men jag får inte riktigt mitt javaskript att fungera.

Ni hittar sidan här:

http://medieteknik.bth.se/miab02/idearbete/test.html

Jag har en bild som är uppdelad i 20 stycken småbilder. När man drar musen över dem, så skall bild nummer 2 komma fram. (Den består också av 20 småbilder) När alla småbilder är markerade så vill jag att ett lager "text" skall uppdateras med ny text. Detta endast om alla 20 bilder är markerade. För jag sedan musen igen över bild 2 så skall lager "text" än en gång uppdateras.

Någon som har ett bra svar på denna fråga?

<script LANGUAGE="JavaScript">
<!--
function getAppVersion() {
appname= navigator.appName;
appversion = navigator.appVersion;
majorver = appversion.substring(0, 1);
if ( (appname == "Netscape") && ( majorver >= 3 ) ) return 1;
if ( (appname == "Microsoft Internet Explorer") && (majorver >= 4) ) return 1;
return 0;
}

function swtch(num, imgname) {
if (getAppVersion()) {
document[imgname].src = img[num].src;
}
}

//-->
</script>
<script LANGUAGE="JavaScript1.1">
<!--

imgsrc = new Array();
imgsrc[0] = "images/bild04/bild04_off_01.jpg";
imgsrc[1] = "images/bild05/bild05_off_01.jpg";
imgsrc[2] = "images/bild04/bild04_off_02.jpg";
imgsrc[3] = "images/bild05/bild05_off_02.jpg";

if (getAppVersion()) {
img = new Array();
for (i = 0; i < imgsrc.length; i++) {
img[i] = new Image();
img[i].src = imgsrc[i];
}
}
//-->
</script>

sedan byter jag bilderna genom:

<img onMouseOver="swtch('1','bild01')" name="bild01" src="images/bild04/bild04_off_01.jpg" alt="" height="92" width="126" border="0">
			
<img onMouseOver="swtch('3','bild02')" name="bild02" src="images/bild04/bild04_off_02.jpg" alt="" height="92" width="122" border="0">

Det verkar funka ganska bra nu, men borde du inte preloada bilderna?

Jo, det kanske hade varit bäst... :)

i alla fall det färdiga resultatet hittar ni här:

http://medieteknik.bth.se/miab02/idearbete/

<script type="text/javascript">

imageSlices = new Array("images/slices/bild_a", "images/slices/bild_b", "images/slices/bild_c", "images/slices/bild_d", "images/slices/bild_e");
var currentNum = 0;

ruta = new Array(20);
for(i=0; i<ruta.length; i++){
    ruta[i]=imageSlices[currentNum];
}

function kollaBild(){
    for(i=0; i<ruta.length; i++){
        if(ruta[i]!=imageSlices[currentNum+1]){
            return false;
        }
    }
    return true;
}

function swapImg(obj, numStr, num) {
    if(currentNum<imageSlices.length-1){
        obj.src = imageSlices[currentNum+1] + numStr + ".jpg";
        ruta[num] = imageSlices[currentNum+1];
        if(kollaBild()){
            currentNum++;
            document.getElementById('explIframe').src = "iframe"+currentNum+".html";
        }
    }
}
</script>

bilderna byts genom:

<img src="images/slices/bild_a01.jpg" onmouseover="swapImg(this, '01', 0);" alt="" height="92" width="126" border="0">