Log in

View Full Version : Mouseover - Mouseout HELP!


ubh
08-29-2005, 07:59 PM
Ok I need to have a nav bar with all 5 links to have a Mouseover/Mouseout script that changes my sites main logo.

So if someone moves over our about link, it changes the site logo to an about site logo, and back to the default logo when I move off the about link.

Here is the tutorial I am fallowing.
http://www.sitebuildingtools.com/magicbuttons.html

And here is the code I tested with.

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript"><!--

// preload images:
if (document.images) {
clickme1 = new Image(75,22); clickme1.src = "clickme1.gif";
clickme2 = new Image(75,22); clickme2.src = "clickme2.gif";
}

function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="another.html"
onMouseOver="hiLite('img01','clickme2')"
onMouseOut="hiLite('img01','clickme1')"><IMG SRC="clickme1.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT="" NAME="img01"></A>

</BODY>
</HTML>

When I use this tutorials example clickme images it all works fine with my (HTML/Images located on my desktop)

But soon as I copy over the Images I want to work with to my desktop and change the code accordingly I get nothing but script errors.

Here is my changed code

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript"><!--

// preload images:
if (document.images) {
clickme1 = new Image(75,22); TesterLogo0.src = "TesterLogo0.gif";
clickme2 = new Image(75,22); TesterLogo1.src = "TesterLogo1.gif";
}

function hiLite(imgName,imgObjName) {
if (document.images) {
document.images[imgName].src = eval(imgObjName + ".src");
}}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="another.html"
onMouseOver="hiLite('img01','TesterLogo1')"
onMouseOut="hiLite('img01','TesterLogo0')"><IMG SRC="TesterLogo0.gif" WIDTH="75" HEIGHT="22" BORDER="0" ALT=""

NAME="img01"></A>

</BODY>
</HTML>

Why is this happening, and is anyone else haveing this problem?
themind
08-29-2005, 10:31 PM
Life has funny ways of working. It took me a month to find and tailor an image swapping script to do just what you are talking about. So since nobody would help me, I'll help you! If you are wanting your site to do what my resume page does: www.pdmdigital.com/danefosterresume.htm., then you are in luck. Use the following script and mind the comments I put in.

The problem areas I ran into were: not exactly matching the img name to the script function, and not having the correct img src paths. You will also notice that for the second link there is no onMouseOut command. This simply leaves the image as the last one that was moused over. I truly hope this helps, TM.


// JavaScript Document

/* This is an image swapping JavaScript. The purpose of this script is
to change an initial image to any number of other images by MOUSING
OVER any number of links. Good Luck, theMind-
*/

<script>
<!--

//IMAGE PRELOADS BELOW
pic1 = new Image();
pic1.src = "picture1.jpg";

pic2 = new Image();
pic2.src = "picture2.jpg";

pic3 = new Image();
pic3.src = "picture3.jpg";
//END IMAGE PRELOADS

//BEGIN ARRAY DEFINITION
var picList= new Array()
picList[0]= "picture1.jpg"
picList[1]= "picture2.jpg";
picList[2]= "picture3.jpg"
//END ARRAY DEFINITION

//BEGIN FUNCTION DEFINITION
function swapImage(img)
{document.images.holder.src = picList[img];
}
//END FUNCTION DEFINITION

//-->
</script>

</head>

//BEGIN BODY OF HTML DOCUMENT

<body>
/*THE NUMBER IN THE PARENTHESIS PORTION OF THE EVENT HANDLER WILL CORRESPOND
TO THE PICTURE NUMBER IN THE ABOVE ARRAY*/

<p><a href="#" onMouseOver="swapImage(1)" onMouseOut="swapImage(0)">link1</a></p>
<p><a href="#" onMouseOver="swapImage(2)">link2</a></p>

<p>&nbsp;</p>

/*THE INITIAL IMAGE MUST BE A LINK AND IT'S NAME MUST APPEAR EXACTLY AS IT DOES
IN THE DOCUMENT.IMAGES."PUT HERE" .SRC PORTION OF THE SWAPIMAGE FUNCTION. IN THIS CASE,
"holder" and "holder" */

<a href="#"><img src="picture1.jpg" name="holder" border="0"></a>
</body>
ubh
08-29-2005, 10:42 PM
Never Mind... themind ;) I got it
THANK YOU SO MUCH!

It was the stupid fact that I kept thinking I needed to name="" the desierd picture to something other than what the script function was looking for "holder".