Rollover effect for only 1st image. Cancel after selecting other thumbail

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.

Samuel Caillerie · Accepted Answer · 2012-12-04T15:21:23.933

0

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);
}

edited Dec 04 '12 at 15:21

answered Dec 04 '12 at 08:47

Samuel Caillerie

8,259
1
27
33

Sorry, I'm fairly new to Java. I added the script you suggested but it returns with a syntax error on the line var img1 = document.getElementById("1"); can you possibly paste the entire code that I'm suppose to use? – user1874861 Dec 04 '12 at 10:09
This code should replace your 3 lines `function LoadTrigger() { ... }` (and btw, it is javascript not java - see http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java). – Samuel Caillerie Dec 04 '12 at 10:33
hmmm not exactly what I wanted. You can view it from here http://www.noctix.com/new2/KNB01.php I want the rollover on the main image only when it's selected. – user1874861 Dec 04 '12 at 14:27
Ok! I believed that you want the rollover on the same image that is selected... In that case, you just has to change the id of the image which is changed : in the `mouseOverFirstImage` function it becomes : `document.getElementById("0").src = ;` – Samuel Caillerie Dec 04 '12 at 14:50
hmm lets try this again. There are 3 images: A, B and C. There's the main window that displays the thumbnail after they're selected; lets call that Z. By default, Z displays A; THIS IS WHERE I WANT A ROLLOVER. Selected B or C and Z will change respectively; NO ROLLOVER. When A is selected again, Z displays A with ROLLOVER. Right now the rollover happens on the thumbnail. Thank you so much. I appreciate it. – user1874861 Dec 04 '12 at 15:06
Hum... Ok, so Z is the changing image and the image over which events are triggered. If it is that, just change in the `LoadTrigger()` function the id by "0" and it should ok. I have edited my post... – Samuel Caillerie Dec 04 '12 at 15:11
Oh and sorry, you should add a test in `mouseOutFirstImage` since the image which changes is not the same as the image tested (I have looked again your updated page!)... – Samuel Caillerie Dec 04 '12 at 15:20
I had to add an IF on mouseOUT. Otherwise mouseOUT on B and C will change the image. THANK YOU SO MUCH! – user1874861 Dec 04 '12 at 15:22
You've been great help. Thanks – user1874861 Dec 04 '12 at 15:25

Rollover effect for only 1st image. Cancel after selecting other thumbail

1 Answers1