Can A Mouseover Do More Than One Thing?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • scolivas
    New Member
    • Oct 2006
    • 56
    #1

    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...

    Code:
    <body>
<script language="javascript"> 
function ShowPic3(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage; 
 }
</script>


 <a onmouseover="ShowPic3('LPM')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LPM.jpg" alt="Payment Methods"
  A ONMOUSEOVER= "POLICIES('PAYMENTS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/PAYMENTS" alt="Payment Methods" 
 onMouseOut="ShowPic3('DPM')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" alt="Payment Methods">
<img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" name="ShowRoom3"></a>

</body>
</html>
    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
    Last edited by acoder; Aug 11 '08, 11:09 AM. Reason: fixed code tags
    Tags: None
    • ani1586
      New Member
      • Aug 2008
      • 9
      #2
      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?

        Comment

        • scolivas
          New Member
          • Oct 2006
          • 56
          #3
          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:

          Code:
          <body>
<script language="javascript"> 
function ShowPic1(sImage) 
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom1.src = sImage; 
 }
function ShowPic2(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom2.src = sImage; 
 }

function ShowPic3(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom3.src = sImage; 
 }

function ShowPic4(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom4.src = sImage; 
 }
 
 function ShowPic5(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom5.src = sImage; 
 }

function ShowPic6(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom6.src = sImage; 
 }

function ShowPic7(sImage)
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/" + sImage + ".jpg"; document.ShowRoom7.src = sImage; 
 }

function POLICIES(sImage) 
{
 sImage = "http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/" + sImage + ".jpg"; document.POLICYROOM.src = sImage; 
 }

</script>

 <a onmouseover="POLICIES('PAYMENTS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/PAYMENTS.jpg" alt="Payment Methods" and
   onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" alt="Payment Methods">
  <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DPM.jpg" name="ShowRoom3"></a>
   

 <a onmouseover="POLICIES('SHIPPING')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/SHIPPING.jpg" alt="Ship to Locations"
 onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DSL.jpg" alt="Ship to Locations">
 <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DSL.jpg" name="ShowRoom1"></a>


 <a onmouseover="POLICIES('CUSTOMERSERVICE')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/CUSTOMERSERVICE.jpg" alt="Customer Service" 
 onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DCS.jpg" alt="Customer Service">
 <img style="width: 128; height: 31"  img border="0" src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DCS.jpg" name="ShowRoom2"></a>
 
 <a onmouseover="POLICIES('RETURNS')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/RETURNS.jpg" alt="Customer Service" 
 onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DRP.jpg" alt="Customer Service">
 <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DRP.jpg" name="ShowRoom4"></a>

 <a onmouseover="POLICIES('WARRANTY')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/LOGOS/WARRANTY.jpg" alt="Warranties" 
 onMouseOut="POLICIES('POLICYHEAD')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/DW.jpg" alt="Warranties">
 <img style="width: 128; height: 31" img border="0"  src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DW.jpg" name="ShowRoom5"></a>
 
 <a onmouseover="ShowPic6('LOS')" alt="OLIVAS_ENTERPRISES" onMouseOut="ShowPic6('DOS')" alt="OLIVAS_ENTERPRISES" href="http://stores.ebay.com/Affari-Galore_W0QQsspagenameZMEQ3aFQ3aSTQQtZkm">
 <img style="width: 128; height: 31"  img border="0" src="http://i157.photobucket.com/albums/t58/olivas_enterprises/DOS.jpg" name="ShowRoom6"></a>
  <br>

</body>
</html>
          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!
          Last edited by acoder; Aug 11 '08, 11:10 AM. Reason: fixed code tags

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Firstly, you can combine all the ShowPic* functions into one, e.g.
              [code=javascript]function ShowPic(img, src) {
              img.src = src;
              }[/code]
              To combine the two mouseover functions, put the code for POLICIES into the ShowPic function.

                Comment

                • scolivas
                  New Member
                  • Oct 2006
                  • 56
                  #5
                  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.

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      For example, showPic3:
                      [code=javascript]function ShowPic3(sImage )
                      {
                      sImage = "http://i157.photobucke t.com/albums/t58/olivas_enterpri ses/" + sImage + ".jpg"; document.ShowRo om3.src = sImage;
                      }[/code] can be replaced by [code=javascript]function ShowPic(imgno, sImage) {
                      sImage = "http://i157.photobucke t.com/albums/t58/olivas_enterpri ses/" + sImage + ".jpg";
                      document.images["ShowRoom"+imgn o].src = sImage;
                      }[/code]with the call something like:
                      [code=html]<a onmouseover="Sh owPic(3,'LPM'); POLICIES('Payme nts');" ...[/code]

                        Comment

                        • scolivas
                          New Member
                          • Oct 2006
                          • 56
                          #7
                          That is totally awesome! Thanks! I love this site! I learn so much from it! Thank you!



                          Originally posted by acoder
                          For example, showPic3:
                          [code=javascript]function ShowPic3(sImage )
                          {
                          sImage = "http://i157.photobucke t.com/albums/t58/olivas_enterpri ses/" + sImage + ".jpg"; document.ShowRo om3.src = sImage;
                          }[/code] can be replaced by [code=javascript]function ShowPic(imgno, sImage) {
                          sImage = "http://i157.photobucke t.com/albums/t58/olivas_enterpri ses/" + sImage + ".jpg";
                          document.images["ShowRoom"+imgn o].src = sImage;
                          }[/code]with the call something like:
                          [code=html]<a onmouseover="Sh owPic(3,'LPM'); POLICIES('Payme nts');" ...[/code]

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              You're welcome. Glad you liked it :)

                                Comment

                                Previous template Next
                                Working...