CSS - Css Image Rollovers

Hi,

I am trying to create a menu, and I would like to try to do it without using Javascript.

I a number of menu items, that each has three states - first state is just white text, second state needs to fade from white to blue text when mouse is rolled over. Third state needs to fade from blue to white text when mouse is taken off each menu item. I have the three images for that (white, white-blue, blue-white).

I have read up on a few image rollover guides using CSS, but they all involve putting outlines around an existing image etc. As the images need to be links, they can't be background images (can they?), they have to be just images.

So, can anyone point me in the right direction on how to swap an image with another when one a) an image is rolled over, and also b) when the mouse is removed from over the image.

Thanks

Hi There,

I am working on a new layout for a control panel.

I have the basic layout coded up:

http://www.lampdesign.co.uk/desdev/ss/

I am now needing to put a row of icon images in for the various sections of the control panel - here is an example of what they look like:

http://lampdesign.co.uk/desdev/ss/images/buttonbar.png

Is it possible to do a rollover image list?, I have looked on listomatic and there are image lists with rollover bg images but no actual image rollovers.

I am not 100% sure what to do - I could do tables but I'd rather not!

Any ideas?

Thanks

Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time.

I'm trying to put it on a WordPress site ...

Any links or help would be much appreciated!

Laura S.

Originally, I used <DIV> as containers for background images which swap when you hover over them. I enclosed the <DIV> tags with <A> tags to make them 'links'. Older versions of IE didn't want to work with this though and I found it this is invalid CSS, so I explored some more...

The best solution I have found so far is to use <A> itself as a container. This solved the IE5 problems, but now IE4 SP2 doesn't show them at all. I'm okay with leaving IE4 behind, but I discovered that using <A> tags as containers was an invalid technique.

If I can't use <A><DIV> and I can't use <A>, then what can I use to make valid, preloaded CSS image rollovers that work? I'm not considering Javascript an option. Is it possible?

Here's a random, simliar example of what I've done with the <A> tags.
http:// www. findmotive. com /2006/10/31/simple-css-image-rollover/

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here.
PseudoCSS:

Code:

#topdiv{
width:960px;
}

#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}

.previous a{
background: url('images/previous.png') no-repeat;
}

.previous a:hover {
background-position:0 -62px;
}

PseudoHTML:
Code:

<div id="topdiv"><a href="" class="previous">Link</a></div>
<div id="bottomdiv">Content</div>

When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements?

I recently found out that you can use CSS to do rollover images. And I thought, thats much better than DHTML/javascript/whichever your preference to call it is for rollovers, but my question is, if there is a way to use CSS for a transition out image.

Like, say for example the image is of outlined text by default, the user mouses over the image and the text will slowly fill with orange, and then when the user mouses off of the image, the orage in the outlined text fades out. That's easily done with javascript, but I'm not sure if its possible to do with CSS.

Is it? Thanks in advance.

I want to create a menu where when you rollover and option it changes color ... this I've done. The next thing I want is for the active page to stay the rollover color ... how do I do this?

Code:

<html>
<head>
<style type="text/css">

#navcontainer { width: 200px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #329CAA;
border-bottom: 1px solid #eee;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #99D041;
color: #fff;
}
</style>
</head> 

<body>
<table width="100%"  border="0">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="200"> <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

I got most of this code from: http://css.maxdesign.com.au/listamatic/vertical08.htm

Ok, Here what I need to figure out. I have a set of images on my main page.
My Site and then I have a set of images to be over put on top of them with some kind of roll over/over lay. these images look like this Rollover images. on my main page if you hit refresh the photo gallery image is random from a directory. This removes the posablity of static images for that. my current css is at http://www.guthnur.net/style.css. Can anyone tell me how to put my transparent image over a image in the same div?

how can I do a CSS rollover like the rollover that is on amazon.com? for example when you rollover an image and a box shows up with links and a search box.
how is that done?
is that with CSS layers? if so, how do you go about doing something like that?

link: amazon example

delete

I followed the instructions he
http://www.meyerweb.com/eric/css/edge/popups/demo.html

but they "only" work in mozilla, konqueror, opera...
http://new.lfcompany.com/design.php

what gives?

Hello all
I'm putting together a site and would like to make my HTML pages use an external style sheet (the site's pages will have exactly the same content and button links at the top 1/4 of the page).

I am unsure how to get my rollovers to work using a style sheet. Currently, my HTML has an internal script that does the job... Is it possible to set my rollovers in the external style sheet, thus allowing me to have that content easily updated for all pages on the site? I know this is a fundamental CSS question but bear with me, I'm still learning the code, thanks! Even if I can code one of the buttons to have the rollover in CSS, I could do the rest.

Here is my code that works for HTML; it needs to be transferred to CSS as a base style sheet... can it be done? Thanks in advance!

Code:

<html>
<head>
<title>MY SITE EXAMPLE</title>

<SCRIPT language="JavaScript"> 
<!--

  if (document.images)
   {
     homeon= new Image(98,40);
     homeon.src="images/b-home-on.jpg";  
     aboutuson= new Image(98,40); 
     aboutuson.src="images/b-aboutus-on.jpg";
     productson= new Image(98,40);
     productson.src="images/b-products-on.jpg";
     servsuppon= new Image(98,40);
     servsuppon.src="images/b-servsupp-on.jpg";
     downloadson= new Image(98,40);
     downloadson.src="images/b-downloads-on.jpg";
     custinqon= new Image(98,40);
     custinqon.src="images/b-custinq-on.jpg";
     dealerinqon= new Image(98,40);
     dealerinqon.src="images/b-dealerinq-on.jpg";
     contacton= new Image(98,40);
     contacton.src="images/b-contact-on.jpg";
      
     
     homeoff= new Image(98,40);
     homeoff.src="images/b-home.jpg";
     aboutusoff= new Image(98,40);
     aboutusoff.src="images/b-aboutus.jpg";
     productsoff= new Image(98,40);
     productsoff.src="images/b-products.jpg";
     servsuppoff= new Image(98,40);
     servsuppoff.src="images/b-servsupp.jpg";
     downloadsoff= new Image(98,40);
     downloadsoff.src="images/b-downloads.jpg";
     custinqoff= new Image(98,40);
     custinqoff.src="images/b-custinq.jpg";
     dealerinqoff= new Image(98,40);
     dealerinqoff.src="images/b-dealerinq.jpg";
     contactoff= new Image(98,40);
     contactoff.src="images/b-contact.jpg";
   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>
</head>

<body bgcolor="#000000" background="images/bglines.jpg" text="000000" topmargin="0">

<font face="Arial, Helvetica, Sans-Serif">
<center>

<table border="0" cellspacing="0" cellpadding="0" width="784">
	<tr>
		<td bgcolor="FFFFFF"> 


	<table border="0" bgcolor="FFFFFF" cellspacing="0" cellpadding="0">
	<tr>
		<td width="784" height="150" background="images/gb-top-bar.jpg">
			
		</td>
	</tr>

	<tr>
		<td width="784" height="40" border="0" cellspacing="0" cellpadding="0">
<a href="index.htm" onMouseover="lightup('home')" onMouseout="turnoff('home')"><img src="images/b-home.jpg" name="home" width="98" height="40" border="0"></a><a href="aboutus.htm" onMouseover="lightup('aboutus')" onMouseout="turnoff('aboutus')"><img src="images/b-aboutus.jpg" name="aboutus" width="98" height="40" border="0"></a><a href="products.htm" onMouseover="lightup('products')" onMouseout="turnoff('products')"><img src="images/b-products.jpg" name="products" width="98" height="40" border="0"></a><a href="support.htm" onMouseover="lightup('servsupp')" onMouseout="turnoff('servsupp')"><img src="images/b-servsupp.jpg" name="servsupp" width="98" height="40" border="0"></a><a href="downloads.htm" onMouseover="lightup('downloads')" onMouseout="turnoff('downloads')"><img src="images/b-downloads.jpg" name="downloads" width="98" height="40" border="0"></a><a href="custinq.htm" onMouseover="lightup('custinq')" onMouseout="turnoff('custinq')"><img src="images/b-custinq.jpg" name="custinq" width="98" height="40" border="0"></a><a href="dealerinq.htm" onMouseover="lightup('dealerinq')" onMouseout="turnoff('dealerinq')"><img src="images/b-dealerinq.jpg" name="dealerinq" width="98" height="40" border="0"></a><a href="contact.htm" onMouseover="lightup('contact')" onMouseout="turnoff('contact')"><img src="images/b-contact.jpg" name="contact" width="98" height="40" border="0"></a>
		</td>
	</tr>
	<tr>
</table>
<table>
	<tr width="784">
		<td width="392"><font size="1"><a href="dealerlocator.htm">Find a dealer near you!</a>
		</td>
		<td width="392" align="right"><font size="1">
<font size="2">
<SCRIPT>
document.write(Date())
</SCRIPT>
</font>
		</td>
	
	</tr>

	</table>

		</td>
	</tr>
</table>

</center>

</body>
</html>

I have been trying various things all night but I cannot figure it out.... Here is the link to the page in question:

http://www.atlantahrd.com/index_new.htm

In Safari and IE6 it looks right - horizontal navigaiton bar across the top. In IE/Mac (5.2) the navigation bar just centers itself on the screen and shows up as a vertical list. It is driving me crazy! Can anyone point me in the right direction? Thank you so much!

Also, the CSS file is as follows:

Code:

.Name {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	color: #990000;
}
.Address {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #990000;
}
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #990000;
	background-color: #FFFFFF;
	padding: 0px;
	margin-top: 0px;
	margin-right: 10%;
	margin-bottom: 0px;
	margin-left: 10%;
}
#logotext {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 32px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: capitalize;
	color: #000000;
	letter-spacing: 2px;
}
#logotextCaps {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 50px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: capitalize;
	color: #000000;
}

#navlist {
font-size: .9em;
position: absolute;
left: 0px;
top: 87px;
margin: 0;
width: 750px;
}
#navlist li {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	text-align: center;
}
#navlist ul {
margin: 0;
padding: 0;
}
#navlist a {
	padding: 0px 15px 0px 16px;
	border: 1px solid;
	border-color: #000000;
	background-color: #000000;
	text-decoration: none;
}
#navlist a:link, #navlist a:visited {
color: #ffffff;
}
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #ffffff;
color: #000000;
}
#logostripetop {
	background-color: #990000;
	position:absolute;
	left:0;
	top:3px;
	width:750px;
	height:17px;
	z-index:1;
	visibility: visible;
}
#logostripebottom {
	background-color: #990000;
	position:absolute;
	left:0;
	top:60px;
	width:750px;
	height:17px;
	z-index:2;
	visibility: visible;
}
#homeresourcebox {
	position:absolute;
	left:4px;
	top:10px;
	width:364px;
	height:30px;
	z-index:3;
	visibility: visible;
}
#atlantabox {
	position:absolute;
	left:45px;
	top:7px;
	width:85px;
	height:24px;
	z-index:4;
	background-image: url(images/atlanta.gif);
	layer-background-image: url(images/atlanta.gif);
	border: 1px none #000000;
	visibility: visible;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
}
#directorybox {
	position:absolute;
	left:226px;
	top:58px;
	width:85px;
	height:24px;
	z-index:5;
	background-image: url(images/directory.gif);
	layer-background-image: url(images/directory.gif);
	border: 1px none #000000;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	visibility: visible;
}
#leftbox {
	position:absolute;
	left:0px;
	top:125px;
	width:150px;
	height:300px;
	z-index:8;
	overflow: visible;
	visibility: visible;
}
#centerbox {
	position:absolute;
	left:160px;
	top:125px;
	width:460px;
	min-height:300px;
	z-index:7;
	overflow: visible;
	visibility: visible;
}
#rightbox {
	position:absolute;
	left:630px;
	top:125px;
	width:120px;
	text-align:center;
	height:300px;
	z-index:6;
	overflow: visible;
	visibility: visible;
}
#copyright {
	position:relative;
	width:250px;
	text-align:center;
	height:20px;
	margin-top:0;
	z-index:9;
	visibility: visible;
}

I'm trying to get my buttons to rollover using a single image and change the background position on a:hover... and I'm having a bitch of a time figuring out why they're not working. I'm building them almost exactly how I always do, but I can't for the life of me see what's going wrong here.

Hoping somebody can take a peek at my code and tell me what I did wrong here...

http://www.crackin.com/dev/index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Melt Away Massage</title>

<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000;}
body {margin: 0px; background: url(images/pageBg.jpg) no-repeat center top fixed #fff;}
img {margin:0px; padding:0px; border:none;}

.float img, .float div {float:left;}
.clear {clear:both; height:0px;}

#nav1 div {width:223px; height:98px; margin:0 0 13px 10px;}
#nav1 a {display:block; width:100%; height:100%; background-position:left;}
#nav1 a:hover {background-position:right;}

#nav2 div {width:161px; height:34px; position:relative; top:-12px;}
#nav2 img {position:relative; top:-12px;}
#nav2 a {display:block; width:100%; height:100%; background-position:top;}
#nav2 a:hover {background-position:bottom;}

#content_frame {position:relative; top:-12px; margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgStretch.jpg) repeat-y;}
#content_subFrame {margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgTop.jpg) no-repeat top;}

#footer_wrap {width:100%; height:140px; background:url(images/foot_bg.png) repeat-x; position:relative; margin-top:-133px;}
#footer {min-height:121px; min-width:955px;}
#footer div {position:relative; z-index:10; padding:60px 60px 0;}
-->
</style>

</head>

<body>
<div id="wrapper" style="width:100%;">

	<div style="position:absolute; width:100%; height:33px; top:175px; background:#fff;"></div> <!-- SUB TITLE STRIPE -->

	<div id="content_wrap" style="width:955px; margin:0 auto;">
		
        <!-- SEARCH BAR -->
        <span class="float">
            
            <form style="position:absolute;">
                <a href="#"><img src="images/index_01.png" width="129" height="32" /></a>
              	<div style="width:394px; height:32px; background:#fff;">
                    <input name="search" type="text" style="margin-top:7px;" /> &nbsp; INSERT DATE CODE
                </div>
            </form>
            
            <span style="float:right;">
            	<img src="images/index_02.png" width="432" height="32" />
            </span>
            
        </span> <!-- END FLOAT -->
        <div class="clear"></div>
        <!-- END SEARCH BAR -->
        
  		<img src="images/index_03.png" width="955" height="143" /><br /> <!-- MAIN TITLE -->
        <img src="images/index_04.png" style="position:relative; left:373px;" /><br /> <!-- SUB TITLE -->
        
        <!-- REDUCED WIDTH CONTENT WRAP -->
        <div id="sub-content_wrap" style="width:936px; margin:0 auto;">
        	<span class="float">
            	<div style="background:url(images/index_MainImg.jpg); width:703px; height:321px;"></div>
                
                <span id="nav1">
                    <div><a href="#" style="background:url(images/nav_1services.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_2rates.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_3book.jpg);"></a></div>
                </span> <!-- END NAV1 -->
                
                <span id="nav2">
	                <img src="images/index_05.png" />
                    <div style="width:160px;"><a href="#" style="background:url(images/nav_4new.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_5specials.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_6about.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_7contact.jpg);"></a></div>
                    <img src="images/index_06.png" />
                </span> <!-- END NAV2 -->
                
            </span> <!-- END FLOAT -->
            <div class="clear"></div>
            
            <!-- MAIN CONTENT FRAME -->
            <div id="content_frame">
            	<div id="content_subFrame">
					<div style="padding:10px; min-height:300px;">
	                    INSERT CONTENT HERE
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT FRAME -->
            
		</div> <!-- END SUB-CONTENT_WRAP -->
        <!-- END REDUCED WIDTH CONTENT WRAP -->
        
	</div> <!-- END CONTENT_WRAP -->
    
	<div style="background:url(images/foot_bgMid.jpg); width:955px; height:121px; margin:0 auto; position:relative; top:-12px; z-index:5;"></div> <!-- BODY BASE -->
    
    <div id="footer_wrap">
        <div id="footer">
            <div style="float:left;">
            	FOOTER CONTENT GOES HERE
            </div>
            <div style="float:right;">
            	FOOTER CONTENT GOES HERE
            </div>
                        
        </div> <!-- END FOOTER -->
    </div> <!-- END FOOTER_WRAP -->
    
</div> <!-- END WRAPPER -->
</body>
</html>