img rollover help

Question

jumbojs 0 Newbie Poster

15 Years Ago

Ok, let me try to explain what I am doing here. I have five buttons that are red and when rolledover display the same five images except in color. Pretty typical rollover. But when you rollover a button, not only does the image turn to color but the image underneath the button changes. This is also ok, you just add another rollover. Here's where I am having the problem. When you rollover the button, the color of the button changes, the image underneath changes and then when you click on the image underneath, the same image changes again to display another, different image and then when you move your mouse away from this last image, all the images go back to the start. I don't really know what I am doing, but I have gotten everything to work except the last part. When I move my mouse away from the last image it doesn't work. I created a function and passed it four arguments which are the images I want them changed to. Heres my code and I am open for any advice and possible a more efficient way to do the same thing.
thanks

//img is the first original red img and rolloverURL is the first color image that
//I want to change to
//over heading is the image I want the underneath img to change to first
//and overContent is the img I want the underneath img to change to last.
function addRollover(img, rolloverURL, overHeading, overContent) 
{
	var id = img;
	var contentBase = document.content.src;
	

	img = document.images[id];
	
	var baseUrl = img.src;
	
	(new Image()).src = rolloverURL;
	(new Image()).src = overHeading;
	(new Image()).src = overContent;
	
img.src = rolloverURL;
ocument.content.src = overHeading;
ocument.content.onclick = function () { ocument.content.src = overContent;}
img.onmouseout = function() { img.src = baseUrl; }
ocument.content.onmouseout = function () { ocument.content.src = baseContent;}
}

javascript

2 Contributors
1 Reply
96 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by langsor

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

langsor · Answer 1 · 2008-08-20T02:08:47+00:00

Why use JavaScript, unless I'm missing something about your objective.

Here you do not need to have the textual button-label be over the button image, it can be part of the graphic -- but you would then need to use different button graphics for each button and each button state.

<html>
<head>
<style type="text/css">
body {
  padding: 60px;
}
#btn1,
#btn2 {
  width: 52px;
  height: 12px;
  color: white;
  font-weight: bold;
  font-family: Arial;
  text-decoration: none;
  border: 1px solid indigo;
  background: url(one.gif);
}

#btn1:hover,
#btn2:hover {
  background: url(two.gif);
}

#btn1:active,
#btn2:active {
  background: url(three.gif);
}
</style>
</head>
<body>
  <a href="#" id="btn1">Button</a><br />
  <a href="#" id="btn2">Button</a>
</body>
</html>

In Firefox 3 the button graphic will reset as soon as you mouse off the link
In Explorer 7 the button graphic will reset as soon as you click anywhere else on the ducument.

Hope this helps.