我正在创建一个加载图像文件夹内所有图像的图库。该图库使用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>
这是我到目前为止生成的图库和分配个人id的PHP和HTML。我用的是画廊代码http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/它使用Lightbox 2http://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出现在描述区域，当鼠标悬停时消失。
如果我说得不够清楚，请告诉我。
是的，它发生是因为您使用相同的id 2次。(document.getElementById()只返回一个元素)。(当第一个元素被注释掉后，将显示第二个元素。http://jsfiddle.net/7gvNY/4/)
W3C指南说你必须使用一个id一次!
所以我认为你应该阅读id和类之间的区别，以避免下次犯错误。
当你理解了id和类之间的不同时，这里是一个有效的实现。
要按类名获取所有元素，只需使用getElementsByClassName()方法。
我认为你需要做的是创建一个Javascript函数，如setDescriptionText(elt_id)。然后，在鼠标悬停事件中，使用正在悬停的元素的ID调用此函数。这个函数应该设置可视div的文本(或者应该有动态/描述文本的div, ID应该是唯一的)基于它在div的innerHTML中传递的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)。最后两个将使元素不可见。