Results 1 to 9 of 9

Thread: Switch Content script - swap anchor image when selected

  1. #1
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Switch Content script - swap anchor image when selected

    I am using a switch content script, and am looking for a script to add which will swap the image of the selected so that it is obvious that it is the active content.
    Here is a link to the site:
    http://www.be-eventproductions.com/temp/theBEteam.html

    For example, if you select Susan and her content/bio appears below, her photo would swap the green border with orange to show that it is active.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    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>
    <span id="susan-title" class="handcursor"><img src="http://www.be-eventproductions.com/temp/images/susan_hernandez.png" style="border:none; margin-right:10px; margin-top:30px; margin-bottom:40px;" class="domroll http://www.be-eventproductions.com/temp/images/susan_hernandez-on.png" /></span>
    <span id="stacey-title" class="handcursor"><img src="http://www.be-eventproductions.com/temp/images/stacey_vuolo.png" style="border:none; margin-right:10px; margin-top:30px; margin-bottom:40px;" class="domroll http://www.be-eventproductions.com/temp/images/stacey_vuolo-on.png" /></span>
    <span id="tracey-title" class="handcursor"><img src="http://www.be-eventproductions.com/temp/images/tracey_jemieson.png" style="border:none; margin-top:30px; margin-bottom:40px;" class="domroll http://www.be-eventproductions.com/temp/images/tracey_jemieson-on.png" /></span>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    //=====================================================================
    //  DOM Image Rollover v3 (hover)
    //
    //  Demo: http://chrispoole.com/scripts/dom_image_rollover_hover
    //  Script featured on: Dynamic Drive (http://www.dynamicdrive.com)
    //=====================================================================
    //  copyright Chris Poole
    //  http://chrispoole.com
    //  This software is licensed under the MIT License
    //  <http://opensource.org/licenses/mit-license.php>
    
    // Modified
    
    //=====================================================================
    
    function domRollover() {
    	if (navigator.userAgent.match(/Opera (\S+)/)) {
    		var operaVersion = parseInt(navigator.userAgent.match(/Opera (\S+)/)[1]);
    	}
    	if (!document.getElementById||operaVersion <7) return;
    	var imgarr=document.getElementsByTagName('img'),imgPreload=[],imgSrc=[],imgClass=new Array(),i=0;
    	for (;i<imgarr.length;i++){
    		if (imgarr[i].className.indexOf('domroll')!=-1){
    			imgSrc[i]=imgarr[i].getAttribute('src');
    			imgClass[i]=imgarr[i].className;
    			imgPreload[i]=new Image();
    			if (imgClass[i].match(/domroll (\S+)/)) {
    				imgPreload[i].src = imgClass[i].match(/domroll (\S+)/)[1];
    			}
    			imgarr[i].setAttribute('xsrc', imgSrc[i]);
    			imgarr[i].zxcud=true;
    			imgarr[i].onmouseup=function(){
                    if (domRollover.lst&&domRollover.lst!=this){
    		    	 domRollover.lst.setAttribute('src',domRollover.lst.getAttribute('xsrc'));
                     domRollover.lst.zxcud=true;
                    }
    				this.setAttribute('src',this.zxcud?this.className.match(/domroll (\S+)/)[1]:this.getAttribute('xsrc'));
                    this.zxcud=!this.zxcud;
                    domRollover.lst=this;
                }
    		}
    	}
    }
    domRollover();
    /*]]>*/
    </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/

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    better

    remove the rollover script

    modify the fuctions(shown in red)

    Code:
    switchcontent.prototype.contractcontent=function(header){
    	var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
        swap(header,false);
    	innercontent.style.display="none"
    	this.togglestatus(header, this.statusClosed)
    	this.togglecolor(header, this.colorClosed)
    }
    
    
    //PRIVATE: Expands a content based on its corresponding header entered
    
    switchcontent.prototype.expandcontent=function(header){
    	var innercontent=document.getElementById(header.id.replace("-title", ""))
        if (header.ajaxstatus=="waiting"){//if this is an Ajax header AND remote content hasn't already been fetched
    		switchcontent.connect(header.ajaxfile, header)
    	}
        swap(header,true);
    	innercontent.style.display="block"
    	this.togglestatus(header, this.statusOpen)
    	this.togglecolor(header, this.colorOpen)
    }
    and add the new function

    Code:
    function swap(obj,ud){
     var img=obj.getElementsByTagName('IMG')[0];
     if (img){
      if (!img.xsrc){
       img.xsrc=[img.className.split(' ')[1],img.src];
      }
      img.src=img.xsrc[ud?0:1];
     }
    }
    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/

  4. #4
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    This is great, thanks! It works very well for the first link (susan) but the other 2 dont seem to highlight when selected/expanded. here is the link:
    http://www.be-eventproductions.com/temp/theBEteam.html

  5. #5
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Actually now it seems to only be working for Tracey (the last one). not sure why, but it only seems to work for one at a time. thanks!

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    remove the rollover script
    that is remove the script at the bottom of the page

    Code:
    <script src="chrisdomroll.js">
    
    /****************************************************
    * DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
    * Script featured on http://www.dynamicdrive.com
    * Keep this notice intact to use it :-)
    ****************************************************/
    
    </script>
    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. #7
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately, if I remove that, the menu scroll over doesnt work.

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,781
    Thanks
    2
    Thanked 415 Times in 409 Posts

    Default

    change the class name of the three images in question

    Code:
     class="zxc http://www.be-eventproductions.com/temp/images/susan_hernandez-on.png" />
    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. The Following User Says Thank You to vwphillips For This Useful Post:

    katebellami (06-07-2012)

  10. #9
    Join Date
    Jun 2010
    Posts
    58
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Thank you!!

Bookmarks

Posting Permissions

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