By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,480 Members | 1,766 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,480 IT Pros & Developers. It's quick & easy.

Can A Mouseover Do More Than One Thing?

P: 56
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
Aug 10 '08 #1
Share this Question
Share on Google+
7 Replies


P: 9
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?
Aug 11 '08 #2

P: 56
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!
Aug 11 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Aug 13 '08 #4

P: 56
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.
Aug 17 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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');" ...
Aug 17 '08 #6

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



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');" ...
Aug 31 '08 #7

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad you liked it :)
Aug 31 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.