0

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

4

4 回答 4

0

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.

于 2013-10-23T05:45:11.977 回答
0

为此，您应该在链接按钮上使用 JQuery。 

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

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

<asp:LinkButton ID="lBtTempID" CssClass="lBtTempClass" runat="server" >
于 2013-10-23T05:48:47.607 回答
0

尝试使用此代码。

<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>
于 2013-10-23T06:00:03.977 回答
0

现在在 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="" />
于 2013-10-23T06:04:14.020 回答