Question

我在Gridview中显示了数据库中路径的图像。现在我想以这样的方式显示图像，当用户将鼠标悬停在图像上时，图像变大。怎么做到呢。有任何想法请建议。

Answer 1

仅使用css

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

在规则中只是使图像的大小更大

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

就像这个 Demo Fiddle。

您可以根据需要调整大小。

Answer 2

你应该在linkbutton上使用JQuery。

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

您应该将css类添加到链接按钮。

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

Answer 3

尝试使用此代码。

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

Answer 4

现在在webstudio中，拖动HTML对象会附加上面的图像（或使用您自己的图像）。双击它并粘贴这个很酷的css / javascript / html组合

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

在gridview中显示图像

4 个答案: