I can't get a simple image rollover to work. I have tried it 2 different ways, one with functions, and one by typing it all out.
What is the problem with these scripts - (rollover link buttons) they produce the initial image, but when mouseOver, that original image disappears and only an outline of the image space is left. Original image never returns unless page is refreshed. I have copied these scripts directly from some of my books, substituting my images, and Yes, the image names are spelled correctly and the source to directory is correct. The examples I copied did not use 'return true'.
Script version 1:
<A HREF="imagineabout.htm"
onMouseOver="document.pic1.src='E:\Portfolio\imagineaboutOn.gif'"
onMouseOut="document.pic1.src='E:\Portfolio\imagineabout.gif'">
<IMG SRC="E:\Portfolio\imagineabout.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="About" BORDER="0" NAME="pic1"></A>
<A HREF="imaginelisting.htm"
onMouseOver="document.pic2.src='E:\Portfolio\imaginelistingsOn.gif'"
onMouseOut="document.pic2.src='E:\Portfolio\imaginelistings.gif'">
<IMG SRC="E:\Portfolio\imaginelistings.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Listings" BORDER="0" NAME="pic2"></A>
<A HREF="imaginecontact.htm"
onMouseOver="document.pic3.src='E:\Portfolio\imaginecontactOn.gif'"
onMouseOut="document.pic3.src='E:\Portfolio\imaginecontact.gif'">
<IMG SRC="E:\Portfolio\imaginecontact.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Contact" BORDER="0" NAME="pic3"></A>
Images were preloaded in <head> with this:
<SCRIPT language="javascript">
pic1 = new Image(165,65)
pic1.src = "E:\Portfolio\imagineaboutOn.gif"
pic2 = new Image(165,65)
pic1.src = "E:\Portfolio\imaginelistingsOn.gif"
pic3 = new Image(165,65)
pic3.src = "E:\Portfolio\imaginecontactOn.gif"
</Script>
Script Version 2 - with functions:
In <head>:
<SCRIPT language="javascript">
<!-- **begin button rollover script**
function hiLiteOn(imgName) {
if (document.images) {
hiLiteImage = eval(imgName + "On.src")
document [imgName].src = hiLiteImage
}
}
function hiLiteOff(imgName) {
if (document.images) {
originalImage = eval(imgName + "Off.src")
document [imgName].src = originalImage
}
}
if(document.images) {
//pre-load images
aboutOn = new Image()
aboutOn.src = "E:\Portfolio\imagineaboutOn.gif"
aboutOff = new Image()
aboutOff.src = "E:\Portfolio\imagineabout.gif"
listingsOn = new Image()
listingsOn.src = "E:\Portfolio\imaginelistingsOn.gif"
listingsOff = new Image()
listingsOff.src = "E:\Portfolio\imaginelistings.gif"
contactOn = new Image()
contactOn.src = "E:\Portfolio\imaginecontactOn.gif"
contactOff = new Image()
contactOff.src = "E:\Portfolio\imaginecontact.gif"
}
//-->
</SCRIPT>
in <body>:
<TD width=165 valign=top align=left>
<A HREF="imagineabout.htm"
onmouseover="hiLiteOn('about')"
onmouseout="hiLiteOff('about')">
<IMG SRC="E:\Portfolio\imagineabout.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="About" BORDER="0" NAME="about"></A>
<A HREF="imaginelisting.htm"
onmouseover="hiLiteOn('listings')"
onmouseout="hiLiteOff('listings')">
<IMG SRC="E:\Portfolio\imaginelistings.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Listings" BORDER="0" NAME="listings"></A>
<A HREF="imaginecontact.htm"
onmouseover="hiLiteOn('contact')"
onmouseout="hiLiteOff('contact')">
<IMG SRC="E:\Portfolio\imaginecontact.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Contact" BORDER="0" NAME="contact"></A>
</td>
They do all 3 rollovers sit in One table cell, so that shouldn't affect them. It has to be something obvious, because I copied these scripts out of books, and only - carefully - changed the images to mine.
Any help is greatly appreciated.
What is the problem with these scripts - (rollover link buttons) they produce the initial image, but when mouseOver, that original image disappears and only an outline of the image space is left. Original image never returns unless page is refreshed. I have copied these scripts directly from some of my books, substituting my images, and Yes, the image names are spelled correctly and the source to directory is correct. The examples I copied did not use 'return true'.
Script version 1:
<A HREF="imagineabout.htm"
onMouseOver="document.pic1.src='E:\Portfolio\imagineaboutOn.gif'"
onMouseOut="document.pic1.src='E:\Portfolio\imagineabout.gif'">
<IMG SRC="E:\Portfolio\imagineabout.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="About" BORDER="0" NAME="pic1"></A>
<A HREF="imaginelisting.htm"
onMouseOver="document.pic2.src='E:\Portfolio\imaginelistingsOn.gif'"
onMouseOut="document.pic2.src='E:\Portfolio\imaginelistings.gif'">
<IMG SRC="E:\Portfolio\imaginelistings.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Listings" BORDER="0" NAME="pic2"></A>
<A HREF="imaginecontact.htm"
onMouseOver="document.pic3.src='E:\Portfolio\imaginecontactOn.gif'"
onMouseOut="document.pic3.src='E:\Portfolio\imaginecontact.gif'">
<IMG SRC="E:\Portfolio\imaginecontact.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Contact" BORDER="0" NAME="pic3"></A>
Images were preloaded in <head> with this:
<SCRIPT language="javascript">
pic1 = new Image(165,65)
pic1.src = "E:\Portfolio\imagineaboutOn.gif"
pic2 = new Image(165,65)
pic1.src = "E:\Portfolio\imaginelistingsOn.gif"
pic3 = new Image(165,65)
pic3.src = "E:\Portfolio\imaginecontactOn.gif"
</Script>
Script Version 2 - with functions:
In <head>:
<SCRIPT language="javascript">
<!-- **begin button rollover script**
function hiLiteOn(imgName) {
if (document.images) {
hiLiteImage = eval(imgName + "On.src")
document [imgName].src = hiLiteImage
}
}
function hiLiteOff(imgName) {
if (document.images) {
originalImage = eval(imgName + "Off.src")
document [imgName].src = originalImage
}
}
if(document.images) {
//pre-load images
aboutOn = new Image()
aboutOn.src = "E:\Portfolio\imagineaboutOn.gif"
aboutOff = new Image()
aboutOff.src = "E:\Portfolio\imagineabout.gif"
listingsOn = new Image()
listingsOn.src = "E:\Portfolio\imaginelistingsOn.gif"
listingsOff = new Image()
listingsOff.src = "E:\Portfolio\imaginelistings.gif"
contactOn = new Image()
contactOn.src = "E:\Portfolio\imaginecontactOn.gif"
contactOff = new Image()
contactOff.src = "E:\Portfolio\imaginecontact.gif"
}
//-->
</SCRIPT>
in <body>:
<TD width=165 valign=top align=left>
<A HREF="imagineabout.htm"
onmouseover="hiLiteOn('about')"
onmouseout="hiLiteOff('about')">
<IMG SRC="E:\Portfolio\imagineabout.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="About" BORDER="0" NAME="about"></A>
<A HREF="imaginelisting.htm"
onmouseover="hiLiteOn('listings')"
onmouseout="hiLiteOff('listings')">
<IMG SRC="E:\Portfolio\imaginelistings.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Listings" BORDER="0" NAME="listings"></A>
<A HREF="imaginecontact.htm"
onmouseover="hiLiteOn('contact')"
onmouseout="hiLiteOff('contact')">
<IMG SRC="E:\Portfolio\imaginecontact.gif" WIDTH="165" HEIGHT="65" ALIGN="BOTTOM" ALT="Contact" BORDER="0" NAME="contact"></A>
</td>
They do all 3 rollovers sit in One table cell, so that shouldn't affect them. It has to be something obvious, because I copied these scripts out of books, and only - carefully - changed the images to mine.
Any help is greatly appreciated.
Facebook
Twitter