SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover/out to change id using document.getElementById not working in IE6

    Hi,

    I'm attempting to change a div tag's id value using onmouseover/onmouseout from another div element.

    Currently my simple javascript/html code is
    <a onmouseover="document.getElementById('main-clock').id='main-clock-jurassic'" onmouseout="document.getElementById('main-clock-jurassic').id='main-clock'" href="#"><div id="main-jurassic">&nbsp;</div></a>

    <div id="main-clock">

    The div id tag i'm trying to change is main-clock.
    WIth the code above, I'm able to effectively change the id tag of main-clock to main-clock-jurassic, and back again to main-clock. This works with Opera, Firefox and IE7, however, I'm buffled as to why it doesn't work in IE6.

    Can any one kindly offer some guidance? I've tried searching for a solution to no avail and it is with last result that I consult you guys on this forum.

    Any help wld be greatly appreciated.
    Thanks
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  2. #2
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    what u r going to achieve with this piece of code??
    u r changing the id on mouseover and mouse out. so when the mouse moves the id changes and again when mouse out the id changes to the ole one. within this time what u r going to achieve by changing the id's??

    i couldn't find any reason...
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  3. #3
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The id of your div is wrong, it should be main-clock, instead of main-jurassic...

    This works in IE6, IE7, Opera, Netscape, Konqueror, Firefox, Seamonkey and K-meleon...

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
        #main-clock {
            background-color: #0033CC;
        }
        #main-clock-jurassic {
            background-color: #33FF33;
        }
    </style>
    </head>
    <body>
    <a onmouseover="document.getElementById('main-clock').id='main-clock-jurassic'" onmouseout="document.getElementById('main-clock-jurassic').id='main-clock'" href="#">
    <div id="main-clock">
        &nbsp;
    </div>
    </a>
    </body>
    </html>
    FOR SALE: 1 set of morals, never used, will sell cheap

  4. #4
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The difference in the 2 ids are a change in the background-image. I've attempted use of style.backgroundimage = 'url(images/image.png)' but that would break my :hover effect for main-clock:hover. Hence the use of changing the id tag instead.

    I considered another more complicated approach which would be having additional div tags which would hide/show instead. But this is a simpler solution.

    Is there a reason why it isn't working in IE6? Thanks
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  5. #5
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's for an :hover effect, why don't you use one image, with the normal state at the top of the image, and the :hover state at the bottom of the image? This way the browser only have to load one image for this to work, and just set the backgroundPosition in JS? The second image will always be there, immediately, without having to wait to load it the first time.

    Btw, the example in my previous post works in IE6, I tested it again to make sure I was not mistaking.
    FOR SALE: 1 set of morals, never used, will sell cheap

  6. #6
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hexburner View Post
    If it's for an :hover effect, why don't you use one image, with the normal state at the top of the image, and the :hover state at the bottom of the image? This way the browser only have to load one image for this to work, and just set the backgroundPosition in JS? The second image will always be there, immediately, without having to wait to load it the first time.

    Btw, the example in my previous post works in IE6, I tested it again to make sure I was not mistaking.
    Thanks hexburner . Yes there's already an effect using that. Though it's in the form of a div tag. I wanted an additional onmouseover effect that would effect Another div tag.

    The code i used was correct, e.g. main-jurassic. I'm really sorry for not being able to show you the full implementation, otherwise it would have been easier for you to grasp what I was trying to achieve. Nonetheless, I'm very grateful for all your time and help. I've actually discovered the reason why it didn't appear and that was due to the pngfix i used on main-clock in ie6 to achieve png transparency. =x

    I've resorted to specifying more div blocks which would hide/show onmouseover and that worked well in all the browsers.

    Thank you all!
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


Bookmarks

Posting Permissions

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