如何让Mouseover函数处理多个图像,每个图像都有单独的伴随文本?

I am creating a gallery which loads all images within the images folder. The gallery uses PHP. I have this working exactly how I want. It creates each div and assigns each an individual id. However to the right of this I wish to have a area where if you hover over any image, a description will appear in this area.

I've come up empty on my search so far, so this was the next port of call.

I was able to get a single div element to show/hide but when it comes to multiple I just can't work it out.

That is just me testing it out.

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

Here is the PHP and HTML I have so far that generates the gallery and assigns individual ids. I'm using the gallery code from http://www.lateralcode.com/create-a-simple-picture-gallery-using-php/ which uses 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>

So simply, I would like to make it so on mouseover of each image a div with text which is specific to that image appears in the description area and upon mouseout disappears.

If I haven't made anything clear enough, please let me know.

查看全部
dsfovbm931034814
dsfovbm931034814
2013/03/25 15:45
  • mouseover
  • php
  • html
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

2个回复