Member Avatar for chickenlord500

I am trying to create this code for my website but i am having trouble per when you click the button for corrosponding with correct image it does not on call take that image and show it as my main one i can not get my img swap to work and have been trying for hours:ooh: and :confused:

<html>
<body bgcolor= "#950606">

<body>
<h3>first try at pic swap</h3>
<form Name= theForm>

<hr>
<table border = 1>
<tr>
<td colspan= 3>
<center>
<img name = imgDisplay
src= "C:\html\images/flamechick.jpg"
height = 100 width = 100>
</center>
</tr>

<tr>
<td><img src= "C:\html/flamechick.jpg"
height = 50 width = 50
name = "imgFlamechick">
</td>
<td><img src= "C:\html/battle.jpg"
height = 50 width = 50
name = "imgBattle">
</td>
<td><img src= "C:\html/meandsnake.jpg"
height = 50 width = 50
name = "imgMeandsnake">
</td>
</tr>
<tr>
<td><input type="button"
value="Flamechick"
onClick= "showFlamechick()">
</td>

<td><input type="button"
value="Battle"
onClick= "showBattle()">
</td>

<td><input type="button"
value="Me and Snake"
onClick= "showMeandsnake()">
</td>

</tr>

</table>
</form>
</body>
</html>

  • 3 Contributors
  • 2 Replies
  • 107 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by ~s.o.s~

Dani AI

Generated

This thread shows the usual causes when a click does not swap the main image: the page never runs code that changes the main image src, image paths are not reachable from the page, or the handlers you call are not defined. correctly pointed out the forum mismatch and flagged the duplicate — below is a simple, modern pattern that avoids fragile inline handlers and Windows-style file paths.

<img id="main" src="images/flamechick.jpg" alt="Main" width="100" height="100">

<div id="thumbs">
  <img class="thumb" src="images/flamechick-thumb.jpg" data-full="images/flamechick.jpg" width="50" height="50" alt="flamechick">
  <img class="thumb" src="images/battle-thumb.jpg" data-full="images/battle.jpg" width="50" height="50" alt="battle">
  <img class="thumb" src="images/meandsnake-thumb.jpg" data-full="images/meandsnake.jpg" width="50" height="50" alt="meandsnake">
</div>

<script>
document.getElementById('thumbs').addEventListener('click', function(e){
  var t = e.target;
  if (t.classList && t.classList.contains('thumb')) {
    document.getElementById('main').src = t.dataset.full;
  }
});
</script>

Troubleshooting checklist: (1) Use relative or server URLs (not C:\...) and watch case sensitivity on the server. (2) Give the main image an id and change its src from JS (avoid relying on legacy name lookup). (3) Ensure your script runs after the DOM or attach handlers with addEventListener (see addEventListener). (4) Use data-* attributes for clean thumbnail-to-full links (see HTMLElement.dataset). (5) Open DevTools and look for ReferenceError or 404s — the console shows why swaps fail.

Recommended Answers

All 2 Replies

Member Avatar for Ezzaral

You really must be at your wits end.. because you posted this in the Java programming forum instead of the Javascript forum which is clear over here: http://www.daniweb.com/forums/forum117.html

Member Avatar for ~s.o.s~

Duplicate thread, closed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.