So I have this webpage built that has a photo gallery on the left side. Ideally, hovering over it should change the picture that blows up to the right (which it does) but it should also change the text in the box underneath the thumbnails. Using this guide I was directed to earlier, I began constructing.
Everything works properly in the code on that forum, even when I change the names of everything. However, when I put it inside the div within the table needed for the gallery, it seems to break. The text never changes from what I set as default. I tried changing the actual script in the header to respond to the mouseover of individual divs, but that didn’t seem to do the job either.
Am I using the document.getElementById().innerHTML correctly? The only things I can think of are that changing the script broke it, or that by placing the JavaScript divs that identify the pictures in a different div than the output text box, I made it unhappy. Could any of you point me in the right direction, please?
<!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; }
The following has invalid syntax: Your div should be opened inside your li tag.
Your onmouseover js call is
writetext(dogtext)which is passing in a parameter.However, your
writeText()function doesn’t have a parameter listed.