image - グリッドビューで画像を表示

Question

データベースのパスからの画像をGridviewに表示しました。ここで、ユーザーがマウスを画像の上に置くと画像が大きくなるように画像を表示したいと思います。どのようにそれを行うことができます。どんなアイデアでも提案してください。

Answer 1

これには linkbutton で JQuery を使用する必要があります。

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

リンクボタンにcssクラスを追加する必要があります。

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

Answer 2

このコードで試してください。

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