Question

首先，我是脚本新手，需要你的帮助。我正在努力实现以下目标：

我想在我的网站上展示四个项目。这些项目可通过图像查看。当人们将鼠标悬停在图像上时，名为“info”的div将显示他们悬停在项目上的其他信息。

所以要明确的是，将通过悬停触发的数据转到相同的div“info”：

将鼠标悬停在图片1上 - ＆gt;将项目1的信息加载到 - ＆gt; div“info”

将鼠标悬停在图片2上 - ＆gt;将项目2的信息加载到 - ＆gt; div“info” 等

一位朋友告诉我使用ajax和xml，这是一个很好的组合吗？

感谢您的帮助

Answer 1

你是正确的，在页面上动态加载内容的好方法是使用Javascript和XML。开始使用JavaScript的一个好方法是加载库以帮助您操作HTML页面的内容。我绝对推荐JQuery。

我强烈建议不要从单独的文件中加载信息，除非内容是一大堆非常大的图像。

看一下这个视频：JQuery for Designers他们做了一些非常好的视频，帮助我在第一次出发时理解JQuery。我刚刚链接的页面有一些很棒的技术可以将内容切换到同一个地方，并且还会给你一些重要的用户体验（用户体验）提示。

Answer 2

Ajax是获取数据的最佳选择....

但变化来自于什么类型的数据......

如果您需要数据库中的值 JSON 将是我的选择

或

从不介意任何数据可以顺利构建

如果你没有太多的手写脚本

只需使用Jquery插件即可使用简单的调用来检索数据

<强> Fancybox plugin CLICK HERE...

以及如何使用的指南

<强> GUIDE TO USE FANCYBOX CLICK HERE.....

Answer 3

谢谢大家的回复。

我使用Mark给出的技术，使用html和css暂时解决了这个问题。但是，我认为使用javascript可以使事情更容易，更有条理。我对脚本的了解不够好。我在下面发布了我的html。

我仍然有一个问题，如何使用图像的id作为检索特定信息部分的参数。例如：我有一个id = img1的图像和一个包含子参数的xml文件。因此，当我将鼠标悬停在图像上时，js获取该图像的id，然后将xml的特定部分加载到“info”div而不是整个xml。（回答亚当的问题，数据类型只是文本）

enter code here

<!DOCTYPE html>
<html>
<head>
    <style>

        div.maincontent{
            border: none;
            margin:0px;
            padding:0px;
        }

        div.leftcol, div.rightcol {
            /*
             * Note that the left column and the right column use position fixed
             * to make placement of the elements on top easier.
             */
            position:fixed;
            top:0px;
            width:200px;
            height: 100%;
            background-color: green;
            color: white;
        }
        div.leftcol{
            left:0px;
        }
        div.rightcol{
            right:0px;
        }
        div.middlecontent{
            /*
             * Note the left and right margin to place the div. 
             * With this margin you can  
             */
            margin:0px 200px 0px 200px;
            position: absolute;
            top:0px;
            left:0px;

        }
        div.square{
            float:left;
            margin:0px;
            width:200px;
            height:200px;
            border:10px solid black;
            background-color: blue;
        }
        div.left_content, .right_content {
            /*
             *Initially do not display the div.left_content
             *and div.right_content.
             *I still set the all the styles here the divs have in common.
             */ 
            margin:0px;
            position:fixed;
            margin:0px;
            top:0px;
            width:200px;
            height: 100%;
            background-color: blue;
            color:white;
            display: none; /* do not display */
        }

        div.square:hover > div.left_content {
            /*
             *When you hover over a square take from the children
             *those with div.left_content and display them.
             *The left one is displayed on top of the left div.leftcol
             */ 
            left:0px;
            display:block;    
        }
        div.square:hover > div.right_content {
            /*
             *When you hover over a square take from the children
             *those with div.right_content and display them.
             *The right one is displayed on top of the right div.rightcol
             */ 

            right:0px;
            display:block;    
        }   
    </style>
    </head>
    <body>

    <div class="maincontent">
        <div class="leftcol">
            <p>
                Hover over the blue divs in the middle
            </p>
            <p>
                This trick uses the &gt; to find children of an element.
                The children are only displayed when hovering over the parent element.
                Look at the CSS how that is done. for instance for the left div it is
                div.square:hover &gt; div.left_content
            </p>
            <p> something inside the left column</p>
        </div>
        <div class="rightcol">
            <p>something inside the right column</p>
        </div>

        <div class="middlecontent">
            <div class="square">
                <!--
                    this div has two children
                        a div with class="left_content" and
                        a div with class="right_content"

                -->
                <div class="left_content">
                    <p> first div </p>
                    <p> something as left content </p>
                </div>
                <div class="right_content">
                    <p> first div </p>
                    <p> something as right content </p>
                </div>
            </div>
            <div class="square">
                <div class="left_content">
                    <p> second div </p>
                    <p> something as left content </p>
                </div>
                <div class="right_content">
                    <p> second div </p>
                    <p> something as right content </p>
                </div>
            </div>
            <div class="square">
                <div class="left_content">
                    <p> third div </p>
                    <p> something as left content </p>
                </div>
                <div class="right_content">
                    <p> third div </p>
                    <p> something as right content </p>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

加载悬停图像的数据

3 个答案: