在onMouseOver效果上显示大图

问题描述：

我想在鼠标悬停效果上做大图像，例如
google图像的结果.

I want to do big image on mouse over effect like
in result of google image.

答

Vinod，

我使用了少量的 Java脚本代码创建了 Google图片搜索之类的效果.

注意 :您必须修改应用程序中存在的图像路径.

这是代码段:

Hi Vinod,

I have created effect like Google Image Search using little bit of Java Script code.

Note: You have to modify image path that is exists in your application.

Here is code snippet:

<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .minizeStyle
        {
            height: 70px;
            width: 70px;
        }
        .maximizeStyle
        {
            height: 200px;
            width: 200px;
            position: absolute;
            border: 1px dotted black;
        }
    </style>
    <script language="javascript" type="text/javascript">
        function doHoverImage() {
            var images = document.getElementsByTagName("img");
            for (var i = 0; i < images.length; i++) {

                images[i].onmouseover = maximizeImage;

                images[i].onmouseout = minimizeImage;

            }

        }

        function maximizeImage() {

            this.className = "maximizeStyle";

        }

        function minimizeImage() {

            this.className = "minizeStyle";

        }

    </script>
</head>

在上面的示例中，我为最大化和最小化效果创建了 Style和JavaScript 函数.

Above example i have created a Style and JavaScript function for Maximize and Minimize effect.

<body onload="doHoverImage();">
    <form id="form1" runat="server">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td align="center">
                <table cellpadding="2" cellspacing="2">
                    <tr>
                        <td>
                            <img src="Images/1.jpg" alt="1.jpg" class="minizeStyle" />
                        </td>
                        <td>
                            <img src="Images/2.jpg" alt="2.jpg" class="minizeStyle" />
                        </td>
                        <td>
                            <img src="Images/3.jpg" alt="3.jpg" class="minizeStyle" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img src="Images/4.jpg" alt="4.jpg" class="minizeStyle" />
                        </td>
                        <td>
                            <img src="Images/5.jpg" alt="5.jpg" class="minizeStyle" />
                        </td>
                        <td>
                            <img src="Images/6.jpg" alt="6.jpg" class="minizeStyle" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>

我刚刚在身体负荷上调用了Java脚本函数.此功能将从页面获取所有图像，并且将为每个图像动态分配效果，因此您不会在每个图像上添加功能.

如有任何疑问，请让我知道.

如果对您有帮助，请提供投票.

谢谢，
Imdadhusen

I have just call java script function on body load. This function will get all the images from the page and it will dynamically assign effect to each images, so you don''t wont to add function to every images.

Please do let me know, if you have any doubt.

Please provide Vote if this would be helpful to you.

Thanks,
Imdadhusen

在onMouseOver效果上显示大图

相关推荐