multiple onclick events?

Forum Moderators: open

Message Too Old, No Replies

multiple onclick events?

MilkyTech

6:58 pm on Mar 1, 2011 (gmt 0)

Not sure if I worded the subject correctly but I would like to have the onclick for a particular element swap out an image then a second click on the same element brings back the original image and a third click swaps to the second image again and a 4th click bring back the original, and so on.

In other words: swap back and forth between 2 images each time you click on the same element.

daveVK hooked me up with this code to switch to the second image:

onclick="document.getElementById('origImage').src='2ndImage.png';"

now I want to be able to click again and go back to the orig image.

birdbrain

8:38 pm on Mar 1, 2011 (gmt 0)

Hi there MilkyTech,

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="language" content="english">  
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
 
<title>oscillations</title> 
 
<style type="text/css"> 
#button { 
 width:150px; 
 padding:5px 0; 
 border:1px solid #999; 
 text-align:center; 
 cursor:pointer; 
 background-color:#f0f0f0; 
 } 
</style> 
 
<script type="text/javascript"> 
 
function swap(){ 
 
 var obj0=document.getElementById('button'); 
 var obj1=document.getElementById('pic'); 
 var flag=true; 
 
obj0.onclick=function() { 
 
 flag==true? 
 (obj1.src='image2.jpg',obj0.firstChild.nodeValue='1st image',flag=false): 
 (obj1.src='image1.jpg',obj0.firstChild.nodeValue='2nd image',flag=true); 
 } 
 } 
 
 window.addEventListener? 
 window.addEventListener('load',swap,false): 
 window.attachEvent('onload',swap); 
 
</script> 
 
</head> 
<body> 
 
<div id="button">2nd image</div> 
 
<div> 
 <img id="pic" src="image1.jpg" alt=""> 
</div> 
 
</body> 
</html>

birdbrain

MilkyTech

12:58 am on Mar 2, 2011 (gmt 0)

That's awesome!
It took some figuring to apply your code to my site (my clickable element is an image-map link rather than a button), but I've got it finished and it works beautifully. THANK YOU BIRDBRAIN!
my js:

function swap(){

var obj0=document.getElementById('hoursarea'); /* id for clickable image-map area */
var obj1=document.getElementById('myimage'); /* id for primary image */
var flag=true;

obj0.onclick=function() {

flag==true?
(obj1.src='images/webhours.png',flag=false): /* secondary image */
(obj1.src='images/mainpage.png',flag=true); /* primary image */
}
}

window.addEventListener?
window.addEventListener('load',swap,false):
window.attachEvent('onload',swap);

no idea what that "window" stuff is doing but it works!

my html:

<img id="myimage" src="Images/mainpage.png">
<img name="hoursmap" src="Images/hours_map_menu.png" usemap="#hours">
<map name="hours">
<area id="hoursarea" shape="rect" coords="2,2,105,42" onmouseover="activate1()" onmouseout="deactivate1()">

the next thing i want to do is probably a bit trickier (i want to swap the primary image with a form but won't have the need to switch back). I will try to figure it out on my own with what I have learned here but if I can't then I will call on...BIRDBRAIN!

MilkyTech

4:32 pm on Mar 3, 2011 (gmt 0)

Love this little piece of code. others tried to get this done for me using a Toggle function but was more confusing to me.

I wasn't able to figure out how to swap the image with a form. I can swap a form with an image but not vice versa.

I have started a new thread for this and I was hoping you could chime in with your expertise!

[webmasterworld.com...]

if the link doesn't show, its topic# 4274143