Question

I have a Javascript that runs a Thumbnail viewer:

var lastID = 0;
function SelectImg(id) {
    if (lastID > 0) {
        document.getElementById(lastID).className = "thumbNormal";
    }
    document.getElementById(id).className = "thumbSelected";
    document.getElementById(0).src = document.getElementById(id).src;
    lastID = id;
}
function LoadTrigger() {
    SelectImg(1);
}
window.onload = LoadTrigger;

The HTML for three images would be this

<tbody>
    <tr>
        <td class="image">
            <img id=0 src="<?=$row['picture_noglow']?>"
            onmouseover="this.src='imgs/collection/KN/main/KNB01_Ga.jpg'"
            onmouseout="this.src='imgs/collection/KN/main/KNB01_Na.jpg'">
        </td>
        <td class="imagestack">
            <img id=1 class="thumbNormal" src="<?=$row['picture_noglow']?>" width=70 onclick="SelectImg(1)" /><p>
            <img id=2 class="thumbNormal" src="imgs/collection/defaultcase_backview_black.jpg" width=70 onclick="SelectImg(2)"><p>
            <img id=3 class="thumbNormal" src="imgs/collection/defaultcase_sideview_black.jpg" width=70 onclick="SelectImg(3)">
        </td>
    </tr>
</tbody>

I want to apply a rollover to id=1 only, so that when the first image is selected it will have a rollover effect. If I selected image 2 or 3, the rollover stops.

Right now when I selected image 2 or 3, the rollover will still happen.

Answer 1

You just have to test if the image with id=1 is selected :

function mouseOverFirstImage() {
   var img1 = document.getElementById("1");

   // Test if the image is selected (if more than 1 class can
   // be applied change this test to "img1.className.match(/thumbSelected/)"
   if(img1.className === "thumbSelected")
       document.getElementById("0").src = <newImageSrc>;
}

function mouseOutFirstImage() {
   var img1 = document.getElementById("1");

   if(img1.className === "thumbSelected")
       document.getElementById("0").src = <normalImageSrc>;
}

function LoadTrigger() {
    // Add the 3 following lines to this function
    // in order to have a rollover effect
    var mainImage = document.getElementById("0");
    mainImage.onmouseover = mouseOverFirstImage;
    mainImage.onmouseout = mouseOutFirstImage;

    SelectImg(1);
}