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

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

javascript html replace

如何使用悬停提示使用JavaScript更改不同div中的文本？,javascript,html,onmouseover,image-replacement,replace,Javascript,Html,Onmouseover,Image Replacement,Replace,所以我建立了这个网页，在左边有一个照片库。理想情况下，将鼠标悬停在它上面应该会更改向右放大的图片（确实如此），但它也应该更改缩略图下方框中的文本。使用，我开始构建在该论坛的代码中，所有内容都正常工作，即使我更改了所有内容的名称。然而，当我把它放在画廊需要的桌子里的小隔间里时，它似乎坏了。文本从不改变我设置为默认值的内容。我尝试更改标题中的实际脚本以响应各个div的鼠标悬停，但这似乎也没有起作用我是否正确使用document.getElementById（）.innerHTML？我唯一能想到的

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

在该论坛的代码中，所有内容都正常工作，即使我更改了所有内容的名称。然而，当我把它放在画廊需要的桌子里的小隔间里时，它似乎坏了。文本从不改变我设置为默认值的内容。我尝试更改标题中的实际脚本以响应各个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; }


单鼠标盖
var dogtext='家犬（犬科狼疮家犬）是灰狼（犬科狼疮）的一个亚种，属于马姆利安目食肉动物科的犬科动物
var cattext=“家猫（猫科动物或猫科动物）是一种小型、通常毛茸茸的家养食肉哺乳动物。”
var parrottext='Parrots，也称为鹦鹉热，是鹦鹉热目86属372种鸟类，分布于大多数热带和亚热带地区。'
var lizardtext='蜥蜴是一种广泛分布的有鳞爬行动物，有5600多种，分布于除南极洲和大多数海洋岛链以外的所有大陆。'
var horsetext='马（Equius ferus caballus）是两个现存的野马亚种之一
var chickentext='鸡（Gallus Gallus domesticus）是一种家养家禽，是红色丛林猫头鹰的一个亚种。'
函数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；
}













Lorem ipsum dolor sit amet，是一位杰出的献身者。目的：探讨枕上直肌与非枕上直肌之间的关系。努克内克的顿涅克。Morbi ornare lobortis调味品。Nam vehicula urna ac mauris pharetra rutrum。两个和两个之间的智囊团。前贵族。整数基斯·伊尼姆·梅特斯。Sed enim lacus、eleifend eu euismod OVERLAPAT、blandit eu sem。化脓性前庭静脉曲张是一种累赘。在奥古斯都的奥古斯都，他是一位独裁者。库拉比图尔和梅特斯·普鲁斯。人类的生命是一种智慧。
#库{位置：相对；}
#库ul{列表样式类型：无；
宽度：300px；}
#画廊展示：内联；
浮动：左；
填充：10px；}
#画廊图片{边框样式：纯色：10px；边框颜色：#333；}
#画廊a{文字装饰：无；
字体样式：无；
颜色：#333；}
#库span{显示：无；}
#画廊a：悬停{显示：块；
位置：绝对位置；
顶部：10px；
左：300px；
文本对齐：居中；}

以下语法无效：应在li标记内打开div

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

函数没有列出参数。

我应该在哪里定义这些参数？