Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Best method of CSS image rollovers (in boxes)?

    I've got a page with 2 rows of boxes, each containing a different image, and each is going to be a link to a different page. I want the images to appear somewhat dull in their "off" state and then once they are rolled over come to full color.

    I have never done CSS rollovers using images, but I am guessing I would just swap out the backgrounds in a hover class to achieve what I am trying to do. This seems simple in theory but I am wondering - is there a problem with preloading images in CSS? Maybe there is a method of using only one image instead of two? Should I be thinking about hidden layers, etc or what is the easisest way to accomplish this?

    Code so far:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Title Goes Here</title>
    </head>
    <style>
    * {
     margin: 0;
     padding: 0;
     }
    
    body {
    margin:0;
    padding:0;
    background-color:#cccccc;
    }
    
    a img {
    border-width:0;
    }
    
    #wrapper {
    width: 700px;
    height: 565px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    border: 1px solid #808080;
    background-color:#ffffff;
    } 
    
    #sidebar {
    width: 123px;
    height: 565px;
    float: left;
    background-image:url(images/sidebar.jpg);
    }
    
    #content {
    margin-left: 125px;
    height: auto;
    width:auto;
    padding: 30px;
    }
    
    h1, h2 {
    font:Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style:oblique;
    color: #444444;
    }
    
    h2 {
    margin-top:100px;
    }
    
    /* Begin W Boxes */
    #b1w, #b2w, #b3w {
    position:relative;
    float:left;
    height:35px;
    width:35px;
    border:1px solid;
    border-color: #808080; 
    margin-top: 5px;
    margin-right: 5px;
    background-color:#ffffff;
    }
    
    #b1w {
    background-image:url(images/brooke.gif);
    }
    
    #b2w {
    background-image:url(images/lakeo.gif);
    }
    
    #b3w {
    background-image:url(images/velagio.gif);
    }
    
    
    /* Begin C Boxes */
    #b1c, #b2c, #b3c {
    position:relative;
    float:left;
    height:35px;
    width:35px;
    border:1px solid;
    border-color: #808080; 
    margin-top: 5px;
    margin-right: 5px;
    background-color:#ffffff;
    }
    
    #b1c {
    background-image: url(images/liveit.gif);
    }
    
    </style>
    <body>
    <div id="wrapper">
    	<div id="sidebar"></div>
    	<div id="content">
    		<h1>W Header</h1>
    			<div id="b1w"></div>
    			<div id="b2w"></div>
    			<div id="b3w"></div>
    		<h2> C Header</h2>
    			<div id="b1c"></div>
    			<div id="b2c"></div>
    			<div id="b3c"></div>
    	</div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Since your using a different image for each link try this:

    http://www.dynamicdrive.com/dynamici...hlightgrad.htm

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think his objective was to steer clear of pointless javascript solutions.

    http://wellstyled.com/css-nopreload-rollovers.html

    should be what you are after
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ALA version

    Or, alternatively, the ALA version: Sliding Doors of CSS, Part II (basically the same principle).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ReadMe.txt
    I think his objective was to steer clear of pointless javascript solutions.

    http://wellstyled.com/css-nopreload-rollovers.html

    should be what you are after
    That is interesting.... what worries me is positioning though, seeing as how I have to create a seperate menu for each box (as they all contain different pictures). My boxes are in a row horizontally...but I guess it's just trial and error to get the images to fit in the boxes I have created? Also, I obviously need to make multiple anchor classes....
    Last edited by niemie; 03-14-2005 at 06:00 PM.

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    One more question on this....

    Thanks for the help guys! I got it to work, I really appreciate you linking the tutorial!

    Two more questions for you though: after I click on one of the images (links) it gets this dotted line around it that does not go away until you click somewhere else... I attached a picture of it. Anyone know what this is and how to get rid of it? Not that it matters, but I only have 2 states "a" and "a:hover" in my code - because the links are going to open in new windows.

    I'm also randomly getting flicker on the rollovers in IE - when I check the page locally with IE there is no flicker but when I upload to the server and check the page online there is. I am not following the update section about flickering in the article (http://wellstyled.com/css-nopreload-rollovers.html) - I don't see the change.....any help is greatly appreciated.

    Anyhow here is my code for reference if needed:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Title Goes Here</title>
    <style>
       * {
     margin: 0;
     padding: 0;
     }
    
    body {
    margin:0;
    padding:0;
    background-color:#cccccc;
    }
    
    a img {
    border-width:0;
    }
    
    #wrapper {
    width: 700px;
    height: 565px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    border: 1px solid #808080;
    background-color:#ffffff;
    } 
    
    #sidebar {
    width: 123px;
    height: 565px;
    float: left;
    background-image:url(images/sidebar.jpg);
    }
    
    #content {
    margin-left: 125px;
    height: auto;
    width:auto;
    padding: 30px;
    }
    
    h1, h2 {
    font:Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-style:oblique;
    color: #555555;
    }
    
    h2 {
    margin-top:90px;
    }
    
    /*** Begin web box rollovers ***/
    	#w1menu a {
    	position:relative;
    	float:left;
    	height:35px;
    	width:35px;
    	border:1px solid;
    	border-color: #808080; 
    	margin-top: 5px;
    	margin-right: 5px;
    	background:  url("images/brooke_whole.gif") 0 0 no-repeat;
    	}
    	
    	#w1menu a:hover {	
    	background-position: -35px 0;
    	}
    	
    	#w2menu a {
    	position:relative;
    	float:left;
    	height:35px;
    	width:35px;
    	border:1px solid;
    	border-color: #808080; 
    	margin-top: 5px;
    	margin-right: 5px;
    	background:  url("images/lakeo_whole.gif") 0 0 no-repeat;
    	}
    	
    	#w2menu a:hover {	
    	background-position: -35px 0;
    	}
    	
    	#w3menu a {
    	position:relative;
    	float:left;
    	height:35px;
    	width:35px;
    	border:1px solid;
    	border-color: #808080; 
    	margin-top: 5px;
    	margin-right: 5px;
    	background:  url("images/velagio_whole.gif") 0 0 no-repeat;
    	}
    	
    	#w3menu a:hover {	
    	background-position: -35px 0;
    	}
    
    /*** Begin corporate box rollovers ***/
    	#c1menu a {
    	position:relative;
    	float:left;
    	height:35px;
    	width:35px;
    	border:1px solid;
    	border-color: #808080; 
    	margin-top: 5px;
    	margin-right: 5px;
    	background:  url("images/liveit_whole.gif") 0 0 no-repeat;
    	}
    	
    	#c1menu a:hover {	
    	background-position: -35px 0;
    	}
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="sidebar"></div>
    	<div id="content">
    	    <!--- Begin web section --->
    		<h1>Web Header</h1>
    			<div id="w1menu">
    				<a href="#"></a>
    			</div>
    			<div id="w2menu">
    				<a href="#"></a>
    			</div>
    			<div id="w3menu">
    				<a href="#"></a>
    			</div>
    		<!-- Begin corporate section --->
    		<h2>Corporate Header</h2>
    			<div id="c1menu">
    				<a href="#"></a>
    			</div>
    	</div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Best method of CSS image rollovers (in boxes)?-dotted-line.gif  
    Last edited by niemie; 03-14-2005 at 07:47 PM.


  •  

    Posting Permissions

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