#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep Power
    0

    Question 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?
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12
    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);
      }
    }
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep 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-
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep 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>
    <!-- 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>
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep Power
    0

    Oops!


    In case this helps, here is the cookie information pertaining to 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
    *
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep 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.
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    3
    Rep 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:

    http://7thaaf.com

    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]

  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Posts
    30
    Rep Power
    14
    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.
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep 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>

    <!-- I'm getting a Syntax error here. Twice for each thumnail. Actually only one thumb/rollover should be displayed in this example, it goes ahead and tries to display all four -->
    <SCRIPT LANGUAGE="JavaScript">writeStyles();</script>
    </BODY>
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    if(document.cookie = "styling_1.css"){
    document.write(styling_1);
    Use Mozilla, turn on 'Show strict JavaScript warnings' (Edit->Preferences->Debug). It immediately shows:
    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:
    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
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    8
    Rep Power
    0
    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"){
    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-

IMN logo majestic logo threadwatch logo seochat tools logo