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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover behaviour over a div element

    Hello

    I have an image of a person.
    I would like to display a bordered div surrounding the face of the individual in the image.
    In order to do so, I set the image as such:
    Code:
    <div style="position:relative">
      <img src="person.jpg" width="100" height="100">
        <div onmouseover="this.style.display = "inline" onmouseout="this.style.display = "none" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 1px solid blue; z-index:2; display:none">
        </div>
      </img>
    </div>
    When the mouse moves over the inner div, it should become visible and draw a blue rectangle in a certain place over the image.
    When the mouse moves out of the inner div, the blue rectangle should disappear.

    The problem is that once the display property of the div is set to 'none', it is no longer displayed and thus cannot "listen" to the mouse movements...

    How can I solve this?

    thanks

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    instead of setting the display to "none" you could just change the border back to "nothing"...

    Code:
    onMouseout="this.style.border=''; "
    that might work....? So it keeps the layer "visable" but changes the border back to nothing......

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that but nothing seems to happen.
    It seems like the div is not responding to the mouse movements...

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    I noticed that a bit of your code wasn't constructed correctly... here's my code which seems to work ok.... but for some reason when I omit the background colour of the DIV it stops showing... but try it anyway with the image....

    Code:
    <div onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border=''" style="position:absolute; top:10px; left:10px; width:30px; height:30px;background:#CCCCCC;">
    come to think of it, you can set the background of the DIV layer to your part of the person.... eg

    background-image:head.jpg or something....

    basically in my code I stopped the DIV from being hidden, as when its hidden you cannot reference it using mouse overs because its obviosuly not there....

    let me know how it goes!

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I managed to solve the problem in a slightly different approach.
    I replaced the inner div with a transparent gif like so:
    Code:
    <div style="position:relative">
      <img src="person.jpg" width="100" height="100">
        <img src="spacer.gif" onmouseover="this.style.border= "1px solid blue" onmouseout="this.style.border= "" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 0px solid blue; z-index:2;>
        </img>
      </img>
    </div>
    Now the inner gif is always present (and it is transparent of course) and I get what I wanted.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Watch out for the quotes. You should enclose the attributes in double quotes.

    <img src="spacer.gif" onmouseover="this.style.border='1px solid blue'" onmouseout="this.style.border=''" style="position:absolute; top:10px; left:10px; width=30px; height:30px; border: 0px solid blue; z-index:2" />
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv
    Watch out for the quotes. You should enclose the attributes in double quotes.
    I thought that's what might have been up with it not working in the first place.... ? apart from the div being hidden of course!!

  • #8
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the feedback.
    I fixed the quotes. Still the problem was with the invisible div

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    As homerUK said...
    Quote Originally Posted by homerUK
    basically in my code I stopped the DIV from being hidden, as when its hidden you cannot reference it using mouse overs because its obviosuly not there....
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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