1

我正在创建一个画廊，它加载图像文件夹中的所有图像。画廊使用 PHP。我有这个工作正是我想要的。它创建每个 div 并为每个 div 分配一个单独的 id。但是，在此右侧，我希望有一个区域，如果您将鼠标悬停在任何图像上，该区域将显示描述。

到目前为止，我的搜索结果是空的，所以这是下一个停靠港。

我能够让单个 div 元素显示/隐藏，但是当涉及到多个时，我无法解决。

那只是我测试它。

<html>
<body>
    <script>    
        function mover(){
                document.getElementById("visiblediv").style.display="block";
        }
        function mout() {
            document.getElementById("visiblediv").style.display="none";
        }
    </script>


    <div id = "div1" onmouseover="mover()" onmouseout="mout()">
        Show the div
    </div>
    <div id = "visiblediv" style="visibility:visible;border:1px dotted black">
        This div is visible
    </div>

    <div id = "div2" onmouseover="mover()" onmouseout="mout()">
        Show the div
    </div>
    <div id = "visiblediv" style="visibility:visible;border:1px dotted black">
        Doesn't work because using same id?
    </div>
</body>
</html>

这是我目前拥有的 PHP 和 HTML，它们可以生成图库并分配单独的 id。我正在使用来自 http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/的画廊代码， 它使用 Lightbox 2 http://lokeshdhakar.com/projects/lightbox2/

<?php
# SETTINGS
$max_width = 150;
$max_height = 150;
$counter = 1;

function getPictureType($ext) {
    if ( preg_match('/jpg|jpeg/i', $ext) ) {
        return 'jpg';
    } else if ( preg_match('/png/i', $ext) ) {
        return 'png';
    } else if ( preg_match('/gif/i', $ext) ) {
        return 'gif';
    } else {
        return '';
    }
}

function getPictures() {
    global $max_width, $max_height;
    if ( $handle = opendir('images/gallery/') ) {
        $lightbox = rand();
        echo '<ul id="pictures">';
        while ( ($file = readdir($handle)) !== false ) {
            if ( !is_dir('images/'.$file) ) {
                $split = explode('.', 'images/gallery/'.$file); 
                $ext = $split[count($split) - 1];
                if ( ($type = getPictureType($ext)) == '' ) {
                    continue;
                }
                if ( ! is_dir('thumbs') ) {
                    mkdir('thumbs');
                }
                if ( ! file_exists('thumbs/'.$file) ) {
                    if ( $type == 'jpg' ) {
                        $src = imagecreatefromjpeg('images/gallery/'.$file);
                    } else if ( $type == 'png' ) {
                        $src = imagecreatefrompng('images/gallery/'.$file);
                    } else if ( $type == 'gif' ) {
                        $src = imagecreatefromgif('images/gallery/'.$file);
                    }
                    if ( ($oldW = imagesx($src)) < ($oldH = imagesy($src)) ) {
                        $newW = $oldW * ($max_width / $oldH);
                        $newH = $max_height;
                    } else {
                        $newW = $max_width;
                        $newH = $oldH * ($max_height / $oldW);
                    }
                    $new = imagecreatetruecolor($newW, $newH);
                    imagecopyresampled($new, $src, 0, 0, 0, 0, $newW, $newH, $oldW, $oldH);
                    if ( $type == 'jpg' ) {
                        imagejpeg($new, 'thumbs/'.$file);
                    } else if ( $type == 'png' ) {
                        imagepng($new, 'thumbs/'.$file);
                    } else if ( $type == 'gif' ) {
                        imagegif($new, 'thumbs/'.$file);
                    }
                    imagedestroy($new);
                    imagedestroy($src);
                }


                global $counter;
                echo '<li id="image'.$counter.'"><a href="'.'images/gallery/'.$file.'" rel="lightbox['.$lightbox.']">';
                echo '<img src="thumbs/'.$file.'" alt="" />';
                echo '</a></li>';
                $counter++;
            }
        }
        echo '</ul>';

    }
}
?>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!--LINKS-->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mueseomain.css">   

    <!--PORTFOLIO ONLY LINKS-->
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <style type="text/css">
        #pictures li {
            float:left;
            height:<?php echo ($max_height + 15); ?>px;
            list-style:none outside;
            width:<?php echo ($max_width + 15); ?>px;
            text-align:center;
        }
        #image_area img {
            border:5px solid white;
            outline:1px solid #ccc;
        }
    </style>

    <!--SCRIPTS-->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>  

    <!--PORTFOLIO ONLY SCRIPTS-->
    <script type="text/javascript" src="js/gallery/prototype.js"></script>
    <script type="text/javascript" src="js/gallery/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/gallery/lightbox.js"></script>


</head>
<body>
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->
    <div id="content_wrapper1">
        <?php include 'includes/header.php'; ?>
    </div>  

    <div id="content_wrapper2">

        <div id="image_wall">
                <div id="image_area">
                    <?php getPictures(); ?>
                </div>
            <div id="description_area">
                <p id="text" class="image1">kasdjfbksdjfhsdfhsdjldfbgsdkfsdklfsdf
                ashdfgaskfhgsdjkfhsdlfjkhasdlfkhsdlfkhsdlfj
                aksfbhaskdjfhsdjlfhsdlkfhsdlfkhsdlfhsdlfk<?php echo $counter ?></p>
            </div>
        </div>
    </div>



    <div id="footer_wrapper">
        <?php include 'includes/footer.php'; ?>
    </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
</body>
</html>

很简单，我想在每个图像的鼠标悬停时使一个带有特定于该图像的文本的 div 出现在描述区域中，并且在鼠标移出时消失。

如果我没有说得足够清楚，请告诉我。

4

2 回答 2

0

是的，它发生是因为您使用相同的 id 2 次。（document.getElementById() 只返回一个元素）。（当第一个元素被注释掉时，将显示第二个元素。http://jsfiddle.net/7gvNY/4/）

W3C 指南说你必须使用一个 id 一次！

所以我认为你应该阅读 ids 和 classes 之间的区别以避免下次你的错误。
当您了解 ids 和 classes 之间的区别时，这是一个有效的实现。
要通过类名获取所有元素，只需使用getElementsByClassName()方法。

于 2013-03-25T16:28:08.893 回答
0

我认为你需要做的是创建一个像 setDescriptionText(elt_id) 这样的 Javascript 函数。然后，在鼠标悬停事件中，使用悬停元素的 ID 调用此函数。此函数应根据在 div 的 innerHTML 中传递的 ID 设置 visiblediv 的文本（或应该具有动态/描述文本的 div，id 应该是唯一的）。您还需要在此处显示 div，即：

elt_id.innerHTML = "This is the picture's description, it's super cool!"
elt_id.setAttribute("visibility","visible");
elt_id.setAttribute("display","block");

您应该为 onmouseout 设置另一个函数，例如 clearDescriptionText(elt_id)。这可能包括以下调用

elt_id.innerHTML = "";
elt_id.setAttribute("visibility","invisible");
elt_id.setAttribute("display","none");

第一个将清除 div 中的文本（和任何其他 HTML）。最后两个将使元素不可见。

于 2013-03-25T16:06:54.513 回答