CSS - Image List With 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

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

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

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 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 have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian

I cant seem to get this to position correctly in firefox. Looks great in IE though...

Perhaps I should just use divs with margins rather than ul's

Can someone explain why the first example here does not work while the second does? Thanks.

.top_anchor_links li {
list-style-image: url(../img/li_star_white_bg.gif);
}

li.top_anchor_links
{
list-style-image: url(../img/li_star_white_bg.gif);
}

<ul>
<li class="top_anchor_links">list 1</li>
<li class="top_anchor_links">list 2</li>
<li class="top_anchor_links">list 3</li>
<li class="top_anchor_links">list 4</li>
</ul>

Hi,

I have an inline menu list.
I want the background to be the image, with the text in the html list. However I cant seem to do this.

http://img185.imageshack.us/my.php?image=linkfd4.png

I tried using:
Code:

#leftnav li 
{
display:inline;
background-image:url(images/menu.png);
}

But the width of the list item is just the width of the text.
It doesn't show the ull background image.

I hope someone can help.

Thanks in advance.

Hello,

I have the ff: style
Code:

.most_popular_content { background-color:#cdd6ea; }
ol       { margin:0px 10px 0px 20px; padding:0px 0px 0px 9px; }
li       { list-style-image:url(raquo.gif); padding-bottom:10px; padding-left:2px; padding-top:10px; }

and have this html
Code:

<div class="most_popular_content">
      <ol>
       <li>sdfsdf</li>
       <li>sdfsdf</li>
       <li>sdfsdf</li>
       <li>sdfsd</li>
      </ol>
     </div>

Now my problem is in IE. The above code will correclt display in Mozilla and even on the dreamweaver design. On IE the list-style image is displayed on top of the text, it's something that my text is align in bottom while the image is on top. On Mozilla everything works fine since the image and texts are all align.

Please help!

I can not figure out how to remove the padding and margin around the triangle image so it is not indented, I would also like it if the gap between the image and the text was smaller.

Can anyone suggest what I change or add to my code to do this.

I am also wanting to know how I get the triangle to be part of the link, so clicking the triangle or thetext will open the sub menu.

Code:

<!DOCTYPE HTML>
<html><head><title>working submenus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
ul.catMenuItem { margin: 0px auto; list-style-type: none; /*margin-left: -25px;*/
	background: url("triangle_right.png") no-repeat 0px 5px transparent; /*adjust 2px & 5px until it looks correct */
	display: block;
	padding: 0px 4px 0px 15px; /*adjust until you have enough left padding to account for your bullet */
	/* list-style-image: url('triangle_right.png'); */
}
/*	list-style-image:url('triangle_down.png');  */

ul.catMenuItem li a { text-decoration: none; padding: 0; margin: 0; }
ul.catMenuItem li.catSubMenu { display: none; padding-left: 30px; margin: 0; }

--></style>

<script type='text/javascript'><!--
    var prevCat;

    function menu(newCat) {
        if (prevCat) prevCat.style.display = 'none';
        newCat.style.display = 'block';
        prevCat = newCat;
    }

    onload = function() {
        var menus = document.getElementsByTagName('ul');
        for (var a=0,x=menus.length; a<x; a++) {
            if (menus[a].className === 'catMenuItem') {
                menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
                    menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
                }
                menus[a].getElementsByTagName('li')[1].style.display = 'none';
            }
        }
    } 
--></script>
</head><body>

    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 1</a></li>
			<li class="catSubMenu">
			Content 1.1<br>
			Content 1.2<br>
			<br>
			</li>
    </ul>
     
    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 2</a></li>
        	<li class="catSubMenu">
			Content 2.1<br>
			Content 2.2<br>
			<br>
			</li>
    </ul>
     
    <ul class="catMenuItem">
        <li class="catMenuTitle"><a href="#">Menu 3</a></li>
        	<li class="catSubMenu">
			Content 3.1<br>
			Content 3.2<br>
			<br>
			</li>
    </ul> 

</body></html>

Can't see that this has been addressed before, but I am having a problem with using images as bullets in a ul list. The text is aligned to the bottom of the image, such that the image looks too high up. Is there a way to sort this out?

Also, while we're on the subject, the left margins of the list are completely different in IE and firefox, with IE putting a much larger margin to the left of the bullet, and less of a margin between the bullet and the list item. Is there a way to sort this out, or make the stylesheet browser-specific? (OK i'm really showing my stylesheet ignorance here!!)

Code snippet is posted below. Cheers.

from stylesheet:
.bulletList li

{
margin-bottom: 1.5em;

padding-left: 0.75em;
list-style-image:url(../images/hsdmini.jpg);
color: #547A98;

}

from page:

<table width="100%" >
<tr>
<td align="left">
<ul class="bulletList"><strong>
<li>Credit cards accepted</li>
<li>Cheques accepted</li>
<li>Delivery to europe</li>
<li>40,000 products in store!</li>
</strong>
</ul>
</td>
</tr>
</table>

Hi:

I need a simple code for displaying two things side by side.

I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables.

I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out.

Can someone please help.

Thanks.

Is it possible to adjust the alignment of list-style-image's?

In IE, the image ends up being too high, but it's centered properly in Firefox.

Example:
URL