Hi,
Basically I have a thumbnail of an image that is resized to 100x100pixels in HTML (the image itself is actually bigger). When I hover over the small thumbnail I would like the original size file to appear so the user can get a better view at the picture.
I have looked all over for a good tutorial on this as I don't just want to use somebody elses code to do it.
Is there any tips or links anybody could provide me with to help me along with this?
Thanks.
Simple example:
<img src="pic_thumb.jpg" onmouseover="this.src='pic_large.jpg'">Whatever you choose to do, don't forget to leave some non-JS method to view the larger picture for users who have Javascript disabled.
bradgrafelman;10881067 wrote:Simple example:
<img src="pic_thumb.jpg" onmouseover="this.src='pic_large.jpg'">Whatever you choose to do, don't forget to leave some non-JS method to view the larger picture for users who have Javascript disabled.
Oh! That was suprisingly simple. The only issue with that bit of code is that when you move the mouse away from the image it doesn't return to its original state. Could you please provide me with the code to do that?
Thanks very much, you've been a massive help.
<img src="pic_thumb.jpg" onmouseover="this.src='pic_large.jpg'" onmouseout="this.src='pic_thumb.jpg'">bradgrafelman;10881070 wrote:<img src="pic_thumb.jpg" onmouseover="this.src='pic_large.jpg'" onmouseout="this.src='pic_thumb.jpg'">
Thanks your reply, I was hoping it would be something similar like that.
Unfortunately though it doesn't seem to work, and the image doesn't change at all when you hover over it?
You will need to use javascript. More specifically make that onmouseover and onmouseout call a javascript function.
I am assuming this is just for one or two pictures if it is for more, like a picture gallery on your site, it will cause hugh load times.
Now this is just a quick copy of some code I used just the other day. This is setup so that when the user mouses over the thumbnail a new image pops up over top of everything and then disappear when they mouses out.
First all your html needs to be wraped in a <div> tag if you haven't yet, and a z-index set for that div.
<html>
<body>
<div style="z-index: 1;">
<!-- all your code here-->
</div>
</body>
</html>
Then somewhere in your code you need to place the large image inside of a <div> that is, well, technically invisible.
<div style="position: absolute; top: -900px; left: -900px; display: none; z-index: 2;" id="lgimage">
<img src="lg-image.jpg" width="400" height="400" border="0">
</div>
Then on your thumbnail image you do this
<img src="sm-image.jpg" width="100" height="100" border="0" onMouseover="showimage('lgimage', event)" onMouseout="hideimage('lgimage', event)">
then in the header of the html place these functions
<script language="Javascript" type="text/javascript">
function showimage(imageid, event) {
var agent = navigator.userAgent.toLowerCase();
var scrollp = [0, 0];
if (typeof document.documentElement.scrollTop != "undefined" && document.documentElement.scrollTop > 0 ){
scrollp = [document.documentElement.scrollLeft,
document.documentElement.scrollTop];
}
else if (typeof document.body.scrollTop != "undefined" ){
scrollp = [document.body.scrollLeft,
document.body.scrollTop];
}
else if (typeof window.pageYOffset != "undefined" ){
scrollp = [window.pageXOffset,
window.pageYOffset];
}
var cursorp = [0, 0];
if(typeof event.pageX != "undefined" && typeof event.x != "undefined"){
cursorp[0] = event.pageX + 50;
cursorp[1] = event.pageY - 300;
}
else if (agent.indexOf("gecko") != -1){
cursorp[0] = event.clientX + scrollp[0] + 50;
cursorp[1] = event.clientY + scrollp[1] - 300;
}
else{
cursorp[0] = event.clientX + scrollp[0] + 50;
cursorp[1] = event.clientY + scrollp[1] - 300;
}
document.getElementById(imageid).style.top = cursorp[1] + "px";
document.getElementById(imageid).style.left = cursorp[0] + "px";
document.getElementById(imageid).style.display = "block";
}
function hideimage(imageid, event) {
document.getElementById(imageid).style.top = "-900px";
document.getElementById(imageid).style.left = "-900px";
document.getElementById(imageid).style.display = "none";
}
</script>
Now that first function is bit more that just a mouse over and the image appears. It actually makes the image appear based on were your mouse pointer is at on the screen and it is designed to work in a majority of browsers. Hence the reason you see cursorp[0] and cursorp[1] set repeatedly in the first function.
Also in that first function the + 50 and - 300 are just there to set the image position better, relative to the mouse pointer and can be changed in any direction.
Any way that maybe a bit of an over kill for what you wanted by like I said it is just a quick copy and past of what I used just the other day. If you need something simpler all of it can easily be simplified.
Thanks very much Krik, that was a massive help.
When I hover over the image it seems random where the larger one appears on the screen, is there anyway to make it appear in a fixed position? For example in the middle of the screen? Thanks mate.
Yea the randomness is caused because that code places the image based on your mouse pointers position.
Its a real easy fix jsut change the entire first function to this
function showimage(imageid, event) {
document.getElementById(imageid).style.top = "20px";
document.getElementById(imageid).style.left = "100px";
document.getElementById(imageid).style.display = "block";
}
The "20px" and the "100px" can be changed to any number to get it in the center of your screen. But to get it centered on their screens is quite abit more difficult as we do not know how wide their screen is.
To remdy that your math will need to be up to par.
screen.width will get the sreens with and screen.height will get, you guess it, screen hieght.
So I am going to assume the picture width is 400 x 400
function showimage(imageid, event) {
var halfwidth = (screen.width / 2);
var halfheight = (screen.height / 2);
var picwidthcenter = (halfwidth - 200);
var picheightcenter = (halfheight - 200);
document.getElementById(imageid).style.top = picheightcenter + "px";
document.getElementById(imageid).style.left = picwidthcenter + "px";
document.getElementById(imageid).style.display = "block";
)
Real simple brake down. We find the center of the screen with halfwidth and halfheight. Now if we position it at that number the top left corner will be in the center. So we want the center of the pictuer in the center so we subtract half of the pictures width and height from halfwidth and halfheight and that is the numbers need to center the pic.
Now if you have multiple pictures that could be in there you may need to dynamicaly find the images width. But hat is a quite bit more exaustive an expalnation and it doesn't sound like that is what you have. If it is, javascript has some very nice image handling abilities and there are tons of good turtorials on it. And of course you can always ask here.
Thanks so much for your help, you've been amazing.
I have one last question. I have 5 thumbnails on my page that I want to be able to zoom in to. That code works perfectly for the first, but how would I adapt it for the next 4? I just tried it myself and when you hovered over the first image, all of the bigger versions came up haha.
Thanks so much!
It should go without saying that all of the images should have different IDs....
Weedpacket is right but with one small change.
The example I originally gave the div holds the id so make sure the divs that your large images are in all have different ids.
As well you will need to make sure the onMouseover and onMouseout events in each of the small images has the right id set. Replace "lgimage" with the id of the correct large image.
I shoule also point out a little bit of wasted code on the example. Since the images position is no longer base the mouse pointers position the "event" in the onMouseover and onMouseout and in both the functions is not needed. So if you want you can strip it and the preceeding comma "," out to clean up the code a bit.
If for some reason this causes a problem or your not sure what I mean they can be left with no harm.
thanks krik...
