Display Image in gridview

Question

I have displayed image from the path in database in a Gridview. Now I want to display the image in such a way, that when user hover his mouse over the image, the image becomes large. How can it be done. Any idea please suggest.

Answer 1

Now in webstudio, drag on an HTML object attach the above image (or use one of your own). Double click on it and paste in this cool bit of css / javascript / html combo

<img src="$thisfolderurl$ridge.gif" style="width:100px;
border:2px solid black;" onmouseover="this.style.width='400px'" onmouseout="this.style.width='100px'" alt="" title="" />

Answer 2

Do it using the css only

give a class to that image and define a hover rule for it,

in the rule just make the size of image bigger

.test:hover {
    height:550px;
    width:550px;
}

Like in this Demo Fiddle.

You can adjust the size accordingly to need.

Answer 3

You should use JQuery on linkbutton for this.

 $('.lBtTempClass').mouseover(function() {
///  Do your code
    });

You should add css class to link button.

<asp:LinkButton ID="lBtTempID" CssClass="lBtTempClass" runat="server" >

Answer 4

try with this code.

<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>

<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>