CSS and Rollovers?

Dev Shed Forums Sponsor:

May 7th, 2003, 10:26 AM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

CSS and Rollovers?

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?

May 7th, 2003, 12:09 PM

magma

Contributing User

Join Date: Apr 2003

Location: Italy, EU

Posts: 517

Time spent in forums: 11 h 45 m 8 sec
Reputation Power: 11

You can use JavaScript to test the value of the cookie and then use document.write function to set the roll-over image.
I think it's quite easy to write: you have to make more or less the same test you use to set the CSS. You better write down a function that writes the roll-over code and call it where you have to place it passing a thumbnail ID or something like that.
For example:

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

May 7th, 2003, 12:21 PM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Argggg......

OMG, why does that look so easy?

I've kicked this around for a couple of days now and nothing even looked as close, (or simple), as this.

I have to run out to do a job right now, but when I return, I'm gonna get all over this.

THANK YOU!!

I'll let you know how this turned out.

-proteus-

May 7th, 2003, 06:31 PM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Too much sun on my brain.

Well I thought it was going to be a breeze getting this to come together. I was wrong. Here's all the code I'm working with. Maybe somebody here has the brains to figure this out. Lord knows I don't seem to have them this week.

<HEAD>

<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>

May 7th, 2003, 06:33 PM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Oops!

In case this helps, here is the cookie information pertaining to each seperate style sheet:



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



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



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



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

May 7th, 2003, 07:08 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 14

Quote:

document.write('<link rel="stylesheet" type="text/css" href="'+f+'">\n');//.css">\n');

That's a bit too much (dirty leftover from some previous code?).
Try this instead:

Code:

document.write ('<link rel="stylesheet" type="text/css" href="' +f+ '">\n')

Works fine with this change here...

Jeroen

May 7th, 2003, 07:45 PM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Yes, that //.css">\n'); was a bit of leftover scrap.
However it had no effect on the outcome of the code.
It was '//' commented out of action. But I did just take it out anyway. thank you.

The problem I'm having here is not the placing of the cookie or the reading of it in order to use the selected Style Sheet, my problem is that depending on which style sheet is chosen I want specific, color scheme oriented, rollover images to appear on the page without having to have the viewer load ALL of the images for ALL of the different color schemes, ONLY the ones for the color scheme they chose.

The answer is close. I can almost taste it.

May 8th, 2003, 02:01 PM

SCARECROW

Junior Member

Join Date: Apr 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

While I dont have custom - colored rollovers, I do have custom colored transparent images (Logos) that are loaded, depending on the background color (to prevent halo-ing from the transparency)

You can see it in action here:

URL

In my case, I define either a td or a div with a background image... then each style sheet specifies a different background image.. so when you change styles, it changes the background images along with it..

Not an exact fix but, might point you in a different direction... [shrugs]

May 9th, 2003, 01:56 PM

RoyW

Contributing User

Join Date: Jan 2001

Posts: 30

Time spent in forums: < 1 sec
Reputation Power: 13

It really depends on what your rollover code looks like and what your image pre-loading code looks like. I will give an example using the pre-caching code I see most often. However, it would be easier if you could post your rollover code.

Code:

if(scheme == 1)
{
   imgOn1 = new Image(); imgOn1.src="images/yellow/pic1.jpg";
   imgOn2 = new Image(); imgOn2.src="images/yellow/pic2.jpg";
   imgOn3 = new Image(); imgOn3.src="images/yellow/pic3.jpg";
}
else if(scheme == 2)
{
   imgOn1 = new Image(); imgOn1.src="images/red/pic1.jpg";
   imgOn2 = new Image(); imgOn2.src="images/red/pic2.jpg";
   imgOn3 = new Image(); imgOn3.src="images/red/pic3.jpg";
}
else
{
   imgOn1 = new Image(); imgOn1.src="images/green/pic1.jpg";
   imgOn2 = new Image(); imgOn2.src="images/green/pic2.jpg";
   imgOn3 = new Image(); imgOn3.src="images/green/pic3.jpg";
}

Last edited by RoyW : May 9th, 2003 at 01:59 PM.

#10

May 10th, 2003, 11:46 AM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Back again....

Ok, well i have been busy doing other things for a couple of days. I'm back now and going at this again.

RoyW:

Hey, the rollover code is right there. It's in the Variables.

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>";

I've been playing with it some and some things have changed.
I went and looked at SCARECROW's site and decided to use the CSS swapping script he had gotten from web-sn.com. I like that it doesn't actually reload the page.

Anyhow, I've got it to were it will display the images, however it displays ALL of the at once. And the rollover function is not working yet. Here's what I'm working with now:

<HEAD>
<script language="JavaScript" type="text/javascript">
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";
</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 = "default"
}
}
// 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=\"styling_1\">Choose Colors</option>";
str += "<option value=\"styling_1\">Midnight</option>";
str += "<option value=\"styling_2\">B&W</option>";
str += "<option value=\"styling_3\">Pea Soup</option>";
str += "<option value=\"styling_4\">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 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 writeStyles(stylingID){
if(document.cookie = "styling_1.css"){
document.write(styling_1);
}

if(document.cookie = "styling_2.css"){
document.write(styling_2);
}

if(document.cookie = "styling_3.css"){
document.write(styling_3);
}

if(document.cookie = "styling_4.css"){
document.write(styling_4);
}
}

</script>
</HEAD>

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


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

#11

May 10th, 2003, 12:12 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 14

Quote:

if(document.cookie = "styling_1.css"){
document.write(styling_1);

Use Mozilla, turn on 'Show strict JavaScript warnings' (Edit->Preferences->Debug). It immediately shows:

Quote:

Warning: test for equality (==) mistyped as assignment (=)?
Source File: file:///usr/local/httpd/htdocs/testfolder/teststyling.html
Line: 104, Column: 36
Source Code:
if(document.cookie = "styling_4.css"){

Then there's:

Quote:

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>";

It's messy... Why use double quotes if single quotes could make it some much easier to read? And if you have the var 'alert'ed, it will show you that your quotation marks are not correct.

Hope this helps,
Jeroen

#12

May 10th, 2003, 03:02 PM

-proteus-

Junior Member

Join Date: May 2003

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

Quote:

Yeah, my bad.
The '.css' shouldn't be in there. I've corrected this. Thank you.

As for the dbl quotes, ("), I had singles in there but tried the doubles to see if maybe this was causing me a problem. It wasn't that I could tell. I had already reverted back to singles by the time I read your reply.

I've since gone ahead and used the rollover scripts used in Dreamweaver.

<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>

I am now getting only one thumbnail displayed on screen, which is what I want to happen in the above example(s). The rollover effect is still not working and it's only the first variable that is written no matter what style sheet is being used.

I still can't get it to place, (write), the appropriate content. And I am continuing to get an error caused from the
<SCRIPT LANGUAGE="JavaScript">writeStyles();
</script>

I'm about at the end of my rope with this. It's hotter then heck here and I just cannot concentrate properly.
I appreciate the help you all offered, but I think I'm going to hang this up for a while.

Thanks everybody,
-proteus-

CSS and Rollovers?

Developer Shed Advertisers and Affiliates