Log in

View Full Version : 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
<!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)



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




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


<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


class="zxc http://www.be-eventproductions.com/temp/images/susan_hernandez-on.png" />
katebellami
06-07-2012, 12:16 PM
Thank you!!