King_Karlssen Posted January 10, 2006 Share Posted January 10, 2006 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 More sharing options...
aspnetguy Posted January 10, 2006 Share Posted January 10, 2006 <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 More sharing options...
King_Karlssen Posted January 10, 2006 Author Share Posted January 10, 2006 So when you have the function then (this) do you actually put (this) or the name of the picture, I'm still confused and can't get it to work Link to comment Share on other sites More sharing options...
pulpfiction Posted January 10, 2006 Share Posted January 10, 2006 Hi king,the function must stay as "this", swapImg(this). Just change these in the function.img1.src="icon_one.jpg"; // to image1 src img2.src="icon_two.jpg"; // to image2 src Link to comment Share on other sites More sharing options...
Skemcin Posted January 10, 2006 Share Posted January 10, 2006 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 More sharing options...
King_Karlssen Posted January 10, 2006 Author Share Posted January 10, 2006 Thanks this is exactly what I'm looking for! And my page for it is working thank you! Link to comment Share on other sites More sharing options...
Skemcin Posted January 11, 2006 Share Posted January 11, 2006 your welcome:) Link to comment Share on other sites More sharing options...
King_Karlssen Posted January 11, 2006 Author Share Posted January 11, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now