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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question javascript link problem

    hi, I really need help with a javascript rollover piece of code. When you rollover the link button image, it creates an image change on the said link image, and on a transparent image elsewhere on the page. the link works fine on firefox and on safari, but the problem is that the link does not work at all on Internet Explorer. Basically it appears that the a href isnt being read by IE. I obviously need the link work on IE.

    Here is an example of the code for one button

    Head code...
    function roll(cbutton, cover, mark, ya)
    {
    document[cbutton].src = cover;
    document[mark].src = ya;
    }
    </script>


    and the body code...

    Code:
    <A HREF="index.html"
    onmouseover="roll('cbutton', 'cover.gif', 'mark', 'ya.gif')"
    onmouseout="roll('cbutton', 'c.gif', 'mark', 'mark.gif')">
    
    <div id="cbutton"><IMG SRC="c.gif" NAME="cbutton"></div>
    </A>
    <div id="mark"><IMG SRC="mark.gif" NAME="mark"></div>
    the site is ciancorbett.com for the source code



    I would really appreciate any help or ideas for how i can get the links to work in internet explorer.. Thank you.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Basically it appears that the a href isnt being read by IE. I obviously need the link work on IE.
    Putting a div(block level element) inside <a>(inline element) is invalid.
    Just validate your code by http://validator.w3.org and fix the errors

    And I think,you could easily use CSS background property there, instead of that javascript based onmouseover, and ensure the effect for all your users.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    Quote Originally Posted by neeep View Post
    Code:
    function roll(cbutton, cover, mark, ya)
    {
    document[cbutton].src = cover;
    document[mark].src = ya;
    }
    Code:
    <A HREF="index.html"
    onmouseover="roll('cbutton', 'cover.gif', 'mark', 'ya.gif')"
    onmouseout="roll('cbutton', 'c.gif', 'mark', 'mark.gif')">
    
    <div id="cbutton"><IMG SRC="c.gif" NAME="cbutton"></div>
    </A>
    <div id="mark"><IMG SRC="mark.gif" NAME="mark"></div>
    IE treats the id & name attribute interchangebly so when u say document[cbutton] it quite naturally thinks ur referring to the anchor link coz it comes first... you can fix it by using the following function

    Code:
    function roll(cbutton, cover, mark, ya)
    {
    document.images[cbutton].src = cover;
    document.images[mark].src = ya;
    }
    which should work for both IE and mozilla a better solution would be to give unique ids to the images and use the document.getElementById method instead

    btw, abduraooft has given some good advice to follow which will stand you in good stead in the longer run
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow


  •  

    Posting Permissions

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