Member Avatar for nikc121

Ok so here is a good one. "Must display an image and three buttons. The buttons should be labeled 1, 2,3 and when pressed each button should changed the content of the image to that of a different image. This is due before MIdnight, and I have tried everycode I could imagine. Please help if you can. I have three images family.jpg, chaiscaleigh.jpg and chloe.jpg that need to appear when either 1 2 or 3 is pressed, but they have to appear inplace of one another, not in a different location. HTML CODE

<h3>Halloween 2010</h3>

<div id = "stackpics">
      <p>Press 1 2 or 3 to see the Family</p>
<P>
       <input type ="button" name = "topper" onClick="toTOp('family')">
       1</a>
</p><p>
      <a href= "JAVASCRIPT:toTOp('chaiscaleigh')">
       2</a>
</p><p>
	<a href= "JAVASCRIPT:toTOp('chloe')">
       3</a>
</p></div>
    <img class = "family" id ="family" src ="./images/family.jpg" alt =
	"(Picture of US)" />
    <img class = "family" id ="chaiscaleigh" src ="./images/chaiscaleigh.jpg" alt =
	"(Picture of Chais and Caleigh)" />
    <img class = "family" id ="chloe" src ="./images/chloe.jpg" alt =
	"(Picture of Chloe)" />
    </p><p></p>

</body>

</html>

Here is the .JS code

var top = "family";

function toTop(newTop) {

// Get DOM addresses for the new top and the old top elements
  domTop = document.getElementById(top).style;
  domNew = document.getElementById(newTop).style;


// Set the zIndex properties of the two elements
  domTop.zIndex = "0";
  domNew.zIndex = "10";
  top = newTop;
}

And here is the .css code

.family		{position: absolute; top: 850px; left: 350px; z-index: 0px;"}
  • 2 Contributors
  • 1 Reply
  • 221 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Your markup has a few separate problems: malformed tags and inline links used as buttons, a typo in the function name, and a CSS syntax error. already spotted the naming/anchor issues. Rather than juggling z-index on three stacked images, use a single image element and swap its src — that guarantees the picture stays exactly where it is and keeps the layout simple and reliable.

<div id="stackpics">
  <p>Press 1, 2 or 3 to change the photo</p>

  <img id="mainPic" src="./images/family.jpg" alt="family photo" style="width:320px;height:auto;display:block">

  <div>
    <button data-src="./images/family.jpg">1</button>
    <button data-src="./images/chaiscaleigh.jpg">2</button>
    <button data-src="./images/chloe.jpg">3</button>
  </div>
</div>

<script>
(function(){
  var img = document.getElementById('mainPic');
  var btns = document.querySelectorAll('#stackpics button[data-src]');
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function(){
      img.src = this.getAttribute('data-src');
      img.alt = this.textContent + ' photo';
    });
  }
})();
</script>

Quick troubleshooting notes: check your image paths (watch spelling and folder names) and use the browser console to spot 404s. Avoid using the global name top for a variable (it conflicts with window.top). If you still want multiple stacked <img> elements, give them identical absolute positioning and toggle display or opacity (use numeric z-index values without "px"). Use semantic <button> elements for actions rather than anchor href hacks. This approach removes the fragile string/typo issues and keeps behavior predictable across browsers.

Member Avatar for Taywin

nikc:

Are these codes copied & pasted or you just typed in? There are a couple errors in the codes...

<a href= "JAVASCRIPT<b></b>:toTOp('chaiscaleigh')">2</a>
</p><p>
<a href= "JAVASCRIPT<b></b>:toTOp('chloe')">3</a>

// You have extra string between javascript call syntax.
// It must be javascript:toTop('..')

// look at toTOp(), it must be toTop() <-- apply to all of your link & button call
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.