SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i avoid this?????

    hi,
    i have a problem with my script i dont know how can i solve this.
    I am trying to create a tooltip when mouseover some img and hides it when mouseout the div. The problem is that i want to show the tooltip exactly on top of the img. but when i do so it flicks a lot.
    Please check link in FF
    http://www.unirazz.com/test.html

    <CODE>
    <script type="text/javascript">
    window.onload = function(){
    var tooltip = document.getElementById('tooltip');
    tooltip.onmouseover = function(){
    var cluetip = document.getElementById('cluetip');
    cluetip.setAttribute('class','show');
    }
    tooltip.onmouseout = function(){
    var cluetip = document.getElementById('cluetip');
    cluetip.setAttribute('class','hide');
    }
    }
    </script>
    <style type="text/css">
    .hide { display: none; }
    .show { display: block; }
    </style>

    </head>

    <body bgcolor="#cccccc">
    <div id="cluetip" class="hide" style="position: absolute; z-index:97;width: 345px;height: 200px; background-color:#CC6699;"></div>
    <img id="tooltip" src="Images/Image2.jpg" />
    </CODE>

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Location
    Michigan, USA
    Posts
    434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think it's because the mouseover gets called when you're on the image, then the image gets covered by your div so now the mouse is no longer over the image (and this registers the next time the mouse moves at all). So now the mouseout is called - removing the div which makes the mouseover get called since you're on the image again, and so on...

    Try the mouseout on the cluetip instead.
    - Robert

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes u r right! this is the cause. but the problem is that position of cluetip is not fixed. its random, sometime it will b on the img and some times it will not.

    how should i tackle this situation?
    thnx

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please help me thnx

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    you could do it using CSS and no javascript:
    http://trentrichardson.com/examples/csstooltips/

    or it's a case of finding the mouse position and aligning the layer to the side of the mouse.
    http://www.walterzorn.com/tooltip/tooltip_e.htm has a nice tooltip that attaches to the mouse
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Location
    Michigan, USA
    Posts
    434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I would say make sure it doesn't go on the image. People will appreciate that.
    - Robert


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
  •