Saturday, November 20, 2010

Show a bigger image with javascript

Displaying a bigger image by rolling over a thumbnail with the cursor is not difficult. Dreamweaver already has the javascript code for it. An explanation of how to use Dreamweaver to achieve this effect is found at DigitalFamily.

I am looking at this because I need to use this or a similar function to display products on a page from a small thumbnail image. By rolling over the thumbnail with the mouse, one gets a larger image displayed in a separate area. One issue that I need to consider is creating a box where the larger image will appear.I also wonder how to achieve this effect in Blogger.

Online catalogs like Gap use a similar tool to great effect.

There is a stripped down code readily available. I have copied this completely from GeekswithBlogs, so don't give me any credit.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="ecmascript">
        function ShowBiggerImage(obj)
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
        }
        function ShowDefaultImage(obj)
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "";
        }
        function move_Area(event)
        {
         event = event || window.event;
         LargeImageContainerDiv.style.left=event.clientX+document.body.scrollLeft+10;
         LargeImageContainerDiv.style.top=event.clientY+document.body.scrollTop+10;
        }
        document.onmousemove = move_Area;

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Image ID="Image1" runat="server" Width="60px" Height="80px" ImageUrl="~/Images/FretsOnFire.jpg" onmouseover="ShowBiggerImage(this);" onmouseout="ShowDefaultImage(this);"/>
        </div>
        <div id="LargeImageContainerDiv" style="position: absolute; z-index:2"></div>
    </form>
    </body>
</html>

No comments:

Post a Comment