homepage Welcome to WebmasterWorld Guest from 54.196.196.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
JavaScript, Cookies and Rollovers
proteus




msg:1484791
 4:11 pm on May 7, 2003 (gmt 0)

OK, I have a site that allows viewers to select from different style sheets, each one representing a different coloring scheme.
This information is then stored in a cookie so that the chosen style sheet is used throughout the site and upon viewers revisiting the site.

However....
When it comes to the different styles in my gallery, I have a problem. My thumbnails are rollover images that I wish to change to 'different' rollover images for each seperate coloring scheme.

I could use <DIV>'s with different hidden/visible attributes on each seperate Style Sheet, but this would cause an enormous increase in download time for the viewers no matter which scheme they chose.

Is there a way to maybe use JavaScript to read the cookie and determine which image/rollover combination to use and then load 'only' the ones needed for the particular Style Sheet being used?

Or maybe there is a way to embed (?) the required JS into the individual Style Sheets so that only the required images are loaded and used in the rollover operation?

Maybe I'm reaching too far. Any ideas?

 

Nick_W




msg:1484792
 4:17 pm on May 7, 2003 (gmt 0)

Wow, what a dilemma....!

Welcome to WebmasterWorld [webmasterworld.com] proteus

We have some pretty talented JS guys here so hopefully you'll find an answer here in the Browsers/HTML forum...

Nick

BlobFisk




msg:1484793
 4:56 pm on May 7, 2003 (gmt 0)

It is possible to dynamically link to an external javascript file based on the cookie - use some conditionals to link to the correct file based on the variable got from the cookie.

You may need to create a few different external JavaScript files, each based on the colour scheme. It might be wisest to use different directories for the images, each for a different colour scheme. Then the only difference in your JS files would be the path (I'm guessing, as I don't know how you are doing your rollovers).

Then, based on the cookie variable, the correct JS file is loaded in and points at the folder with the appropriate thumbnails.

Does this make any sense!?

proteus




msg:1484794
 5:15 pm on May 7, 2003 (gmt 0)

Nick_W: Thanks for the move to the appropriate forum.

<snip>

BobFisk: Ya know... that's kind of what I thought would have to happen. However, my JS skills are a bit lacking when it comes to the more complicated needs. I was really hoping to be pointed towards an existing example that I could learn from. I must have sat here for two days trying all types of crazy configurations, scripts and script modifications to make this work. But it never materialized for me. I understand the general structure of what I'm trying to accomplish, it's those darn specifics that have my mind frayed.

[edited by: korkus2000 at 5:20 pm (utc) on May 7, 2003]
[edit reason] check your sticky mail [/edit]

tedster




msg:1484795
 5:19 pm on May 7, 2003 (gmt 0)

I'd like to keep the conversation here on the board, rather than in Sticky Mail. If the solution gets discovered "out of sight", then this thread will not be useful for future readers.

It should be easy enough if we use simplified code - one image, one rollover, etc - rather than pasting everything into the thread.

Sounds to me like BlobFisk has the right idea. Read the cookie data, then use that in your master .js file to send your visitor to a second .js file -- one that is dedicated to their color scheme. Then in each dedicated .js file, define the image.src and rollover.src for that particular set of colors.

proteus




msg:1484796
 5:27 pm on May 7, 2003 (gmt 0)

I just had somebody throw this tid-bit of code at me.
I think it just might work, but I'll have to wait till later to try it out as I have to run off to work for a bit.

Take a look at this snippet of code:

var th1yellow = "<img src='img1.gif' onMouseOver.........";
var th1green = "<img src='img2.gif' onMouseOver.........";
var th2yellow = "<img src='img3.gif' onMouseOver.........";
var th2green = "<img src='img4.gif' onMouseOver.........";

function writeRoll(thumbID){
if(cookieValue == "green"){
if(thumbID == "1")
document.write(th1green);
if(thumbID == "2")
document.write(th2green);
}
if(cookieValue == "yellow"){
if(thumbID == "1")
document.write(th1yellow);
if(thumbID == "2")
document.write(th2yellow);
}
}

tedster




msg:1484797
 5:32 pm on May 7, 2003 (gmt 0)

Looks like a very sane way to go. And the code will make good sense when you come back to it a few months down the line (always a problem for me!)

proteus




msg:1484798
 11:18 pm on May 7, 2003 (gmt 0)

OK, here is what I've been working with. I'm still not getting any acceptable results. Actually I'm not getting ANY results. I sure would appreciate it if somebody pointed out the 'fundemental' flaw.

<HEAD>
<!-- STYLE SHEET SWAPPING -->
<script type="text/javascript">
function on(name) {
if (NN3) on3(name);
}
function off(name) {
if (NN3) off3(name);
}
var doAlerts=false;
function changeSheets(whichSheet){
whichSheet=whichSheet-1;
if(document.styleSheets){
var c = document.styleSheets.length;
if (doAlerts) alert('Change to Style '+(whichSheet+1));
for(var i=0;i<c;i++){
if(i!=whichSheet){
document.styleSheets[i].disabled=true;
}else{
document.styleSheets[i].disabled=false;
}
}
}
}
</script>
<TITLE> New Document </TITLE>

<script type="text/javascript">

// ROLLOVER INFORMATION
thumb1A=new Image();
thumb1A.src="thumbs/1pic_2.jpg";
thumb1B=new Image();
thumb1B.src="thumbs/1pic_1.jpg";
thumb2A=new Image();
thumb2A.src="thumbs/2pic_2.jpg";
thumb2B=new Image();
thumb2B.src="thumbs/2pic_1.jpg";
thumb3A=new Image();
thumb3A.src="thumbs/3pic_2.jpg";
thumb3B=new Image();
thumb3B.src="thumbs/3pic_1.jpg";
thumb4A=new Image();
thumb4A.src="thumbs/4pic_2.jpg";
thumb4B=new Image();
thumb4B.src="thumbs/4pic_1.jpg";

// PLACING COOKIE
var s=document.cookie.split(":");
var v=s[0],f=(s[1])?s[1]:'styling_1.css';
document.write('<link rel="stylesheet" type="text/css" href="'+f+'">\n');//.css">\n');
function switchStyle (n,s){
var x=new Date();x.setTime(x.getTime()+(60*60*24*365));
document.cookie=s+':'+n+':'+';expires='+x.toGMTString()+';path=/';
history.go(0);
}

// READING COOKIE AND TELLING IT WHAT TO WRITE
// This is where I am having no luck figuring things out
var styling_1 = "<a href='link_goes_here' onmouseover='thumb1.src='thumbs/1pic_2.jpg';' onmouseout='thumb1.src='thumbs/1pic_1.jpg';'><img name='thumb1' src='thumbs/1pic_1.jpg' border='0' width='80' height='80'></a>";
var styling_2 = "<a href='link_goes_here' onmouseover='thumb2.src='thumbs/2pic_2.jpg';' onmouseout='thumb2.src='thumbs/2pic_1.jpg';'><img name='thumb2' src='thumbs/2pic_1.jpg' border='0' width='80' height='80'></a>";
var styling_3 = "<a href='link_goes_here' onmouseover='thumb3.src='thumbs/3pic_2.jpg';' onmouseout='thumb3.src='thumbs/3pic_1.jpg';'><img name='thumb3' src='thumbs/3pic_1.jpg' border='0' width='80' height='80'></a>";
var styling_4 = "<a href='link_goes_here' onmouseover='thumb4.src='thumbs/4pic_2.jpg';' onmouseout='thumb4.src='thumbs/4pic_1.jpg';'><img name='thumb4' src='thumbs/4pic_1.jpg' border='0' width='80' height='80'></a>";

function writeRoll(thumbID){
if(cookieValue == "0"){
if(thumbID == "1")
document.write(styling_1);
}
if(cookieValue == "1"){
if(thumbID == "2")
document.write(styling_2);
}
if(cookieValue == "2"){
if(thumbID == "3")
document.write(styling_3);
}
if(cookieValue == "3"){
if(thumbID == "4")
document.write(styling_4);
}
}
</script>
</HEAD>

<BODY>
<FORM>
<SELECT class="picker" NAME="clicklist" onChange="top.location.href=this.form.clicklist.options[this.form.clicklist.selectedIndex].value">
<OPTION SELECTED VALUE="javascript:;">Choose Coloring Scheme
<OPTION VALUE="JavaScript:switchStyle('styling_1.css',0)">Midnight
<OPTION VALUE="JavaScript:switchStyle('styling_2.css',1)">B&W
<OPTION VALUE="JavaScript:switchStyle('styling_3.css',2)">Pea Soup
<OPTION VALUE="JavaScript:switchStyle('styling_4.css',3)">Tomato
</SELECT>
</FORM><p>
<SCRIPT LANGUAGE="JavaScript">
document.write();
</script>

</BODY>

proteus




msg:1484799
 11:21 pm on May 7, 2003 (gmt 0)

If it helps, here's the cookie information for each seperate Style Sheet:

<!-- midnight -->

0:styling_1.css:
home.earthlink.net/
1600
3935586304
29562151
2108278912
29562078
*

<!-- b&w -->

1:styling_2.css:
home.earthlink.net/
1600
920619008
29562152
3391218912
29562078
*

<!-- pea soup -->

2:styling_3.css:
home.earthlink.net/
1600
1250619008
29562152
3721598912
29562078
*

<!-- tomato -->

3:styling_4.css:
home.earthlink.net/
1600
1850619008
29562152
25791616
29562079
*

BlobFisk




msg:1484800
 10:02 am on May 8, 2003 (gmt 0)

I'm a bit confused as to what the code in the SELECT box and the script after it are meant to be doing (from msg #8).


document.write();

This is going to do nothing. This code is telling the browser to write what is within the parenthesis, which is nothing. So you'll get no action out of that.


onChange="top.location.href=this.form.clicklist.options[this.form.clicklist.selectedIndex].value"

Should this really be here? It is asking the form to change the loaction of the page to the chosen option in the list. As an aside, you can trim this down to this.options[this.selectedIndex].value;


<OPTION VALUE="JavaScript:switchStyle('styling_1.css',0)">Midnight

I can't see a switchStyle function in your JS. I can see a changeSheets function though!

proteus




msg:1484801
 4:12 pm on May 8, 2003 (gmt 0)

Ok, you were correct about the code in the select form. I've changed that to reflect your recommendation.
As for the 'changeSheets' function you pointed out, well it just doesn't work. Tried that before and it was a no go. However, the 'switchStyle' works like a champ.

document.write(x);

where x ='s "I tried everything and nothing worked".

(This is the part that has me dumbfounded)

proteus




msg:1484802
 8:12 pm on May 10, 2003 (gmt 0)

Ok, this is where I'm at. I am going to hang this project up in the closet. It's too hot here and I can't concentrate on this the way I would like to.

For those of you who are interested here is what I have gotten so far:

<HEAD>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<TITLE> TEST </TITLE>
<script language="JavaScript" type="text/javascript">
var allCookies = document.cookie.split("; "); //in case you have more than one cookie on your site
var websnSkin = ""
for (i=0; i < allCookies.length; i++) {
crumb = allCookies[i].split("=");
if (crumb[0] == "skin") { // find the cookie called skin
websnSkin = crumb[1]; // assign it's value to a variable
}
if (websnSkin == "") {
websnSkin = "midnight"
}
}
// call the correct CSS document
document.write ("<link rel='stylesheet' type='text/css' href='css/" + websnSkin + ".css' id='skin' />")

var today = new Date();
var expiry = new Date(today.getTime() + 365 * 24 * 60 * 60 * 1000); // 1 year

function doSkin(skin) {
document.getElementById("skin").href='css/' + skin + '.css';
document.cookie="skin=" + escape(skin) + "; expires=" + expiry.toGMTString() + "; path=/";
if (document.all) {// Internet Explorer (and opera too but that's ok)
var sel = document.getElementsByTagName("SELECT")
for (i=0;i<sel.length;i++) { // hide and show all select boxes otherwise their colours won't change in IE (GRRRR!)
sel[i].style.visibility = "hidden";
sel[i].style.visibility = "visible";
}
}
var nu = navigator.userAgent.toLowerCase();
var nu2 = (nu.indexOf("opera")!= -1);
if (nu2) {
// reload for opera, as it doesn't support dynamic css switching
window.location.reload();
}

}

function drawSkinSelector() {
if (document.getElementById) { // IE5+, NS6, Opera 6
str = "";
str += "<select class='picker' name='skinsel' onchange='doSkin(this.options[this.options.selectedIndex].value)'>";
str += "<option value='midnight'>Choose Colors</option>";
str += "<option value='midnight'>Midnight</option>";
str += "<option value='bw'>B&W</option>";
str += "<option value='peasoup'>Pea Soup</option>";
str += "<option value='tomato'>Tomato</option>";
// add options as desired
str += "</select>";
}
else {
str = "<img src='/images/spacer.gif'>"; // not dom compliant, don't bother.
}
document.write(str);

}

function browserChk() { // write dumbed-down CSS document for Netscape 4
var nm = navigator.appName.indexOf("Netscape")!= -1;
var vers = parseInt(navigator.appVersion);
if (nm && (vers == 4)) {
document.write("<link rel='stylesheet' type='text/css' href='/css/ns.css'>");
}
}
// READING COOKIE AND TELLING IT WHAT TO WRITE
var doAlerts=true;
var midnight = "<A href='#' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image1','','thumbs/1beg3.jpg',0)'><IMG src='thumbs/1beg2.jpg' name='Image1' width='80' height='80' border='0'></A>";
var bw = "<A href='#' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image2','','thumbs/2beg3.jpg',0)'><IMG src='thumbs/2beg2.jpg' name='Image2' width='80' height='80' border='0'></A>";
var peasoup = "<A href='#' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image3','','thumbs/3beg3.jpg',0)'><IMG src='thumbs/3beg2.jpg' name='Image3' width='80' height='80' border='0'></A>";
var tomato = "<A href='#' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image5','','thumbs/4beg3.jpg',0)'><IMG src='thumbs/4beg2.jpg' name='Image5' width='80' height='80' border='0'></A>";

function writeStyles(styleID){
if(websnSkin = "midnight"){
document.write(midnight);
}

else if(websnSkin = "bw"){
document.write(bw);
}

else if(websnSkin = "peasoup"){
document.write(peasoup);
}

else if(websnSkin = "tomato"){
document.write(tomato);
}
}

</script>
</HEAD>

<BODY>
<script language="JavaScript" type="text/javascript">drawSkinSelector();</script>

<SCRIPT LANGUAGE="JavaScript">writeStyles();
</script>
</BODY>

Some changes from the earlier version for sure. Went with the Dreamweaver rollover scripts and changed the codes for the cookie to one I found at web-ns.com, (I think).
Anyhow, it keeps writing only the first variable no matter what style sheet is called for. And I'm continuing to get an error out of the
<SCRIPT LANGUAGE="JavaScript">writeStyles();
</script>
(don't know why)

Anyhow, I'm done with this for now. If anybody can use this dysfunctional waste of my time for anything, have at it.

I want to thank all of you who replied with ideas and pointers. I found it all very helpful.

Thanks again,
proteus

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved