CSS - Image Rollovers In Horizontal Nav Bars

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!

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-->

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 have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

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?

Hi all

This is my first post so first of all Hello and i hope that i can help people and be helped.

I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help

Thank You
Chaz


P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently.
Code:

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background-color:#303;
 }
#wrapper {    
    width:800px;
    height:300px;
    margin:100px auto 0;
    background-image:url(images/eyes.gif);
 }
#container {
    width:700px;
    height:300px;
    overflow:auto;
 }
#content {
    width:800px;
    height:300px;
    color:#303
 }
#content p {
    margin:0;
    padding:10px;
 }
</style>

</head>
<body>

<div id="wrapper">

<div id="container">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>

</div>

</div>

</body>
</html>

Hi, I need to lay down two images side-by-side in an absolutely positioned div, but they always have a gap between them. I am guessing there is some inherent padding in an image, much like in a <p>, but I can't get rid of it.

Qualifiers:

1. The containing DIV is absolutely positioned, but I do NOT want to absolutely position the images within. I want them to be inline, so they lay across the div horizontally.

2. As follows from above, I want the images inline, not block.

Basically, I want to control the images, I think there is padding there I cant see, I would like to know how to remove the padding.

Here is my test page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html  >
<head>
    <title>Mind the Gap</title>
</head>
<body>
    
    <p style="position: absolute; top: 250px;">Desired code style</p>
    <div id="bottomAds" style="position: absolute; left: 0px; top: 297px; background-color: orange; width: 760px; height: 90px;">
	<img id="leftImage" alt="sorry cnn" style="border-width: 0; padding: 0; margin: 0; border: none;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="adImage" style="margin: 0; padding: 0; border: none; border-width: 0; " src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
    
    <p style="position: absolute; top: 450px;">Desired Result</p>
    <div id="Div1" style="position: absolute; left: 0px; top: 497px; background-color: orange; width: 760px; height: 90px;">
	<img id="Img1" alt="sorry cnn" style="display: block; float: left;"  src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
	    <a style="border: none; margin: 0;  padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="Img2" style="border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
	</div>
	    
</body>
</html>

Thanks for looking at this, and for any tips.

CJB

I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states?

Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images.

What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it?

Here's my CSS
Code:

 #header {
        position: fixed;
        left: 0;
        width: 100%;
        height: 125px;
        top: 0;
        background-color: #ccffcc;
		background-image: url(images/topbackground2.jpg);
		}

Here's my HTML
Code:

<div id="header" >
<img src="images/spacefiller.jpg" align="left">
<a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a >
<img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; ">
</div>

The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions.

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

I am looking to make a navigation menu similar to the following:

http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html


This is the sprite image they use.

http : / / img819.imageshack.us/img819/8185/menuo.png


I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis.


I have tried for a long time to get this working but have not been able to. Please help me out.

Hello,

I'm trying to create an list menu like the one in attached image and I have 2 problems.

1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok)

2. I need to align the text on the bottom of the list like inattached image.

Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php

Anyone knows what I must do ?

10x

I would like to align left images so that they touch against each other.
Here is a capture of my problem.
dollhedz.com/test

[CODE]
<style type="text/css">

body{
background-color:#000033;
color:#00cc33;

}


#wrapper{
background-color:#000000;
margin:15px auto 0px;
width:700px;
height:800px;
}



#sitenav{
background-image:url(sitegrax/sitenavback.jpg);
background-repeat: no-repeat;
height:55px;
padding-left:213px;
border: 0px;
margin:0px;
text-align:left;
}

#one{
float:left;
text-align:left;
align:left;
margin:0px;
padding:0px;
}




</style>
</head>

<body>

<div id="wrapper">

<div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" />
</div>

<div id="sitenav" >
<div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a>
<a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a>
<a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div>
</div>

</div>

</body>
</code>

Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image.

thank you for your time