-
Mouseover - Mouseout HELP!
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?
-
-
Good kharma for ubh! This will help!
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> </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>
-
-
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".
Last edited by ubh; 08-30-2005 at 05:46 PM.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Reply With Quote
Bookmarks