Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Can A Mouseover Do More Than One Thing?

Member
  
Join Date: Oct 2006
Posts: 55
#1: Aug 11 '08
Hi, wanted to know if there was a way to make a mouseover command perform 2 tasks?

I want it to change the image that is being mouseovered and I also want another image to appear in anoter location on the page.

I can make it do one or the other but not both - can this be done?
Here is what I have so far...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <body>
  3. <script language="javascript"> 
  4. function ShowPic3(sImage)
  5. {
  6.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage; 
  7.  }
  8. </script>
  9.  
  10.  
  11.  <a onmouseover="ShowPic3('LPM')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LPM.jpg" alt="Payment Methods"
  12.   A ONMOUSEOVER= "POLICIES('PAYMENTS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/PAYMENTS" alt="Payment Methods" 
  13.  onMouseOut="ShowPic3('DPM')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" alt="Payment Methods">
  14. <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" name="ShowRoom3"></a>
  15.  
  16. </body>
  17. </html>
  18.  
  19.  
Thanks for any input.

(I am hoping to use this as part of my template for ebay - so minimal java scripting is necessary - if anyone knows how to do this w/out using Java - please let me know!)

Thanks!
Sophie

Newbie
  
Join Date: Aug 2008
Posts: 9
#2: Aug 11 '08

re: Can A Mouseover Do More Than One Thing?

Hi Sophie,

Why don't you put the code for the 2nd thing you want to happen onmouseover, in the function that is called when this even happens?
Member
  
Join Date: Oct 2006
Posts: 55
#3: Aug 11 '08

re: Can A Mouseover Do More Than One Thing?

That sounds like a good idea - but I have modified this code from somewhere else and really don't know how to "code" it myself. I just changed names so that it related to what I was doing.

If you can assist me in figuring out how to actually write the code that would be great.

Basically on the mouse over event I want the image that is mousedover to change and then I want another image to appear just below.



I have a 2nd image for each of the green buttons - it is an inverse of the original.

I also have 5 images that I would like to appear below the row of buttons depending on which button is being hovered over.

I don't want a new page to come up - as I don't want the potential buyer to have to try and find their way back to my listing.

Here is my working code as I have it right now:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <body>
  3. <script language="javascript"> 
  4. function ShowPic1(sImage) 
  5. {
  6.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom1.src = sImage; 
  7.  }
  8. function ShowPic2(sImage)
  9. {
  10.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom2.src = sImage; 
  11.  }
  12.  
  13. function ShowPic3(sImage)
  14. {
  15.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage; 
  16.  }
  17.  
  18. function ShowPic4(sImage)
  19. {
  20.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom4.src = sImage; 
  21.  }
  22.  
  23.  function ShowPic5(sImage)
  24. {
  25.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom5.src = sImage; 
  26.  }
  27.  
  28. function ShowPic6(sImage)
  29. {
  30.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom6.src = sImage; 
  31.  }
  32.  
  33. function ShowPic7(sImage)
  34. {
  35.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom7.src = sImage; 
  36.  }
  37.  
  38. function POLICIES(sImage) 
  39. {
  40.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/" + sImage + ".jpg"; document.POLICYROOM.src = sImage; 
  41.  }
  42.  
  43. </script>
  44.  
  45.  <a onmouseover="POLICIES('PAYMENTS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/PAYMENTS.jpg" alt="Payment Methods" and
  46.    onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" alt="Payment Methods">
  47.   <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" name="ShowRoom3"></a>
  48.  
  49.  
  50.  <a onmouseover="POLICIES('SHIPPING')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/SHIPPING.jpg" alt="Ship to Locations"
  51.  onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DSL.jpg" alt="Ship to Locations">
  52.  <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DSL.jpg" name="ShowRoom1"></a>
  53.  
  54.  
  55.  <a onmouseover="POLICIES('CUSTOMERSERVICE')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/CUSTOMERSERVICE.jpg" alt="Customer Service" 
  56.  onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DCS.jpg" alt="Customer Service">
  57.  <img style="width: 128; height: 31"  img border="0" src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DCS.jpg" name="ShowRoom2"></a>
  58.  
  59.  <a onmouseover="POLICIES('RETURNS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/RETURNS.jpg" alt="Customer Service" 
  60.  onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DRP.jpg" alt="Customer Service">
  61.  <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DRP.jpg" name="ShowRoom4"></a>
  62.  
  63.  <a onmouseover="POLICIES('WARRANTY')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/WARRANTY.jpg" alt="Warranties" 
  64.  onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DW.jpg" alt="Warranties">
  65.  <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DW.jpg" name="ShowRoom5"></a>
  66.  
  67.  <a onmouseover="ShowPic6('LOS')" alt="OLIVAS_ENTERPRISES" onMouseOut="ShowPic6('DOS')" alt="OLIVAS_ENTERPRISES" href="http://stores.ebay.com/Affari-Galore_W0QQsspagenameZMEQ3aFQ3aSTQQtZkm">
  68.  <img style="width: 128; height: 31"  img border="0" src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DOS.jpg" name="ShowRoom6"></a>
  69.   <br>
  70.  
  71. </body>
  72. </html>
  73.  
  74.  
  75.  
This will work - but I thought it would be cooler if the buttons changed color too. The lighter colored buttons have the same name as the dark ones except I replaced the leading D with an L.

Thanks for your assistance!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Aug 13 '08

re: Can A Mouseover Do More Than One Thing?

Firstly, you can combine all the ShowPic* functions into one, e.g.
Expand|Select|Wrap|Line Numbers
  1. function ShowPic(img, src) {
  2.     img.src = src;
  3. }
To combine the two mouseover functions, put the code for POLICIES into the ShowPic function.
Member
  
Join Date: Oct 2006
Posts: 55
#5: Aug 17 '08

re: Can A Mouseover Do More Than One Thing?

so even though each of these pictures is going into a different location - I can still just have the one function? How do i tell it where I want it in one function?

I really don't understand the madness behind java coding - it is all very foriegn to me - I figured out how to maniuplate the code I originally had by trial and error - in no way did I know what I was doing, I just got lucky. I can do some basic and midlevel html - and I can do neat stuff with vb6 & vba...but that is the extent of my know-how with programming.

Thanks for the suggestion - It sounds great - I just wish I knew how to do it.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Aug 17 '08

re: Can A Mouseover Do More Than One Thing?

For example, showPic3:
Expand|Select|Wrap|Line Numbers
  1. function ShowPic3(sImage)
  2. {
  3.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage;
  4.  }
can be replaced by
Expand|Select|Wrap|Line Numbers
  1. function ShowPic(imgno, sImage) {
  2.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg";
  3.  document.images["ShowRoom"+imgno].src = sImage;
  4. }
with the call something like:
Expand|Select|Wrap|Line Numbers
  1. <a onmouseover="ShowPic(3,'LPM'); POLICIES('Payments');" ...
Member
  
Join Date: Oct 2006
Posts: 55
#7: Aug 31 '08

re: Can A Mouseover Do More Than One Thing?

That is totally awesome! Thanks! I love this site! I learn so much from it! Thank you!



Quote:

Originally Posted by acoder

For example, showPic3:

Expand|Select|Wrap|Line Numbers
  1. function ShowPic3(sImage)
  2. {
  3.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage;
  4.  }
can be replaced by
Expand|Select|Wrap|Line Numbers
  1. function ShowPic(imgno, sImage) {
  2.  sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg";
  3.  document.images["ShowRoom"+imgno].src = sImage;
  4. }
with the call something like:
Expand|Select|Wrap|Line Numbers
  1. <a onmouseover="ShowPic(3,'LPM'); POLICIES('Payments');" ...
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Aug 31 '08

re: Can A Mouseover Do More Than One Thing?

You're welcome. Glad you liked it :)
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,537 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved