www.webdeveloper.com
Results 1 to 15 of 15

Thread: event to be fired if mouse passes over text under an object

  1. #1
    Join Date
    May 2009
    Posts
    7

    Question event to be fired if mouse passes over text under an object

    Hello, I'm having a problem with a site I'm developing that uses heavy DOM javascript.

    My goal is for text with a certain SPAN class to be highlighted blue when the mouse passes over it.
    Sounds easy, right? Not necessarily-- the catch is that sometimes, DIV boxes are on top of the text that I'm trying to change, so even if the mouse is resting on top of the text, the desired event is not fired because the cursor is registered as being on top of the DIV element, not the text.

    What I want to do is make it so that whenever the mouse is hovering over obstructed text, the obstructions disappear, so that the text is clickable.

    Any help would be appreciated. This has been bugging me for a while now.
    Here is a link to my project: click here
    Notice that the pictures already are highlighted blue when moused over, but not the text. Please help, thanks!!

  2. #2
    Join Date
    Aug 2008
    Posts
    22
    Why don't you try using imagemap and area tags where the text is? Then add an onMouseOver event to the area tags?

  3. #3
    Join Date
    May 2009
    Posts
    7
    The problem is that I have no control where the text and the images are on the page, as the code will be executed for many different pages and layouts. I've tried using offsetTop, offsetLeft, offsetWidth and offsetHeight to do something similar with the images on the page, but it doesn't seem to work with spans of text. I'd need a way to calculate where exactly the text would appear on each page.

  4. #4
    Join Date
    Aug 2008
    Posts
    22
    Style for the spans:

    position: absolute;
    left: [whatever]px;
    top: [whatever]px;

    There ya go.

  5. #5
    Join Date
    May 2009
    Posts
    7
    thanks for your quick replies cryptographer.
    again though, I have no control over the content of the webpages. This would work great if I were able to manipulate the text myself, but I'm simply adding javascript to pre-made webpages of different styles.

  6. #6
    Join Date
    Aug 2008
    Posts
    22
    Oh, I see.
    Hm... how are the spans positioned? Relatively? And I'm suuming you are willing to use Javascript(duh).

  7. #7
    Join Date
    May 2009
    Posts
    7
    I've run into many types, most of which are static, but some are absolute, and some are displayed as blocks (really annoying). I need one javascript solution that can cover all of them in one go.

  8. #8
    Join Date
    Aug 2008
    Posts
    22
    Which span are you talking about? Is it visible in the web page?

  9. #9
    Join Date
    Aug 2008
    Posts
    22
    HOLD ON! I've got it! You are trying to make the text come above the image span right? Here's the javascript:

    document.getElementById(text or whatever).style.z-index=[something higher than the image or div, like 1000000];

    That should make the text span come ABOVE the div.

  10. #10
    Join Date
    May 2009
    Posts
    7
    In my web page? currently, there is a span of text whose class is called "edit-retext" and it says "testing" a whole bunch of times. As you can see there is an image obstructing it. I'm using that for testing/demonstration purposes.

  11. #11
    Join Date
    May 2009
    Posts
    7
    I've tried the z-index method too. It doesn't seem to work with SPANs whose position are static.

  12. #12
    Join Date
    Aug 2008
    Posts
    22
    Have you tried LOWERING the picture? Heh? HEH?

  13. #13
    Join Date
    Aug 2008
    Posts
    22
    Sorry, you will have been the first person I helped, I'm anxious.

  14. #14
    Join Date
    May 2009
    Posts
    7
    hah, that's fine. what do you mean by lowering the picture?

  15. #15
    Join Date
    Aug 2008
    Posts
    22
    Well, if you can't RAISE the text using z-index, then LOWER the picture. ;D

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles