www.webdeveloper.com
Results 1 to 3 of 3

Thread: onrollover issue

  1. #1
    Join Date
    Sep 2010
    Posts
    1

    onrollover issue

    Hi there, kinda stuck and was wondering if I could get some assistance.

    Please let me know if I am doing this completely wrong too (that is a possibility!)....

    I want to have an image, that when you rollover it, shows its title over the top of the said image. I have kinda got it working, but when I rollover the actual text or other part of the text div, it starts going mental! This will be a problem, as I want to have a transparent box over the whole image.

    Anyone have any suggestions? Thanks!

    HTML Code:
    <html>
    <head>
    
    <style type="text/css">
    
    #thetext{
    
    width:200px;
    height:100px;
    margin: 10px 0 0 10px;
    position: absolute;
    background-color:#FFC;
    display:block;
    
    }
    
    </style>
    
    <script type="text/javascript">
    
    function showIt(div){
    	obj=document.getElementById(div);
    	obj.style.display = "block";
    }
    function hideIt(div){
    	obj=document.getElementById(div);
    	obj.style.display = "none";
    }
    window.onload=function () {
    	hideIt('thetext');
    }
    </script>
    
    </head>
    
    <body>
    <div>
    
    	<div id="thetext">Some other test would go here</div>
            
       <a href="somepage.html" onmouseOver="showIt('thetext');" onmouseOut="hideIt('thetext');"><img src="http://landscaping.savvy-cafe.com/wp-content/uploads/2007/03/irish-landscape.jpg"width="500" height="375"  /></a>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Question Confused ...

    What browser are you using?

    On FF browser using iMac, everything looks as if it is working OK.

    By 'over' do you mean 'above' the image or as it currently does as in 'over-lays' the image on rollover?

  3. #3
    Join Date
    Jun 2007
    Posts
    667
    When the div is displayed, the link is displaced causing a mouseout event which hides it again, which causes a mouseover of the link etc.

    The setup you want to have involves an image with a mouseover handler that displays a relatively-postioned div over the image.
    The mouseout handler that hides that div should be assigned to the div rather than the image.

Thread Information

Users Browsing this Thread

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

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