PDA

Click to See Complete Forum and Search --> : onRollover show images!

tomyknoker
06-27-2003, 06:29 AM
Hi I have this code with simple rollovers...ie when you rollover the first button it goes green...but as you roll over the first button, I also want an image next to it to show and when rollout dissappear...I want to try and make this happen for all for buttons...And also when the page loads the image that turns on from the first button...must already be on...here is the code:

<HTML>
<HEAD>
<TITLE>Horses</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
<!-- Hide from older browsers

var home1 = new Image(250, 100);
home1.src = "images/home1.gif";
var home2 = new Image(250, 100);
home2.src = "images/home2.gif";

var about1 = new Image(250, 100);
about1.src = "images/about1.gif";
var about2 = new Image(250, 100);
about2.src = "images/about2.gif";

var contact1 = new Image(250, 100);
contact1.src = "images/contact1.gif";
var contact2 = new Image(250, 100);
contact2.src = "images/contact2.gif";

var location1 = new Image(250, 100);
location1.src = "images/location1.gif";
var location2 = new Image(250, 100);
location2.src = "images/location2.gif";

function change(imageName, imagesrc) {
document.images[imageName].src = imagesrc.src;
}

// Stop Hiding -->
</SCRIPT>

<BODY>
<A HREF="#" onMouseover="change('home', home2);"onMouseout="change('home', home1);"><IMG name="home" src="images/home1.gif" width="250" height="100" border="0"></A>
<BR>
<BR>
<A HREF="#" onMouseover="change('about', about2);"onMouseout="change('about', about1);"><IMG name="about" src="images/about1.gif" width="250" height="100" border="0"></A>
<BR>
<BR>
<A HREF="#" onMouseover="change('contact', contact2);"onMouseout="change('contact', contact1);"><IMG name="contact" src="images/contact1.gif" width="250" height="100" border="0"></A>
<BR>
<BR>
<A HREF="#" onMouseover="change('location', location2);"onMouseout="change('location', location1);"><IMG name="location" src="images/location1.gif" width="250" height="100" border="0"></A>
</BODY>


</HTML>
Khalid Ali
06-27-2003, 09:33 AM
you may want to look at this link

http://68.145.35.86/skills/javascripts/SimpleImageSwap.html
tomyknoker
06-27-2003, 06:53 PM
hi thats exactly what I want but instead of the text eg "links about newspapers and magazines." I want this to be an image how would I do this?
thanks again
tom
Exuro
06-27-2003, 08:58 PM
If you're looking at their code on that website Khalid posted, all you would have to do to change the text that comes up to images comming up would be to change the values of the array textArr to the <IMG> tag for your image. So here's an example:
var textArr = new Array(
"<IMG SRC='pic1.gif'>",
"<IMG SRC='pic2.gif'>",
"<IMG SRC='stuff/screenshot.jpg'>",
"<IMG SRC='../banner.jpg'>"
);
Be sure to use 's instead of "s when when you're giving the images' SRC. If you don't the script will throw a nast error...
tomyknoker
06-27-2003, 09:05 PM
but the on rollover how do I call these images?