Results 1 to 5 of 5

Thread: onmouseover event

  1. #1
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onmouseover event

    I have a table with two columns.
    <table>
    <tr><td><a href="...">Text here</a></td>
    <td></td></table>
    I want when I move the mouse pointer on the "Text here" in the first column, the picture appears in the second blank column, but the text to stay in place. And when I move out the mouse pointer the picture disappears.
    Is there a way to do that with DHTML?
    Thanking you in advance.
    And please excuse my english.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    <a href="image.jpg" onMouseover="return false; document.divname.innerHTML='<img src=\"+this.href+''\">';">click me</a>
    Make a div in the place you want it to appear.
    Since I'm not great at javascript, I'm not sure if that will work, but I'm hoping it'll help you to get a bit closer.
    Basically, as a backup, it points to the image, so if javascript isn't enabled, they go to the picture. That's good. If it is enabled, it uses return false to not go to the link and instead changes the html of <div> 'divname' to an image tag including 'this.href' which means what the link is pointing to.
    Good luck.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function doIt(objName,status)
    {
    	var obj = document.getElementById(objName);
    	
    	
    	if(status == 0)
    		obj.style.visibility = "visible";
    	else
    		obj.style.visibility = "hidden";
    }
    </script>
    </head>
    <body>
    <table width="300">
    <tr>
    <td width="100"><a href="#" onmouseover="doIt('test',0);" onmouseout="doIt('test',1);">This is a test</td>
    <td width="200"><img id="test" src="n.jpg"  border="0" style="visibility:hidden;"></td>
    </tr>
    </table>

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Would my approach work? (Assuming the syntax were correct.)
    And... er.. yeah, I forgot the onmouseout
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much guys. It really works.

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
  •