PDA

View Full Version : Small question concerning a background-image swap via an "onclick" event handler



Shammus
06-26-2009, 09:22 PM
I'm using a very small function cellImg to swap background images in a small content area below. Basically, I have two tabs a "primary" tab and a "secondary" tab each with an on and off state. The idea is that I click on one tab and the "onstate" version appears with it's correlating content appearing underneath. Meanwhile, the "offstate" tab is deselected and the content that correlates with that tab is hidden.

The question I have is, if my page is refreshed, the content stays the same for whatever tab was clicked most recently. The tabs themselves always revert back to the primary tab. Is there a way to keep the tabs from reverting back during a page refresh?



Small Javascript function here....

function cellImg(idCell, imgName) {
document.getElementById(idCell).style.background = "url(" + imgName + ")";
}


Here is the HTML.....


<div class="tabArea">
<div class="tab_primary" id="backswap"><a href="sample.html" target="tabIframe1" onclick="cellImg('backswap','images/primary_on.gif'); cellImg('backswap2','images/secondary_off.gif');">&nbsp;</a></div>

<div class="tab_secondary" id="backswap2"><a href="sample2.html" target="tabIframe1" onclick="cellImg('backswap','images/primary_off.gif'); cellImg('backswap2','images/secondary_on.gif');">&nbsp;</a></div>

<div style="clear:both;"></div>
</div>


Thanks in advance....

Shammus
06-28-2009, 11:31 PM
Any guesses on this one? I apologize if my post was confusing. Essentially I'm just needing a small js function that stores the user's selection in cookies so that when the page is refreshed, the tab that's selected doesn't revert back to the primary tab by default. Thanks much....

vwphillips
06-29-2009, 09:51 AM
<!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">
/*<![CDATA[*/

function cellImg(idCell, imgName) {
document.getElementById(idCell).style.backgroundImage = "url(" + imgName + ")";
zxcCreateCookie(idCell,imgName,1);
}
function zxcCreateCookie(nme,v,days){
document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function zxcReadCookie(nme){
nme+='=';
var split = document.cookie.split(';');
for(var z0=0;z0<split.length;z0++){
var s=split[z0];
while (s.charAt(0)==' ') s=s.substring(1,s.length);
if (s.indexOf(nme)==0) return s.substring(nme.length,s.length);
}
return null;
}

function Restore(){
if(zxcReadCookie('backswap')) cellImg('backswap',zxcReadCookie('backswap'));
if(zxcReadCookie('backswap2')) cellImg('backswap2',zxcReadCookie('backswap2'));
}
/*]]>*/
</script></head>

<body onload="Restore();">
<div class="tabArea">
<div class="tab_primary" id="backswap"><a href="#" target="tabIframe1"
onclick="cellImg('backswap','http://www.vicsjavascripts.org.uk/StdImages/One.gif'); cellImg('backswap2','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');return false;">&nbsp;</a></div>

<div class="tab_secondary" id="backswap2"><a href="#" target="tabIframe1"
onclick="cellImg('backswap','http://www.vicsjavascripts.org.uk/StdImages/Two.gif'); cellImg('backswap2','http://www.vicsjavascripts.org.uk/StdImages/One.gif');return false;">&nbsp;</a></div>

</body>

</html>

Shammus
06-29-2009, 02:49 PM
Thanks VW, I appreciate the help! That works perfectly in most browsers. Is there anything that can be added to get that to work in IE 6 as well?

Thank you again....

vwphillips
06-30-2009, 08:49 AM
I am assuming that the cookie is not working.

As I do not have IE 6 please test this(using the W3 getCookie)


<!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">
/*<![CDATA[*/

function cellImg(idCell, imgName) {
document.getElementById(idCell).style.backgroundImage = "url(" + imgName + ")";
zxcCreateCookie(idCell,imgName,1);
}

function zxcCreateCookie(nme,v,days){
document.cookie=nme+'='+v+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}


function zxcReadCookie(nme){
nme+='=';
var split = document.cookie.split(';');
for(var z0=0;z0<split.length;z0++){
var s=split[z0];
while (s.charAt(0)==' ') s=s.substring(1,s.length);
if (s.indexOf(nme)==0) return s.substring(nme.length,s.length);
}
return null;
}

function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
function Restore(){
if(getCookie('backswap')) cellImg('backswap',getCookie('backswap'));
if(getCookie('backswap2')) cellImg('backswap2',getCookie('backswap2'));
}
/*]]>*/
</script></head>

<body onload="Restore();">
<div class="tabArea">
<div class="tab_primary" id="backswap"><a href="#" target="tabIframe1"
onclick="cellImg('backswap','http://www.vicsjavascripts.org.uk/StdImages/One.gif'); cellImg('backswap2','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');return false;">&nbsp;</a></div>

<div class="tab_secondary" id="backswap2"><a href="#" target="tabIframe1"
onclick="cellImg('backswap','http://www.vicsjavascripts.org.uk/StdImages/Two.gif'); cellImg('backswap2','http://www.vicsjavascripts.org.uk/StdImages/One.gif');return false;">&nbsp;</a></div>

</body>

</html>