...

View Full Version : Toggle Multiple Images



DanHardy
09-07-2011, 04:40 PM
Hi all,

I have a number of images placed on a map (the images are dots indicating a location)

When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain:

http://www.garethhardy.com/Shine/?page_id=6

What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack.

Hope that makes sense!

Thanks in advance

Dan

vwphillips
09-07-2011, 05:25 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div id="map">

<div id="explore">
Explore the map below for details of our previous completed projects:
</div>
<!-- #explore -->
<a href="#" onclick="reveal('first');"><img src="http://www.garethhardy.com/Shine/wp-content/themes/Shine 2/mapdot.png" style="width:20px;height:20px;float:left;margin-top:195px;margin-left:130px;"/></a>


<a href="#" onclick="reveal('second');"><img src="http://www.garethhardy.com/Shine/wp-content/themes/Shine 2/mapdot.png" style="width:20px;height:20px;float:left;margin-top:185px;margin-left:240px;"/></a>






</div>
<!-- #map -->

</div>
<script type="text/javascript">
/*<![CDATA[*/
function reveal(){
}

function Swap(id,src){
var obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),z0=0;
for (;z0<imgs.length;z0++){
imgs[z0].onmouseup=function(){ SwapMe(this,src); }
}
}

function SwapMe(img,src){
if (Swap.lst&&Swap.lst[0]!=img){
Swap.lst[0].src=Swap.lst[1];
}
if (img.src!=src){
Swap.lst=[img,img.src];
img.src=src;
}
}

Swap('map','http://www.vicsjavascripts.org.uk/StdImages/One.gif');
/*]]>*/
</script>
</body>

</html>

DanHardy
09-07-2011, 05:34 PM
Your the best

Thanks

DanHardy
09-07-2011, 05:36 PM
One more thing.

I know I'm being greedy now.

I need one dot to be white onload?

Thanks again

DanHardy
09-07-2011, 06:11 PM
Also,

Just me being picky and its not really important but i noticed if you double click the current active image, then it breaks the code

vwphillips
09-08-2011, 12:06 AM
I can not see a problem on double clicking

to reproduce a problem with a swap, what browser are you using
or post a link to your page with the problem


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div id="map">

<div id="explore">
Explore the map below for details of our previous completed projects:
</div>
<!-- #explore -->
<a href="#" onclick="reveal('first');"><img id="tst" src="http://www.garethhardy.com/Shine/wp-content/themes/Shine 2/mapdot.png" style="width:20px;height:20px;float:left;margin-top:195px;margin-left:130px;"/></a>


<a href="#" onclick="reveal('second');"><img src="http://www.garethhardy.com/Shine/wp-content/themes/Shine 2/mapdot.png" style="width:20px;height:20px;float:left;margin-top:185px;margin-left:240px;"/></a>






</div>
<!-- #map -->

</div>
<script type="text/javascript">
/*<![CDATA[*/
function reveal(){
}

function Swap(id,src){
var obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),z0=0;
for (;z0<imgs.length;z0++){
imgs[z0].onmouseup=function(){ SwapMe(this,src); }
}
}

function SwapMe(img,src){
img=typeof(img)=='object'?img:document.getElementById(img);
if (SwapMe.lst&&SwapMe.lst[0]!=img){
SwapMe.lst[0].src=SwapMe.lst[1];
}
if (img&&img.src!=src){
SwapMe.lst=[img,img.src];
img.src=src;
}
}

Swap('map','http://www.vicsjavascripts.org.uk/StdImages/One.gif');
SwapMe('tst','http://www.vicsjavascripts.org.uk/StdImages/One.gif');
/*]]>*/
</script>
</body>

</html>

DanHardy
09-08-2011, 10:25 AM
Thanks for the updated code, it worked a dream.

Sorry, I wasn't specific enough about what I meant by "breaks the code".

If you go to the page I linked to previously and click any of the dots twice then click on another, it fails to return the other dot to its previous black state.

Thanks again

vwphillips
09-08-2011, 01:59 PM
problem is you are using a space in the file path of the image
which is not recommended

but


function SwapMe(img,src){
img=typeof(img)=='object'?img:document.getElementById(img);
if (SwapMe.lst&&SwapMe.lst[0]!=img){
SwapMe.lst[0].src=SwapMe.lst[1];
}
if (img&&img.src.substring(img.src.lastIndexOf('/')+1)!=src.substring(src.lastIndexOf('/')+1)){
SwapMe.lst=[img,img.src];
img.src=src;
}
}



resolves this issue

DanHardy
09-08-2011, 03:00 PM
Lovely.

Will donate in due course

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum