Member Avatar for jfunchio

I have this code that displays a thumbnail strip and then when you mouse over a thumbnail a bigger images shows up over the strip. The problem is it only is working on some of them and only when the mouse is over a certain part of the picture. When I click them however the picture shows up everytime. I was wondering if anyone could help me with what I'm doing wrong. My html/javascript code is below as well as my css file.

html/javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="pic.css"/>
<script type="text/javascript">
function showIt(imgsrc)
{
document.getElementById('imageshow').s…
document.getElementById('imageshow').s…
}

function hideIt()
{
document.getElementById('imageshow').s…
}
</script>

<title>Untitled Document</title>

</head>

<body>
<div class="slideshow">
<img src="" id="imageshow" style="display:none">
</div>
<div class="slides-nav">
<ul>
<li><a href="#image1"><img src="pic1.jpeg" alt="vuvuzela" onmouseover="showIt(this.src)" onmouseout="hideIt()"/></a></li>
<li><a href="#image2"><img src="pic2.jpg" alt="diski dance" onmouseover="showIt(this.src)" onmouseout="hideIt()"/></a></li>
<li><a href="#image3"><img src="pic3.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image4"><img src="pic4.jpg" alt="football supporter" onmouseover="showIt(this.src)" onmouseout="hideIt()"/></a></li>
<li><a href="#image5"><img src="pic5.jpg" alt="diski dance" onmouseover="showIt(this.src)" onmouseout="hideIt()"/></a></li>
<li><a href="#image6"><img src="pic6.jpg" alt="diski dance" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image7"><img src="pic7.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image8"><img src="pic8.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image9"><img src="pic9.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image10"><img src="pic10.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()"/></a></li>
<li><a href="#image11"><img src="pic11.jpg" alt="waving flags" onmouseover="showIt(this.src)" onmouseout="hideIt()" /></a></li>
<li><a href="#image12"><img src="pic12.jpg" alt="waving flags" /></a></li>
</ul>
</div>

</body>
</html>

CSS:

@charset "utf-8";
.slides-nav{
clear: both;
width: 510px;
margin:0 auto;
position: relative;
overflow: auto;

}

.slides-nav ul{
padding:0;
margin:0;
list-style-type:none;
width: 1680px;
}

.slides-nav li{
float:left;
padding:0;
margin:5px 5px 0 0;
display: inline;
}

.slides-nav li a{
background-color:#2B2B2B;
margin:0;
padding:5px;
display:block;
width: 125px;
height: 75px;
text-decoration:none;
color: #fff;
}

.slides-nav li a:hover, .slides-nav li.on a{
background-color:#990000;
}

.slides-nav img{
width: 125px;
height:75px;
border: none;
padding: 0;
margin: 0;
}

.slideshow img{
margin-left:125px;
width:500px;
height: 300px;
border: none;
}
  • 1 Contributor
  • 1 Reply
  • 168 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by jfunchio
Member Avatar for jfunchio

for some reason the lines in the javascript functions arn't fully showing up they should be
showIt():
('imageshow').src=imgsrc;
('imageshow').style.display='block';

hideIt():
('imageshow').style.display='none';

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.