As I work on creating a basic gallery page with html and css, everything seemed to be running smoothly. However, upon testing it in Google Chrome and IE, the onmouseover function is not responding as expected. The idea is for a larger image to display in the bottom box when hovering over a thumbnail, but it's just not working.
Seeking advice once again after receiving helpful suggestions previously. Can someone offer a simple javascript code that can be implemented to fix this issue? While the provided code works fine, I'd prefer a javascript-only solution if possible.
$(function(){
$('.thumbnails img').hover(function(){
$('#preview').attr('src',$(this).attr('src'));
},null);
});
Grateful for any assistance!
<!DOCTYPE html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
background: #222;
margin-top: 100px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 100px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
</style>
</head>
<body>
<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg" alt="Image Not Loaded"/>
</div></br>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>