how to use mouse over effect to show div on another div.

Last Reply on Feb 14, 2012 10:55 PM By Mudassar

Posted on Feb 14, 2012 07:49 AM

how to use mouse over effect to show div on another div.
Hi,
I have three images in div which shows three buttons 1.large 2.small 3.medium
i want to show such div on another div on mouse over dynamically.

You have given me code related to image mouse over resize but i want to resize image using that image button small,medium and high click.
example,
if i click on small button then my image should resize.

Posted on Feb 14, 2012 10:55 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $("#buttons input[type=button]").live("click", function () {
            switch ($(this).attr("id")) {
                case "large":
                    $("#container img").css({ width: 100, height: 100 });
                    break;
                case "medium":
                    $("#container img").css({ width: 50, height: 50 });
                    break;
                case "small":
                    $("#container img").css({ width: 25, height: 25 });
                    break;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <img src="http://www.aspforums.net/Avatars/Mudassar.jpg?634592399822400000" style = "height:100px;width:100px" />
    </div>
    <div id="buttons">
        <input type="button" id="large" value="Large" />
        <input type="button" id="medium" value="Medium" />
        <input type="button" id="small" value="Small" />
    </div>
    </form>
</body>
</html>

Demo