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" "
<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
  • 194 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by jfunchio

Dani AI

Generated

The behavior you describe almost always comes from the preview image appearing on top of the thumbnail strip and immediately stealing the mouse pointer. That makes the browser fire a mouseout on the thumbnail as soon as the preview appears, so the preview flashes or only appears when you hover a tiny area that isn’t overlapped. Clicking works because it doesn’t rely on remaining hovered. For a reliable fix try one of these simple approaches.

Make the preview ignore pointer events so the thumbnails keep their hover state:

/* add a class to the large preview, eg. id="#bigPreview" or class="preview" */
.preview { pointer-events: none; }

Or place the preview so it does not sit above the strip (absolute positioning inside a positioned container):

.slideshow { position: relative; }
.preview {
  position: absolute;
  left: 125px;
  top: 0;
  width: 500px;
  height: 300px;
  z-index: 100;
}

If you need the preview to accept pointer interaction (for example to click it), use a small JavaScript keep-alive: show the preview on the thumbnail enter, hide it only after a short timeout when the pointer leaves both thumbnail and preview. This prevents flicker when the pointer crosses between the two:

var preview = document.getElementById('bigPreview');
var hideTimer = null;

function showPreview(src){
  clearTimeout(hideTimer);
  preview.src = src;
  preview.style.display = 'block';
}
function hidePreviewDelayed(){
  hideTimer = setTimeout(function(){ preview.style.display = 'none'; }, 200);
}

document.querySelectorAll('.slides-nav img').forEach(function(thumb){
  thumb.addEventListener('mouseenter', function(){ showPreview(thumb.dataset.full || thumb.src); });
  thumb.addEventListener('mouseleave', hidePreviewDelayed);
});
preview.addEventListener('mouseenter', function(){ clearTimeout(hideTimer); });
preview.addEventListener('mouseleave', hidePreviewDelayed);

Quick checklist: confirm with devtools that the preview actually overlaps the thumb, check computed z-index/pointer-events, and ensure the anchor block fully contains the image (no invisible overlays). In your case, , the overlay/steal-of-pointer is the most likely culprit — try the pointer-events trick first, then the small JS delay if you want the preview interactive.

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.