www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS image swap and preload

  1. #1
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304

    Exclamation CSS image swap and preload

    This is a follow-up from a thread I posted earlier in the HTML forum (http://forums.webdeveloper.com/showt...threadid=21898).
    What I am trying to achieve is:
    - a CSS preload;
    - a CSS image swap;
    - a CSS boxdescription;

    Open the attached page in IE and all works just fine. But...

    Open the page in Mozilla and...
    1. ...the mouseover hardly works at all;
    2. ...the images are not aligned properly;
    3. ...the images shift down during the mouseover.

    Then, try adding the doctype:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Open the page in Internet Explorer and...
    1. ...the set height of the "#textbox" is being ignored;

    Open the page in Mozilla and...
    1. ...the set height of the "#textbox" is being ignored;
    2. ...the images appear 1 times above eachother;
    3. ...the images shift down during the mouseover.

    I have been playing a little with the "#back" id, which prevents the image from appearing 1 times in Mozilla.
    I know of the swap-method using just one image (http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/).
    But in this case I'd rather use two images with an image swap.

    Thanks a million for taking a look at it!

    Cheers, Jochem
    Attached Files Attached Files
    "to live = to learn"

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    1. change the height of the #textbox and it's height changes.
    I can't see a problem here.
    2. and 3. These are one and the same problem: cascading styles.
    The a:hover style is being used on all the #menu0X a:hover,
    but not on #menu0X a:active nor #menu0X a
    The font declaration must be applied to #menu0X a:active and #menu0X a
    Try this:
    a {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
    a:hover {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
    a:active {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}

  3. #3
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Thanx for your reply Fang!

    1. I figured out what I did wrong: I forgot to add px.
    2. In NS and Mozilla the images are still repeated when hovered. I added some code, but it does not seem to be of much influence: #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;}.
    3. Your solution works, although I don't understand why. Could you please explain?
    4. (new) In NS and Mozilla the images are placed in a different position than in IE. Can I solve this?

    The Bitmaps are still to be replaced by Gifs.

    Cheers, Jochem
    Code:
    <style type="text/css">
        #void .preload  {display:none;}
        a span          {display:none;}
        a               {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
        a:active        {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
        a:hover         {font:9pt Verdana,Arial; font-weight:normal; color:#0099ff; text-decoration:none;}
        a:hover span    {position:absolute; visibility:visible; z-index:1; padding:0px; top:-14px; left:3px;  width:300px; height:26px; display:block;}
        #textbox        {position:absolute; visibility:visible; z-index:1; padding:0px; top:2px;   left:10px; width:300px; height:50px; border:1px solid #64646e;}
        #imagelinks     {position:absolute; visibility:visible; z-index:2; padding:0px; top:43px;  left:12px; width:300px; height:13px;}
    
        #back, #forward, #menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {background-position:0px 0px; background-repeat:no-repeat;}
    
        #back a         {background-image:url("IMG/HiRes_back_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
        #back a:hover   {background-image:url("IMG/HiRes_back_aan.bmp");}
        #forward a      {background-image:url("IMG/HiRes_forward_uit.bmp"); width:17px; height:13px; z-index:2; padding:0px;}
        #forward a:hover{background-image:url("IMG/HiRes_forward_aan.bmp");}
        #menu01 a       {background-image:url("IMG/HiRes_01_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu01 a:hover {background-image:url("IMG/HiRes_01_aan.bmp");}
        #menu01 a:active{background-image:url("IMG/HiRes_01_aan.bmp");}
        #menu02 a       {background-image:url("IMG/HiRes_02_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu02 a:hover {background-image:url("IMG/HiRes_02_aan.bmp");}
        #menu02 a:active{background-image:url("IMG/HiRes_02_aan.bmp");}
        #menu03 a       {background-image:url("IMG/HiRes_03_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu03 a:hover {background-image:url("IMG/HiRes_03_aan.bmp");}
        #menu03 a:active{background-image:url("IMG/HiRes_03_aan.bmp");}
        #menu04 a       {background-image:url("IMG/HiRes_04_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu04 a:hover {background-image:url("IMG/HiRes_04_aan.bmp");}
        #menu04 a:active{background-image:url("IMG/HiRes_04_aan.bmp");}
        #menu05 a       {background-image:url("IMG/HiRes_05_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu05 a:hover {background-image:url("IMG/HiRes_05_aan.bmp");}
        #menu05 a:active{background-image:url("IMG/HiRes_05_aan.bmp");}
        #menu06 a       {background-image:url("IMG/HiRes_06_uit.bmp"); width:14px; height:13px; z-index:2; padding:0px;}
        #menu06 a:hover {background-image:url("IMG/HiRes_06_aan.bmp");}
        #menu06 a:active{background-image:url("IMG/HiRes_06_aan.bmp");}
    </style>
    "to live = to learn"

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    1. most browsers have no problem with leaving out the "px", but it is not valid!
    2. I don't see this in moz 1.0 and 1.4 Which browser version are you using?
    3. The declarations used in a:active are inherited by #menu0X a:active
    The font value is applied to #menu01 a:active - hence Cascading Style Sheets.
    4. Probably caused by the DTD putting IE into Quirks mode.
    Place the following at the top of your page
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    Now see its effect in IE and Mozilla, with and without the above code.

    Groetjes Fang

  5. #5
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    2. Mozilla 1.5.
    4. The doctype code was is in already. When I leave it out:
    - Moz is okay, although images are placed 1 pixel too low, resulting in hiding of the image bottom;
    - IE is okay, although images are placed 2 pixels too low.

    What is going wrong?
    Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?

    Groetjes terug, Jochem
    Last edited by jochem; 12-17-2003 at 02:13 PM.
    "to live = to learn"

  6. #6
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    If you open the attached zip-file in IE, you'll see the page just as I want it to be. NS and Mozilla however show a different result.
    The changes offered by Fang unfortunately turned out not to be of any help, since they eliminate the CSS boxdescription.
    So what changes should I make to get the same result with NS and Mozilla?

    Remaining question: Should I leave the #back, #forward, ..... {background-position:0px 0px; background-repeat:no-repeat;} line in?

    Cheers, Jochem
    Attached Files Attached Files
    "to live = to learn"

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change these lines:
    a:hover { text-decoration:none;}
    a:hover span {font:14pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;position:absolute; visibility:visible; z-index:2; padding:0px; top:-23px; left:5px; width:280px; height:26px; display:block;}
    and all background-image
    background-image:url("../IMG/back_uit.gif");
    to
    background:url("../IMG/back_uit.gif") no-repeat;
    remove the line #back, #forward, ...
    The #menu01 a is wrong and missing active and hover of same

  8. #8
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I am sorry Fang, but...
    1. Changing the line a:hover span {position:absolute; visibility:visible; .......} does not make any difference.
    2. The line a:hover {font:13pt Arial; font-weight:bold; color:#0099ff; text-decoration:none;} however has to stay in as it was. Otherwise the Boxdescription will not show.
    3. Changing background-image:url("../IMG/back_uit.gif"); to background:url("../IMG/back_uit.gif") no-repeat; and removing the line #back, #forward, ... causes all images to disappear.
    4. I messed up indeed with #menu1 and #menu2. I fixed it. [01_aan.gif] should be shown by default.

    --> As the code is now, all that is left to solve is the fact that the images still repeat in NS and Mozilla. They do not shift anymore.

    Cheers, Jochem
    Attached Files Attached Files
    Last edited by jochem; 12-18-2003 at 06:33 AM.
    "to live = to learn"

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change all the lines mentioned in 3. and leave the line #back, #forward, ... in the script.

  10. #10
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    It's done!!!

    background:url("../IMG/back_uit.gif") no-repeat; is replaced by background:url("../IMG/back_uit.gif"); background-repeat:no-repeat;.

    That's all. Fang, bedankt voor je hulp.

    Cheers, Jochem
    "to live = to learn"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles