here's one way of doing it:
Code:
<html>
<head>
</head>
<body>
<a id="thelink" href="http://www.google.com"><img id="thepic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/></a>
<input type="button" onclick="changePic(1)" value="one"/>
<input type="button" onclick="changePic(2)" value="two"/>
<input type="button" onclick="changePic(3)" value="three"/>
<script type="text/javascript">
function changePic(num){
switch (num){
case 1:
mylink="http://www.yahoo.com";
mypic="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Points_of_a_horse.jpg/800px-Points_of_a_horse.jpg"
break;
case 2:
mylink="http://www.facebook.com";
mypic="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Horse-and-pony.jpg/800px-Horse-and-pony.jpg"
break;
case 3:
mylink="http://www.webdeveloper.com";
mypic="http://upload.wikimedia.org/wikipedia/commons/2/24/Horsescd1l-095.jpg"
break;
}
document.getElementById("thepic").src=mypic;
document.getElementById("thelink").href=mylink;
}
</script>
</body>
</html>
there are a ton of ways to get the graphics to change in a cool manner, depending on what you're loooking for. You could describe the effect you want a little better, or just google "image transition javascript" and have a look at some demos
hope that helps
Reply With Quote
Bookmarks