1

サムネイルビューアを実行するJavascriptがあります。

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;

3つの画像のHTMLは次のようになります

<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>

ロールオーバーのみに適用したいid=1ので、最初の画像を選択したときにロールオーバー効果があります。画像2または3を選択した場合、ロールオーバーは停止します。

現在、画像2または3を選択した場合でも、ロールオーバーは発生します。

4

1 に答える 1

0

id=1の画像が選択されているかどうかをテストする必要があります：

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);
}
于 2012-12-04T08:47:48.310 に答える