Switch Content script - swap anchor image when selected

**katebellami** · 06-02-2012, 02:49 PM

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.

**vwphillips** · 06-02-2012, 04:59 PM

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>

**vwphillips** · 06-03-2012, 03:41 PM

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];
 }
}

**katebellami** · 06-05-2012, 01:07 PM

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

**katebellami** · 06-05-2012, 01:12 PM

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!

**vwphillips** · 06-06-2012, 08:50 AM

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>

**katebellami** · 06-06-2012, 07:38 PM

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

**vwphillips** · 06-07-2012, 09:07 AM

change the class name of the three images in question

Code:

 class="zxc http://www.be-eventproductions.com/temp/images/susan_hernandez-on.png" />

**katebellami** · 06-07-2012, 12:16 PM

Thank you!!

Thread: Switch Content script - swap anchor image when selected

Thread Tools

Search Thread

Switch Content script - swap anchor image when selected

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions