CSS - How Do I Get My Image Rollovers To Stay Put?

Using either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?:

image1 and image2 are laid out horizontally across the top of the page.

When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears.

When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves.

I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions!

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

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

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/

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.

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?

Ok here is the problem I have...
I have 3 DIVS....

DIV 1 is a container the centers the contents
DIV 2 I want to wrap tight around an image
DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left.

Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center.

here is the HTML i have...


<div id="div1" align="center">
<div id="div2">
<img alt="fddsffsd" src="image.jpg"/>
<div class='div3'></div>
</div>


and here is my CSS...

#div2 {position: relative}
.div3 {
position:absolute;
width: 80px; height: 80px;
top: 100px; left:20px;
background-image: url(transparent.png);
}

i am trying to use CSS to position an embeded .swf rotating cube so that it is always at the bottom of a webpage and is unaffected by scrolling. i've managed to make it start out at the bottom but it always scrolls up with the scroll bar.

i realize ie6 has trouble with fixed postioning, so i was wondering if anyone had any ideas on how to get around it without using javascript?

here's my page:

http://www.myspace.com/marx0i0

and here are some examples of what im trying to do:

http://bonrouge.com/test/fixed.htm
http://www.howtocreate.co.uk/fixedPosition.html

finally, here is my code:

<embed allowScriptAccess="never" allowNetworking="internal"
SRC="http://www.geocities.com/marx0i0/untitled.swf" HEIGHT=200 WIDTH=200 STYLE= "position: absolute; center:0px; bottom: 0px; overflow: auto;" WMODE= "transparent">

thanks very much for any help!

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

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

delete

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.

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

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?

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>