Jump to content

Onmouseover and onmouseout not working???

Skipjackrick

By Skipjackrick
in Javascript Help

 Share

Recommended Posts

Skipjackrick Regular Member

Skipjackrick

Posted
Posted

Can anybody tell me why my onmouseover etc is not working?

 

Here is the page.  (Working with CSS to get layout correct...ignore alignment issues..LOL)

http://www.extremecoast.com/KW09/layoutdoc2.php

 

A short section of code where I believe the problem is.

<script type="text/javascript">
image1 = new Image();image1.src = "http://extremecoast.com/layout/v2/menu1on.jpg";
image2 = new Image();image2.src = "http://extremecoast.com/layout/v2/menu2on.jpg";
image3 = new Image();image3.src = "http://extremecoast.com/layout/v2/menu3on.jpg";
image4 = new Image();image4.src = "http://extremecoast.com/layout/v2/menu4on.jpg";
image5 = new Image();image5.src = "http://extremecoast.com/layout/v2/menu5on.jpg";
image6 = new Image();image6.src = "http://extremecoast.com/layout/v2/menu6on.jpg";
image7 = new Image();image7.src = "http://extremecoast.com/layout/v2/menu7on.jpg";
image8 = new Image();image8.src = "http://extremecoast.com/layout/v2/2menu1on.jpg";
image9 = new Image();image9.src = "http://extremecoast.com/layout/v2/2menu2on.jpg";
image10 = new Image();image10.src = "http://extremecoast.com/layout/v2/2menu3on.jpg";
image11 = new Image();image11.src = "http://extremecoast.com/layout/v2/2menu4on.jpg";
image12 = new Image();image12.src = "http://extremecoast.com/layout/v2/2menu5on.jpg";
image13 = new Image();image13.src = "http://extremecoast.com/layout/v2/2menu6on.jpg";
image14 = new Image();image14.src = "http://extremecoast.com/layout/v2/2menu7on.jpg";
</script>
<script src="http://www.extremecoast.com/KW09/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<a href="http://extremecoast.com"><img src="http://www.extremecoast.com/layout/v2/ecpp.png" border="0" align="middle" alt=""  /></a>
<table border="2" cellspacing="0" cellpadding="0" align="center" width="765" bgcolor="#000000" >
<tr>
    	<td><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','765','height','200','pluginspage','http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash','src','http://extremecoast.com/layout/v2/kayakwars09banner','wmode','transparent','allowscriptaccess','always','movie','http://www.extremecoast.com/layout/v2/kayakwars09banner','bgcolor','#000000','quality','high' ); //end AC code
</script>
<br />
	<a 		href="http://extremecoast.com" 
        		onmouseover="image1.src='http://extremecoast.com/layout/v2/menu1on.jpg';"
			onmouseout="image1.src='http://extremecoast.com/layout/v2/menu1off.jpg';">
        	<img name="image1" src="http://extremecoast.com/layout/v2/menu1off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/reports/reports.php" 
        		onmouseover="image2.src='http://extremecoast.com/layout/v2/menu2on.jpg';" 
            	onmouseout="image2.src='http://extremecoast.com/layout/v2/menu2off.jpg';">
        	<img name="image2" src="http://extremecoast.com/layout/v2/menu2off.jpg" border="0" alt="" />
	</a>
        <a 		href="http://extremecoast.com/Kayak_Wars/index.php" 
        		onmouseover="image3.src='http://extremecoast.com/layout/v2/menu3on.jpg';" 
                onmouseout="image3.src='http://extremecoast.com/layout/v2/menu3onon.jpg';">
         	<img name="image3" src="http://extremecoast.com/layout/v2/menu3onon.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/phpBB3/index.php" 
        		onmouseover="image4.src='http://extremecoast.com/layout/v2/menu4on.jpg';" 
                onmouseout="image4.src='http://extremecoast.com/layout/v2/menu4off.jpg';">
         	<img name="image4" src="http://extremecoast.com/layout/v2/menu4off.jpg" border="0" alt="" />
      	</a>
        <a 		href="http://extremecoast.com/multimedia/multimedia.php" 
        		onmouseover="image5.src='http://extremecoast.com/layout/v2/menu5on.jpg';" 
                onmouseout="image5.src='http://extremecoast.com/layout/v2/menu5off.jpg';">
          	<img name="image5" src="http://extremecoast.com/layout/v2/menu5off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/contest.php" 
        		onmouseover="image6.src='http://extremecoast.com/layout/v2/menu6on.jpg';" 
                onmouseout="image6.src='http://extremecoast.com/layout/v2/menu6off.jpg';">
            <img name="image6" src="http://extremecoast.com/layout/v2/menu6off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/contact.php" 
        		onmouseover="image7.src='http://extremecoast.com/layout/v2/menu7on.jpg';" 
                onmouseout="image7.src='http://extremecoast.com/layout/v2/menu7off.jpg';">
            <img name="image7" src="http://extremecoast.com/layout/v2/menu7off.jpg" border="0" alt="" />
        </a>
<br />

Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

Can anybody tell me why my onmouseover etc is not working?

 

Here is the page.  (Working with CSS to get layout correct...ignore alignment issues..LOL)

http://www.extremecoast.com/KW09/layoutdoc2.php

 

A short section of code where I believe the problem is.

<script type="text/javascript">
image1 = new Image();image1.src = "http://extremecoast.com/layout/v2/menu1on.jpg";
image2 = new Image();image2.src = "http://extremecoast.com/layout/v2/menu2on.jpg";
image3 = new Image();image3.src = "http://extremecoast.com/layout/v2/menu3on.jpg";
image4 = new Image();image4.src = "http://extremecoast.com/layout/v2/menu4on.jpg";
image5 = new Image();image5.src = "http://extremecoast.com/layout/v2/menu5on.jpg";
image6 = new Image();image6.src = "http://extremecoast.com/layout/v2/menu6on.jpg";
image7 = new Image();image7.src = "http://extremecoast.com/layout/v2/menu7on.jpg";
image8 = new Image();image8.src = "http://extremecoast.com/layout/v2/2menu1on.jpg";
image9 = new Image();image9.src = "http://extremecoast.com/layout/v2/2menu2on.jpg";
image10 = new Image();image10.src = "http://extremecoast.com/layout/v2/2menu3on.jpg";
image11 = new Image();image11.src = "http://extremecoast.com/layout/v2/2menu4on.jpg";
image12 = new Image();image12.src = "http://extremecoast.com/layout/v2/2menu5on.jpg";
image13 = new Image();image13.src = "http://extremecoast.com/layout/v2/2menu6on.jpg";
image14 = new Image();image14.src = "http://extremecoast.com/layout/v2/2menu7on.jpg";
</script>
<script src="http://www.extremecoast.com/KW09/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<a href="http://extremecoast.com"><img src="http://www.extremecoast.com/layout/v2/ecpp.png" border="0" align="middle" alt=""  /></a>
<table border="2" cellspacing="0" cellpadding="0" align="center" width="765" bgcolor="#000000" >
<tr>
    	<td><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','765','height','200','pluginspage','http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash','src','http://extremecoast.com/layout/v2/kayakwars09banner','wmode','transparent','allowscriptaccess','always','movie','http://www.extremecoast.com/layout/v2/kayakwars09banner','bgcolor','#000000','quality','high' ); //end AC code
</script>
<br />
	<a 		href="http://extremecoast.com" 
        		onmouseover="image1.src='http://extremecoast.com/layout/v2/menu1on.jpg';"
			onmouseout="image1.src='http://extremecoast.com/layout/v2/menu1off.jpg';">
        	<img name="image1" src="http://extremecoast.com/layout/v2/menu1off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/reports/reports.php" 
        		onmouseover="image2.src='http://extremecoast.com/layout/v2/menu2on.jpg';" 
            	onmouseout="image2.src='http://extremecoast.com/layout/v2/menu2off.jpg';">
        	<img name="image2" src="http://extremecoast.com/layout/v2/menu2off.jpg" border="0" alt="" />
	</a>
        <a 		href="http://extremecoast.com/Kayak_Wars/index.php" 
        		onmouseover="image3.src='http://extremecoast.com/layout/v2/menu3on.jpg';" 
                onmouseout="image3.src='http://extremecoast.com/layout/v2/menu3onon.jpg';">
         	<img name="image3" src="http://extremecoast.com/layout/v2/menu3onon.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/phpBB3/index.php" 
        		onmouseover="image4.src='http://extremecoast.com/layout/v2/menu4on.jpg';" 
                onmouseout="image4.src='http://extremecoast.com/layout/v2/menu4off.jpg';">
         	<img name="image4" src="http://extremecoast.com/layout/v2/menu4off.jpg" border="0" alt="" />
      	</a>
        <a 		href="http://extremecoast.com/multimedia/multimedia.php" 
        		onmouseover="image5.src='http://extremecoast.com/layout/v2/menu5on.jpg';" 
                onmouseout="image5.src='http://extremecoast.com/layout/v2/menu5off.jpg';">
          	<img name="image5" src="http://extremecoast.com/layout/v2/menu5off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/contest.php" 
        		onmouseover="image6.src='http://extremecoast.com/layout/v2/menu6on.jpg';" 
                onmouseout="image6.src='http://extremecoast.com/layout/v2/menu6off.jpg';">
            <img name="image6" src="http://extremecoast.com/layout/v2/menu6off.jpg" border="0" alt="" />
        </a>
        <a 		href="http://extremecoast.com/contact.php" 
        		onmouseover="image7.src='http://extremecoast.com/layout/v2/menu7on.jpg';" 
                onmouseout="image7.src='http://extremecoast.com/layout/v2/menu7off.jpg';">
            <img name="image7" src="http://extremecoast.com/layout/v2/menu7off.jpg" border="0" alt="" />
        </a>
<br />

 

Your JavaScript created images and the images within your HTML are not the same thing.

 

Look at your code.  You explicitly create new images within your JavaScript.  These images, despite having a source, aren't displayed.  Instead, you recreate them within your HTML.  Your JavaScript most likely is swapping the values of the src attribute.  The problem is that it's doing it to the wrong images.

 

Instead, you should do something like:

<script type="text/javascript">
   window.onload = function() //<-- ensures that the script won't run until the entire HTML document is made
   {
      var image1 = document.images["image1"]; //<-- don't need to specify the src...simply use the one originally given in the HTML
      var image2 = document.images["image2"];

      /* ... */
   }
</script>

 

Another solution is to forget using JavaScript for rollovers and simply use CSS.  You can tie image movement to CSS' a:hover pseudo-element.  For more info, do a google search for CSS rollovers.

Link to comment
Share on other sites
bibby Newbie

bibby

Posted
Posted

When using inline javascript with images, as well as with other elements, the keyword this can be used.

 

<img src="some.jpg" onmouseover="this.src='someother.jpg'" onmouseout="this.src='some.jpg'" />

 

I much rather prefer to teach the images how to rollover themselves. If you continue the naming convention 'menu#on.jpg' and '2menu#on.jpg', you could use something like this:

 

// anonymous function leaves no mess, 
// just run it AFTER the images are created
(function()
{
//gather all images
var img,imgs=document.getElementsByTagName('img');
for(var i=0; i< imgs.length; i++)
{
	img=imgs[i];

	// use only those that match menu#on.jpg
	if(img.src.match(/menu\don\.jpg/)==null)
		continue;

	// assign the alternate source as a member var
	img.over_img = (function()
	{
		var parts = img.src.split(/\//).reverse();
		parts[0]="2"+parts[0];
		return parts.reverse().join('/');
	})();

	// retain the original src
	img.orig_img = img.src;

	// use the alternate on hover
	img.onmouseover = function()
	{
		this.src = this.over_img;
	}

	// return to normal when out
	img.onmouseout = function()
	{
		this.src = this.orig_img;
	}
}
})();

Link to comment
Share on other sites
Skipjackrick Regular Member

Skipjackrick

Posted
  • Author
Posted

Thanks for the help!!

 

When using inline javascript with images, as well as with other elements, the keyword this can be used.

 

<img src="some.jpg" onmouseover="this.src='someother.jpg'" onmouseout="this.src='some.jpg'" />

 

I much rather prefer to teach the images how to rollover themselves. If you continue the naming convention 'menu#on.jpg' and '2menu#on.jpg', you could use something like this:

 

// anonymous function leaves no mess, 
// just run it AFTER the images are created
(function()
{
//gather all images
var img,imgs=document.getElementsByTagName('img');
for(var i=0; i< imgs.length; i++)
{
	img=imgs[i];

	// use only those that match menu#on.jpg
	if(img.src.match(/menu\don\.jpg/)==null)
		continue;

	// assign the alternate source as a member var
	img.over_img = (function()
	{
		var parts = img.src.split(/\//).reverse();
		parts[0]="2"+parts[0];
		return parts.reverse().join('/');
	})();

	// retain the original src
	img.orig_img = img.src;

	// use the alternate on hover
	img.onmouseover = function()
	{
		this.src = this.over_img;
	}

	// return to normal when out
	img.onmouseout = function()
	{
		this.src = this.orig_img;
	}
}
})();

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.