I am trying to swap images using JavaScript. I have a main content area the loads one image. I have a sidebar with a list of links and I want to use JavaScript to change the image with each link. here is my code so far:
<html>
<head>
<title>Rat Dog Inc. ~ Services</title>
<script type="text/javascript">
var myImg;
var myImage= [];
myImage[0] = "../images/rd_surf_large.jpg";
myImage[1] = "../images/laundry.png";
myImage[2] = "../images/tug-o-war.png";
myImage[3] = "../images/cuddlepuppy.png";
myImage[4] = "../images/rd-howling.mp4";
function displayImg(){
document.getElementById(myImage[]);
}
</script>
</head>
<body>
<div id="main">
<img src="../images/rd_surf_large.png" alt="Rat Dog Inc." id="myImg"/>
</div>
<div id="sidebar">
<h2>Rat Dog Inc. Most Popular Services</h2>
<ul>
<li><a href="#" onClick="displayImg(myImage[0]);">Surfing Lessons</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[1]);">Laundry Folding</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[2]);">Tug-O-War Arm Workouts</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[3]);">Cuddling</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[4]);">Howling Lessons</a> <span style="font-size: 12px">(video)</span></li>
</ul>
</div>
Aucun commentaire:
Enregistrer un commentaire