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;"}