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');"> </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');"> </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

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

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

Thread: Small question concerning a background-image swap via an "onclick" event handler

Thread Tools

Search Thread

Small question concerning a background-image swap via an "onclick" event handler

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

Bookmarks

Bookmarks

Posting Permissions