Jump to content

OnMouseOver


King_Karlssen
 Share

Recommended Posts

I'm trying to figure out how to make a new image appear when i have the mouse over a certain image. Heres the code:<html><head><title>Javascript#8</title><script type="Text/Javascript">lanyardCruzer=new Image;lanyardCruzer.src="Pictures/lanyardcruzer.jpg";miniCruzer=new Image;miniCruzer.src="Pictures/cruzermini.jpg"; </script></head><body> <a href="JCarlsenjava7.html", onMouseOver= "document.lanyardcruzer.src=lanyardcruzer.jpg, status= 'Sandisk is the brand of Flash Drive I use.', return true;",onMouseOut= "status= 'The last link you had the mouse over was a link to a Sandisk picture', return false;"><img src="Pictures/cruzermini.jpg", height="75", width="140", border="2", alt="Sandisk is the brand of Flash Drive I use"></img></a> </body></html> Anyone know what to do? My instructor tries but hasn't taught this class in ten years and forgot almost everything.

Link to comment
Share on other sites

<html><head><title>Image Swapping</title><script type="Text/Javascript">function swapImg(img){	var img1 = new Image();	var img2 = new Image();	img1.src="icon_one.jpg";	img2.src="icon_two.jpg";	if(img.src == img1.src)  img.src = img2.src;	else  img.src = img1.src;}</script></head><body><a href="somePage.html"><img src="icon_one.jpg" onMouseOver="swapImg(this)" onMouseOut="swapImg(this)" border="0"/></a></body></html>

Link to comment
Share on other sites

Here's a simple sight that has a simple script that should help you along after to read this to understand the concept:http:///www.deepcreeklakebreezmotel.com

  • navigation on left is javascript rollover menu
  • for each menu item, there are two images - an on and an off image - these are all stored in a "rollover" folder - not your images folder
  • the wbe page calls a javascript file called "rollover.js" which has two components. The first simply take one image and replaces it with another. The second is the list of images it uses to do the replacements.
  • now, the web page itself has the images defined and in each image there is a name attribute that tells the javascript which image in its list belongs to which rollover effect.
  • now that the javascript is defined with your images and your images are labeled to be associated with the script, your anchor tags just need help
  • in your anchor tag that you wrap around each image, you'll add onmouseover and onmouseout attributes as you have already figuired out. For this script, you use the function SwitchImage and then tell the script whihc image to use and which on to replace it with.

So, view the source of the page I gave you. Then check out the javascript used as well.You should be able to peice everything to gether there.Good luck.

Link to comment
Share on other sites

Well I though I had it working but gonna need some more help.... here is some code that worked for me:

<html>	<head>  <title>Javascript#8</title>  <body bgcolor="cyan">  <script type="Text/Javascript">        lanyardcruzer=new Image;    lanyardcruzer.src="Pictures/lanyardcruzer.jpg";    cruzermini=new Image;    cruzermini.src="Pictures/cruzermini.jpg";  	      </script>	</head>	<body>  <center><table border="0", width="75%", height="30%", bgcolor="cyan"></center>    <tr>  <td><a href="http://www.kingkarlssen.net", onMouseOver= "status= 'This is my personal website'; return true;"  	onMouseOut= "status= 'The last link you had the mouse over was a link to my homepage'; return false;"> King Karlssen Homepage</a></td>  <td><a href="JCarlsenjava7.html", onMouseOver= "document.flash.src=lanyardcruzer.src, status= 'Sandisk is the brand of flash drive I use.'; return true;",  	onMouseOut= "document.flash.src=cruzermini.src, status= 'That last goes to one of my assignments.'; return false;">  	<img src="Pictures/cruzermini.jpg", name="flash", height="75", width="140", border="2", alt="Sandisk is the brand of Flash Drive I use"></img>  	</a></td>  <td><a href="http://www.zone.msn.com", onMouseOver= "status= 'This is where I play online games.'; return true;"  	onMouseOut= "status= 'That last link goes to the zone.'; return false;">MSN Gaming Zone</a></td>       </tr></table>    <script type="Text/Javascript">    </script>	</body><HR>	<address><center><b>©J Carlsen, 2005</center></b></address></html>

And and look for the code I added and now none of the mouse over image changes work:

<html>	<head>  <title>Javascript#8</title>  <body bgcolor="cyan">  <script type="Text/Javascript">        lanyardcruzer=new Image;    lanyardcruzer.src="Pictures/lanyardcruzer.jpg";    cruzermini=new Image;    cruzermini.src="Pictures/cruzermini.jpg";  	    zone=new Image;    zone.src="Pictures/zone.jpg";    Age-of-Empires=new Image;    Age-of-Empires.src="Pictures/Age-of-Empires.jpg";  </script>	</head>	<body>  <center><table border="0", width="75%", height="30%", bgcolor="cyan"></center>    <tr>  <td><a href="http://www.kingkarlssen.net", onMouseOver= "status= 'This is my personal website'; return true;"  	onMouseOut= "status= 'The last link you had the mouse over was a link to my homepage'; return false;"> King Karlssen Homepage</a></td>  <td><a href="JCarlsenjava7.html", onMouseOver= "document.flash.src=lanyardcruzer.src, status= 'Sandisk is the brand of flash drive I use.'; return true;",  	onMouseOut= "document.flash.src=cruzermini.src, status= 'That last goes to one of my assignments.'; return false;">  	<img src="Pictures/cruzermini.jpg", name="flash", height="75", width="140", border="2", alt="Sandisk is the brand of Flash Drive I use"></img>  	</a></td>  <td><a href="http://www.zone.msn.com", onMouseOver= "status= 'This is where I play online games.'; return true;"  	onMouseOut= "status= 'That last link goes to the zone.'; return false;">MSN Gaming Zone</a></td>   <td><a href="JCarlsenjava3.html", onMouseOver= "document.game.src=zone.src, return true;",  	onMouseOut= "document.game.src=Age-of-Empires.src, return false;">  	<img src="Pictures/zone.jpg", width="97", height="76", border="2", name="game"></img>  	</a></td>    </tr></table>    <script type="Text/Javascript">    </script>	</body><HR>	<address><center><b>©J Carlsen, 2005</center></b></address></html>

I do realize that I need to put all the pictures memory loads (in the head script) Into some kind of function and call them in the OnMouseOver, I want to keep the status bar text change, do i need the document.blah.src=blahblah stuff? How can I make the pictures in the head script into 2 separate functions an call them in the onMouseOver? And do I need to call them again or close them in the OnMouseOff?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...