You must Sign In to post a response.
  • Category: JQuery

    On image mouse over div should be visible

    Hi..

    how to add menuitems dynamically to the div from database on image mouse over only ,jquery or javascript ..

    having sub menus too..
  • #648954
    To achieve this functionality you can follow the below given steps

    1. Add onmouseover event to image to which you want to see div on mouseover
    2. In onmouseover method/function, use the below given code
    function onmouseover()
    {
    var divElement = document.getElementById("divName");
    divElement.style="";//Define the style how you want to see the div
    divElement.visible ="visiblle";
    }

  • #648957
    Hello,

    please check below code:

    <!DOCTYPE html>
    <html>
    <head>

    <script>
    function show(id) {
    document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
    document.getElementById(id).style.visibility = "hidden";
    }
    </script>

    <img onmouseover="hide('div1')" src="img.png" height="100" width="100" />

    <div id="div1">Div 1 Content</div>

    </body>
    </html>

    Regards
    Mr.Rajesh
    Software Engg.

  • #648961
    Please check the following code:


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>Untitled Page</title>

    <script type="text/javascript">
    function ShowHideTooltip()
    {
    var img1 = document.getElementById("Image1");

    if(event.type == "mouseleave")
    {
    document.getElementById("tooltip").style.display = "none";
    }
    else
    {
    document.getElementById("tooltip").style.display = "inline"
    document.getElementById("tooltip").style.top = event.y;
    document.getElementById("tooltip").style.left = event.x;
    }
    }
    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <div onmouseleave="ShowHideTooltip()" onmouseenter="ShowHideTooltip()">
    The content goes here...
    <div>
    </div>
    <div id="tooltip" style="border-right: #000000 1px solid; padding-right: 3px; border-top: #000000 1px solid;
    display: none; padding-left: 3px; font-size: 12px; padding-bottom: 3px; border-left: #000000 1px solid;
    padding-top: 3px; border-bottom: #000000 1px solid; font-family: Verdana; position: absolute;
    background-color: lightyellow">
    <img src="Images/SomeImageFile.jpg" />
    </div>
    </form>
    </body>
    </html>


    Thanks & Regards
    Paritosh Mohapatra
    Microsoft MVP (ASP.Net/IIS)
    DotNetSpider MVM


  • This thread is locked for new responses. Please post your comments and questions as a separate thread.
    If required, refer to the URL of this page in your new post.