How do I keep my image rollovers to stay put?

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:

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:

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:


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

You’d be better off using pure CSS sprites. Much more reliable. Here are some links:

Also, be aware that on a small screen (such as my laptop) your footer is not visible.

I couldnt get your site to load, but agree with ralph. Use use sprites for all my roll-overs, when I use them. You can also use sprites to hold all your smaller website graphics. This way the browser loads one image, instead of many.

so I read up on the sprites and thought i did everything he was talking about, but now nothing happens when i hover over the images of info, team, etc…

also, I can’t get my footer to show up under the images anymore. atleast, before this it was below them but now I can only get it to show up above the images.

here’s the code i got now

CSS:

  #skyline {
    width: 1000px; height: 104px;
    top:600px;
    background: url(images/HomeBarNeutraBlue.png);
    margin: 0px auto; padding: 0;
    position: relative;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0px;}
  #skyline li, #skyline a {
    height: 100px; display: block;}
  #panel1b {left: 0; width: 191px;}
  #panel2b {left: 191px; width: 201px;}
  #panel3b {left: 392px; width: 194px;}
  #panel4b {left: 586px; width: 183px;}
  #panel5b {left: 769px; width: 231px;}
  #panel1b a:hover {
    background: transparent url(images/infoblue.jpg)
    0 -52px no-repeat;}
  #panel2b a:hover {
    background: transparent url(images/teamblue.jpg)
    -191px -52px no-repeat;}
  #panel3b a:hover {
    background: transparent url(images/workblue.jpg)
    -392px -52px no-repeat;}
  #panel4b a:hover {
    background: transparent url(images/sitesblue.jpg)
    -586px -52px no-repeat;}
  #panel5b a:hover {
    background: transparent url(images/newsblue.jpg)
    -769px -52px no-repeat;}

HTML:

  <ul id="skyline">
	<!--<div class="info">-->
		<li id="panel1b"><a href="info.php">
			<img src="images/info.jpg" border="0" alt="infogray" name="info">
		</a></li>
	<!--</div>--><!--info-->
	
	<!--<div class="team">-->
		<li id="panel2b"><a href="team.php">
			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
		</a></li>
	<!--</div>--><!--team-->
	
	<!--<div class="work">-->
		<li id="panel3b"><a href="work.php">
			<img src="images/work.jpg" border="0" alt="workgray" name="work">
		</a></li>
	<!--</div>--><!--work-->
	
	<!--<div class="sites">-->
		<li id="panel4b"><a href="sites.php">
			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
		</a></li>
	<!--</div>--><!--sites-->
	
	<!--<div class="news">-->
		<li id="panel5b"><a href="news.php">
			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
		</a></li>
	<!--</div>--><!--news-->
</ul><!--skyline-->

Hi, you have to put all the seperate images into 1 image file and then globally on all the <li>s you are using it for, call it background:url(whtaever.jpg) and then individually, use the background-position property to move around the image :slight_smile:

so is that similar to image mapping? i know how to do that on Dreamweaver, but don’t know if I could do that and image rollovers at the same time. haven’t tried it yet.

First just combine all hte images into one file (make them all vertically stacked or horizontally, it doesn’t matter)

Then we can go from there :slight_smile:

just a quick question, am I combining the images I want to show up before hovering or during hovering? and am I just combining them into a .zip file?

p.s. I figured out what was wrong with my first code and it works perfectly. I was referring all the names to ‘info’ instead of their respective places. I need to learn that writing one set of code then copying and pasting it requires making sure you change everything. I would still like to try to do this site with sprites so I get some experience with them but will be doing my changes on the create.byu.edu/newsite/indexsprites.php site.

you need to combine all rollover states for all buttons into one neat and orderly image file. No zips. for example…

buttonOneOff
buttonOneHover
buttonOneClick

buttonTwoOff
buttonTwoHover
buttonTwoClick

if you go to the A List Apart link above, you’ll get a visaul of what you need to do. also see this link

Web vamp has a great tutorial with pictures.

just a quick question, am I combining the images I want to show up before hovering or during hovering? and am I just combining them into a .zip file?

For in the future:

http://stommepoes.nl/Kyle/menu.gif

is an example of a single menu sprite with just two states (used for normal and hover/focus). I’m not sure it really matters which state is where or which one comes first. If you put the main state on top then all your bg positions for regular state have a 0 for the “top” coord, but you could easily do it the other way around too. The example above has the hover/focus state on the top.