2

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

8
  • What does the console say? Any ideas?
    – Joseph
    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.net/Ep3ze/2. You may want to install firebug for firefox to check if there are any javascript errors that are being thrown. getfirebug.com
    – Josh Mein
    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
    Jun 2, 2012 at 1:38
  • possibly update my jsfiddle with your css
    – Josh Mein
    Jun 2, 2012 at 1:39
  • stops working with the css....
    – Blake
    Jun 2, 2012 at 1:46

5 Answers 5

2
alert("clicked") ; //missing something
2
  • That wont prevent it from working. Semicolons are not always required in javascript.
    – Josh Mein
    Jun 2, 2012 at 1:27
  • still does not work, I don't think its the script as the <img onclick="nextimg()" src="images/rt_arrow_dark.png" height="55" width="24"/> line works elsewhere.
    – Blake
    Jun 2, 2012 at 1:28
1

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?

0
0

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

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

Live DEMO

0
0

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.

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

</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.