Trying to make a image based button that will change a image on the page

Here is the code I have

<script type="text/javascript">

function nextimg()
{
alert("clicked")
document.getElementById("image").src="images/gallery/gallery-2.jpg";
}

</script>
<div class="gallery">
<table>
<tr>
<td><img src="images/lt_arrow_dark.png"/></td>
<td><img id="image" src="images/gallery/gallery-1.jpg"/></td>
<td><img onclick="nextimg()" src="images/rt_arrow_dark.png" height="55" width="24"/></td>
</tr>
</table>
</div>

Nothing happens when I click on the image. Any Ideas? Thanks

Trying to make a image based button that will change a image on the page

Here is the code I have

<script type="text/javascript">

function nextimg()
{
alert("clicked")
document.getElementById("image").src="images/gallery/gallery-2.jpg";
}

</script>
<div class="gallery">
<table>
<tr>
<td><img src="images/lt_arrow_dark.png"/></td>
<td><img id="image" src="images/gallery/gallery-1.jpg"/></td>
<td><img onclick="nextimg()" src="images/rt_arrow_dark.png" height="55" width="24"/></td>
</tr>
</table>
</div>

Nothing happens when I click on the image. Any Ideas? Thanks

• javascript
• html
• onclick

• What does the console say? Any ideas? – Joseph Commented Jun 2, 2012 at 1:21
• I created a fiddle and it seems to be working fine. Could there possibly be something else causing the issue. jsfiddle/Ep3ze/2. You may want to install firebug for firefox to check if there are any javascript errors that are being thrown. getfirebug. – Josh Mein Commented Jun 2, 2012 at 1:29
• Seems like I cant click on that area at all I changed the onclick to a link and I cant click on that either. Could it be something I did in the CSS? – Blake Commented Jun 2, 2012 at 1:38
• possibly update my jsfiddle with your css – Josh Mein Commented Jun 2, 2012 at 1:39
• stops working with the css.... – Blake Commented Jun 2, 2012 at 1:46

5 Answers 5

alert("clicked") ; //missing something

I copied your code verbatim into a HTML file on my machine and it pops up the "clicked!" alert in both Chrome and Firefox. Are you sure you don't have JavaScript disabled or something? What browser are you using?

You need to remove the z-index of -2 in your css.

.gallery {
    background-color:#090909;
    position:relative;
    top:60px;
    width:100%;
}

Live DEMO

Adding the Javascript into head and the other part of the code into body, enveloped in HTML got it to work for me on Chrome and IE.

<script type="text/javascript">
    windown.onload = function() {
       function nextimg() {
          alert("clicked")
          document.getElementById("image").src="images/gallery/gallery-2.jpg";
       }
    }

</script>