I use this simple script :
<body>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("img1").src ="images/p2.jpg";
}
function mouseOut()
{
document.getElementById("img1").src ="images/p1.jpg";
}
</script>
<div class="img">
<a target="_blank" href="images/p1.jpg"><img src="images/p1.jpg" alt="Klematis" width="110" height="90" id="img1" onMouseOver= "mouseOver()" onMouseOut="mouseOut()"/></a>
<div class="desc">Add a description of the image here</div>
</div>
The images are pretty big so I adjust them with width and height properties, I thought that if I just call the function I’ll see the bigger image but it dosen’t happen.So what can I do to see an enlarged image with onMouseOver?
I’ll add the style sheet in case it matters:
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
P.S
Don’t mind the <a href thing I just use the raw code from w3 schools…
P.S Maybe I’ll ask another question for this, the problem with the enlarged images is solved but now I want them to show in some kind of block cause now if I have even 4 iamges when i hover the last one the enlarged image goes far away from the starting location, and I want to make it just like gallery block and all images ot be shown there, wthout going outside the borders of the gallery.Any help or maybe another Qs better….
In your css you could do this: