Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Toggle Multiple Images

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    DanHardy (09-07-2011)

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Your the best

    Thanks

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    One more thing.

    I know I'm being greedy now.

    I need one dot to be white onload?

    Thanks again

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    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

    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    problem is you are using a space in the file path of the image
    which is not recommended

    but

    Code:
    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
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #9
    New Coder
    Join Date
    Mar 2010
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Lovely.

    Will donate in due course



  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •