Question

所以我建立了这个网页，左侧有一个照片库。理想情况下，将鼠标悬停在它上面应该会改变向右吹动的图像（它确实如此），但它也应该更改缩略图下方框中的文本。使用this guide I was directed to earlier，我开始构建。

即使我更改了所有内容的名称，一切都在该论坛的代码中正常运行。但是，当我把它放在画廊所需的表格中的div内时，似乎打破了。文本永远不会改变我设置的默认值。我尝试更改标题中的实际脚本以响应各个div的鼠标悬停，但这似乎也没有完成。

我正在使用document.getElementById（）。innerHTML吗？我能想到的唯一的事情是改变脚本打破了它，或者通过将识别图片的JavaScript div放在与输出文本框不同的div中，我让它不高兴。你们中的任何一个人能指出我正确的方向吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Single Mouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
    var dogtext='The domestic dog (Canis lupus familiaris), is a subspecies of the gray         wolf (Canis lupus), a member of the Canidae family of the mammilian order Carnivora.'
    var cattext='The domestic cat (Felis catus or Felis silvestris catus) is a small,  usually furry, domesticated, carnivorous mammal.'
    var parrottext='Parrots, also known as psittacines are birds of the roughly 372 species in 86 genera that make up the order Psittaciformes, found in most tropical and subtropical regions.'
    var lizardtext='Lizards are a widespread group of squamate reptiles, with more than 5600 species , ranging across all continents except Antarctica as well as most oceanic island chains.'
    var horsetext='The horse (Equus ferus caballus) is one of two extant subspecies of Equus ferus, or the wild horse.'
    var chickentext='The chicken (Gallus gallus domesticus) is a domesticated fowl, a subspecies of the Red Junglefowl.'
    function writetext(){
        document.getElementById('p1').innerHTML=dogtext;
        document.getElementById('p2').innerHTML=cattext;
        document.getElementById('p3').innerHTML=parrottext;
        document.getElementById('p4').innerHTML=lizardtext;
        document.getElementById('p5').innerHTML=horsetext;
        document.getElementById('p6').innerHTML=chickentext;
    }
</script>
<link href="TextSwapTestCSS.css" rel="stylesheet">

</head>

<body>
<td width="1000" rowspan="3">
<div id="gallery">
<ul>
    <div id="p1" onmouseover="writetext(dogtext)" ><li><a href="dog.jpg"><img src="dog.jpg" width="100" height="75" alt="dog">
        <span><img src="dog.jpg" width="400" height="300" alt="dog"><br>This is a cool looking dog.</span></a></div>
    </li>
    <li><div id="p2" onmouseover="writetext(cattext)" ><a href="cat.jpg"><img src="cat.jpg" width="100" height="75" alt="cat">
        <span><img src="cat.jpg" width="400" height="300" alt="cat"><br>Just a cute kitten.</span></a></div>
    </li>
    <li><div id="p3" onmouseover="writetext(parrottext)" ><a href="parrot.jpg"><img src="parrot.jpg" width="100" height="75" alt="parrot">
        <span><img src="parrot.jpg" width="400" height="300" alt="parrot"><br>A rainbow parrot just hanging out.</span></a></div>
    </li>
    <li><div id="p4" onmouseover="writetext(lizardtext)" ><a href="lizard.jpg"><img src="lizard.jpg" width="100" height="75" alt="lizard">
        <span><img src="lizard.jpg" width="400" height="300" alt="lizard"><br>A green lizard just chillin'.</span></a></div>
    </li>
    <li><div id="p5" onmouseover="writetext(horseext)" ><a href="horse.jpg"><img src="horse.jpg" width="100" height="75" alt="horse">
        <span><img src="horse.jpg" width="400" height="300" alt="horse"><br>A horse running through a field.</span></a></div>
    </li>
    <li><div id="p6" onmouseover="writetext(chickentext)" ><a href="chicken.jpg"><img src="chicken.jpg" width="100" height="75" alt="chicken">
        <span><img src="chicken.jpg" width="400" height="300" alt="chicken"><br>A chicken in an alley.</span></a></div>
</ul>
<div id="textarea" style="height:250px;width:220px;font:16px;font:16px/26px Arial, Helvetica, sans-serif;overflow:scroll; position:relative;
top:300px; left:-230px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pulvinar lectus non lectus auctor egestas. Donec at nunc neque. Morbi ornare condimentum lobortis. Nam vehicula urna ac mauris pharetra rutrum. Duis et arcu eget sapien interdum porttitor ut et tortor. Maecenas ultricies dignissim pretium. Integer quis enim metus. Sed enim lacus, eleifend eu euismod volutpat, blandit eu sem. Vestibulum varius purus ut est accumsan pellentesque. Donec quis enim id lectus sollicitudin suscipit at volutpat augue. Curabitur et metus purus. Fusce luctus nunc vitae sapien pharetra id accumsan lectus malesuada.</div>
</div>
</td>
</body>
</html>

<!--HERE BEGINS THE CSS TO MAKE THE GALLERY WORK-->

#gallery {position: relative; }
#gallery ul {list-style-type: none;
    width: 300px; }
#gallery li { display: inline; 
     float: left;
     padding: 10px; }
#gallery img {border-style: solid: 10px; border-color: #333; }
#gallery a { text-decoration: none;
             font-style: none;  
             color: #333; }
#gallery span {display: none; }
#gallery a:hover span {display: block;     
    position: absolute;
    top: 10px;
    left: 300px; 
    text-align: center; }

Answer 1

以下语法无效：您的div应在li标签内打开。

<div id="p1" onmouseover="writetext(dogtext)" ><li><a href="dog.jpg"><img src="dog.jpg" width="100" height="75" alt="dog">
    <span><img src="dog.jpg" width="400" height="300" alt="dog"><br>This is a cool looking dog.</span></a></div>
</li>

你的onmouseover js来电是writetext(dogtext)传入参数。
但是，你的writeText()函数没有列出参数。

如何使用悬停来使用JavaScript提示更改不同div中的文本？

1 个答案: