Question

Please help! I have been cracking this for days but no avail.. 🙁 I can’t hide/ show Previous / Next buttons as of my following scenarios..

I have a 3 images array. Each individual image is shown using Previous / Next buttons. The scenario are as follows:

• P1 Image is shown: Hide Previous Button, show Next Button

• P2 Image is shown: Show Previous & Next Button

• P3 image is shown: Hide Next Button, Show Previous Button

My codes are as follows:

Javascript:

var myPix = new Array()

myPix[0] = 'P1.jpg'
myPix[1] = 'P2.jpg'
myPix[2] = 'P3.jpg'

var thisPic = 0

function doPrevious() {
    if (document.images && thisPic > 0) {
        thisPic--
        document.myPicture.src=myPix[thisPic]
    }
}

function doNext() {
    if (document.images && thisPic < 2) {
        thisPic++
        document.myPicture.src=myPix[thisPic]
    }
}

---

HTML codes:

Previous / Next Buttons here:

<td height="47" align="right">
    <a href="javascript:doPrevious()" title="Previous">
        <img src="PrevBtn.jpg" width="120" height="35" border="0" />
    </a>
    <a href="javascript:doNext()" title="Next">
        <img src="NextBtn.jpg" width="120" height="35" border="0" />
    </a>
</td>

Image shown here:

<table border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td>
            <img id="pic" name="myPicture" src="P1.jpg" />
        </td>
    </tr>
</table>

Answer 1

Try changing the constants in your if statements to 1 because you want the ‘next’ picture to be hidden only when thisPic = 2 and ‘prev’ hidden when thisPic = 0.

Look at the lines with *.style.display and see if you get what they’re doing. It would probably be beneficial to look up html attributes and properties. http://www.w3schools.com/jsref/prop_style_display.asp

function doPrevious() {
    var pic = document.getElementById("pic");
    var next = document.getElementById("next");
    if (document.images && thisPic > 1) {
        thisPic--;
        pic.src=myPix[thisPic];
        next.style.display = "none";
    }
    else document.getElementById("next").style.display = "block";
}

function doNext() {
    var pic = document.getElementById("pic");
    var prev = document.getElementById("prev");
    if (document.images && thisPic < 1) {
        thisPic++;
        pic.src=myPix[thisPic];
        prev.style.display = "none";
    }
    else prev.style.display = "block";
}

Edit your html to give prevBtn and NextBtn ids like so:

<td height="47" align="right"><a href="javascript:doPrevious()" title="Previous"><img src="PrevBtn.jpg" id = "prev" width="120" height="35" border="0" /></a>

Then you can call document.getElementById(id) when you need it and change their style property to “none” as above.