473,403 Members | 2,366 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > can a mouseover do more than one thing?

Join Bytes to post your question to a community of 473,403 software developers and data experts.

Can A Mouseover Do More Than One Thing?

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
7 1772
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
You're welcome. Glad you liked it :)
Aug 31 '08 #8

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

Similar topics

14
Need to know if this is even possible (mouseover mayhem, long)
by: J. Makela | last post by:
Hallo. This should be a pretty entertaining question for you *real* javascript writers.. I, being the lowly photoshop guy at an ad agency made the mistake of actually saying "HTML" in a...
Javascript
5
Are simultaneous mouseover and mousemove events possible?
by: JB | last post by:
I am struggling to figure out a way to allow one element to be dragged, but still capture 'mouseover' events on other elements. I've created a simple example to demonstrate what I mean:...
Javascript
3
HTML image map mouseover help
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...
HTML / CSS
11
css problem - unwanted mouseover events
by: gdp | last post by:
hi - hope someone can suggest a way round this see http://www.tidybit.com/public/ this is a stripped down version of a site i am doing. when you mouseover the artist names on the left - the...
HTML / CSS
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!