Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cross platform mouse image rollover...?

    Hi all,

    Just wodnering if anyone can point me in the right direction here, i've got this line ok:

    <a onmouseover="imgone.src='images/new/2dark.jpg'" onmouseout="imgone.src='images/new/2light.jpg'" href="#"><img class="galink" src="images/new/2light.jpg" border="1" name="imgone" color="ff0000" /></a>

    Now why does firefox 0.8 for windows NOT do the mouseover? Please bare in mind that I am eventually going to code the whole site in ASP.NET, but this mouseover for an image should be simple, I can't find a solution for it anywhere.

    Heeeelp!

    Thanks

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Because the code is wrong. IE sees all of the names in the document level and that is why you can reference the name with it. The others can not do it that way.

    If you change the code too....

    onmouseover="document.getElementById('imageID').src='imageName.gif'"

    it should work.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down

    don't work mate any more suggestions?

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have: Mozilla/5.0, Firefox/0.9.3 and this code works fine.

    The correct way is to access it via the DOM though...or rather, that is the wrong syntax for accessing it via the DOM.

    Just curious, do you have a doc-type declared in your page?


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There's no associated ID's to use with document.getElementById....
    Try this: onmouseover="document.images['imgone'].src=......

    However, I do not understand why you are even using an anchor when placing the mouse events directly on the imagage would allow you to pass the image src using the keyword this....

    IE: <img onmouseover="this.src=.....

    .....Willy

  • #7
    Regular Coder
    Join Date
    Aug 2002
    Location
    USA
    Posts
    625
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <img onmouseover="this.src=.....
    I've always stuck to the old method, because I like the cursor to indicate that something is supposed to happen when the image is moused over...yeah, I know...too lazy to add: style="cursorointer;"


    -james
    "God so loved the world that he gave his only begotten son, so that whosoever believed in him would not perish, but have everlasting life. For God did not send his son into the world to condemn the world, but so that through him the world might be saved. "

  • #8
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well in this case there is already a class assigned to the images so one additional declaration of : cursor:pointer; would work across all images in the class...

    However, this brings up another mystery which is: Why isn't the border and border color also included within the style....

    <img name="imgone" class="galink" src="images/new/2light.jpg" border="1" color="ff0000" />

    Here's what I advise using:
    (mouse events will work on all light/dark images)

    Code:
    <style type="text/css">
     <!--
      img.galink { border-style: solid;
                   border-color: #FF0000;
                   border-width: 1px;
                   cursor:  pointer;
                   cursor:  hand;
      }
     -->
    </style>
    </head>
    
    <body>
    <img class="galink" src="images/new/2light.jpg" 
    onmouseover="this.src=this.src.replace(/light/i,'dark')"
    onmouseout ="this.src=this.src.replace(/dark/i,'light')" />
    .....Willy
    Last edited by Willy Duitt; 08-23-2004 at 01:42 AM.

  • #9
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    interesting thread... thank you, i think the css way will work, i know, i've made a couple of mistakes. i'm on the case.

    keep the comments coming, this is by far the most helpful forum i've ever come across, keep up the good work peeps

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or you could just leave it wrapped in <a href="#"></a>. Though, if clicking the images isn't actually going to do anything, then use the cursor: property.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •