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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    OnClick and OnUnClick?

    I have an image with an OnClick thingy. When you click it, it changes the images. No problems there, however, I want to make it so that if the user clicks on any thing else (even the background), the changed image would revert back to the first image.

    I have the preloading script:

    Code:
    <script type="text/javascript">
    <!--
    var f1 = new Image();
    f1.src = "folder_1.png";
    var f2 = new Image();
    f2.src = "folder_2.png";
    -->
    </script>
    Then I have this for my image:
    Code:
    <a onclick="document.fol.src=f2.src"><img name="fol" src="folder_1.png"></a>
    I hope this is enogh detail. If not please ask me to explain further.

    How can I do this?

    Thanks!
    Last edited by Bob Leny; 07-29-2006 at 10:08 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Use the onfocus and onblur methods.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give the following a try

    PHP Code:
    <script type="text/javascript">
    <!--

    function 
    changePic(e){

    obj=(!e?event.srcElement:e.target)

    if(
    obj.nodeName=="IMG"){
    document.images["fol"].src="folder_2.png"
    }
    else{
    document.images["fol"].src="folder_1.png"
    }


    }

    document.onclick=changePic


    -->
    </script>

    <img name="fol" src="folder_1.png"> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 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>
    <script type="text/javascript">
    <!--
    var f1 = new Image();
    f1.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    var f2 = new Image();
    f2.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    var f3 = new Image();
    f3.src = "http://www.vicsjavascripts.org.uk/StdImages/Four.gif";
    
    var zxcEvtAry=[];
    
    function ImgClick(zxcimg){
     var zxcevt=window.event||arguments.callee.caller.arguments[0];
     var zxceobj =zxcEventObj(zxcevt);
     if (zxcimg){
      if (!window['zxc'+zxceobj.id]){ window['zxc'+zxceobj.id]=true; zxcEvtAry.push([zxceobj,zxceobj.src]); }
      zxceobj.src=zxcimg
     }
     Restore(zxceobj);
    }
    
    function Restore(zxcobj){
     for (var zxc0=0;zxc0<zxcEvtAry.length;zxc0++){
      if (zxcEvtAry[zxc0][0]!=zxcobj){
       zxcEvtAry[zxc0][0].src=zxcEvtAry[zxc0][1];
      }
     }
    }
    
    function zxcEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
     return zxceobj;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    var zxcEvt=0;
    
    function zxcAddEvt(zxco,zxcfun,zxcevt){
     if (zxco['zxc'+zxcfun+zxcevt]){ return; }
     zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxco['zxc'+zxcfun+zxcevt]=true;
     zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    zxcAddEvt(document,'ImgClick','click')
    
    -->
    </script>
    
    </head>
    
    <body>
    <a onclick="ImgClick(f2.src);"><img id="fol" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"></a>
    <br />
    <a onclick="ImgClick(f3.src);"><img id="fol1" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"></a>
    
    </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/

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Mr.J's code looks simplier. I should add to his code an identifier, if you indend to use that upon a single picture...:

    if(obj.nodeName=='IMG' && obj.id=='myPic')
    .....
    .....
    <img name="fol" id="myPic" src="folder_1.png">

    If multiple, you can use an array or an object to set the src addresses and the ids.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like this:
    PHP Code:
    <script type="text/javascript">
       <!--
          function 
    dbl(nav)
          {
             
    window.location nav;
          }
          
          function 
    changePic(e)
          {
             
    obj = (!e?event.srcElement:e.target);
             
             if(
    obj.nodeName == "IMG")
             {
                
    document.images["fol"].src "folder_2.png";
             }
             else
             {
                
    document.images["fol"].src "folder_1.png";
             }
          }
          
          
    document.onclick changePic;
       -->
    </script> 
    However, I would really like it if some one could explain what all the diffrent stuff does? I know and understand some of it, but not all of it. Some of this I have never even seen.

    Thanks!

  • #7
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure what you don't understand, but I'll try piecing together what I think might be confusing...

    The very last line sets the entire document's onclick event to the changePic function to handle it. This means wherever in the document you click, the changePic function will be run. Now in most browsers, the onclick event will pass in a parameter e that holds the info. about what was clicked; however IE doesn't play by the rules, so it doesn't pass in anything. So the first line of the function tries to establish (crossbrowser-wise) which element was clicked (and assigns that object to obj). The first line first checks if anything was passed into the function as e (or rather if nothing was passed in by asking "if not e" or in other words "if e does not exist"). If this check is true, then we know it was IE using the function, so we get the 'event' object (which the other browsers had already passed in) and see which element it is using IE's srcElement property. If on the other hand a value for e was found, we get the object of the event using the target property. Now that we know what object was clicked, we check to see if the object was an <img> element by checking its nodeName which returns the uppercase form of the tag name. If it was an <img> that was clicked then it assigns one source for the desired object, and assigns a different picture source to the object if an image was not clicked. Note that this last test was just to see if an <img> was clicked; if you have multiple <img>s, then you'll need to add something to the condition to distinguish which <img> was clicked (hense Kor's addition).
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    If were to use multiple images you could possibly go something like this

    PHP Code:
    <script type="text/javascript">
    <!--
    arr=[]

    arr['mypic1']=["pic1.jpg","pic2.jpg"]
    arr['mypic2']=["pic3.jpg","pic4.jpg"]
    arr['mypic3']=["pic5.jpg","pic6.jpg"]

    lastId=null
    function changePic(e){

    obj=(!e?event.srcElement:e.target)

    if(
    lastId!=null){
    document.images[lastId].src=arr[lastId][0]
    }


    if(
    obj.nodeName=="IMG"&&obj.className=="picswap"){
    document.images[obj.id].src=arr[obj.id][1]
    lastId=obj.id
    }

    }

    document.onclick=changePic

    -->
    </script>

    <img class="picswap" id="mypic1" src="pic1.jpg">
    <img class="picswap" id="mypic2" src="pic3.jpg">
    <img class="picswap" id="mypic3" src="pic5.jpg"> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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