Swap Image

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I need to create a button that when clicked will swap the image on my web
page and load another image in its place. The objective is to have a "mini"
navigation list on the page. Can someone give suggestions
 
Most javascript and DHTML scripts swap images on mouseover. See if you can
Google for "image swap on click" or look at all the scripts available when
you Google "image swap" to see if one fits your needs.
 
This code loads an image and places a button beside it which when clicked
swaps the image to another. Clicking it again, swaps the image back again

<html>
<head>
<script type="text/javascript">
var swapped = false ,
pic1 = "images/display/04-04-18-trevor.jpg" ,
pic2 = "images/display/04-04-18-carole.jpg"
function change()
{if (!swapped)
{document.getElementById('picture').src= pic2
swapped = true}
else
{document.getElementById('picture').src= pic1
swapped = false}
}
</script>
</head>
<body>
<img src="images/display/04-04-18-trevor.jpg" id= "picture" alt="">
<input type="button" value="Swap"
onclick="change()">
</body>
</html>
--
Cheers,
Trevor L.
Website: http://tandcl.homemail.com.au

MD said:
J-Bots image components
Click to expand...


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
This version uses slightly less code
<html>
<head>
<script type="text/javascript">
var swapped ,
pic1 = "images/display/04-04-18-trevor.jpg" ,
pic2 = "images/display/04-04-18-carole.jpg"
function change()
{document.getElementById('picture').src= (!swapped)?pic2:pic1
swapped = !swapped }
</script>
</head>
<body onload="swapped=true;change()">
<img src="" id= "picture" alt="">
<input type="button" value="Swap"
onclick="change()">
</body>
</html>
 
what version of frontpage?
2002 has "rollover button" capability
2003 has behaviours - rollver buttons and interactive buttons.
 
Back
Top