Recently, I ventured into the world of Greasemonkey scripts to learn JavaScript. My script's objective is quite simple - it enlarges a thumbnail image to a popup window when hovering over it with the mouse.
Almost nearing completion, I encountered a few hurdles...
Upon triggering the mouseenter event, a popup window is spawned but the same image also loads on the webpage itself! This seems to hinder the execution of the mouseleave function as well.
Is there a way to dynamically adjust the width and height of the popup based on the dimensions of the loading image?
In the '/thumbs/75x60/' section, I aim to utilize the wildcard * to substitute '75x60' (like * x *) so that thumbnails of any size are affected. How can this be accomplished?
For reference, visit http://jsfiddle.net/JWcB7/6/
The structure of the HTML code is as follows:
<div id="profPhotos">
<a class="profPhotoLink" href="...">
<img width="95" height="130" src=".../thumbs/163x130/8f/fd/588x800_1319044306_9223981.jpg">
</a>
<br>
<a class="profPhotoLink" href="...">
<img width="75" height="60" src=".../thumbs/75x60/f0/d9/604x453_1319044306_9254715.jpg">
</a>
... ...
</div>
The JavaScript snippet is outlined below:
$('#profPhotos .profPhotoLink > img').bind
(
"mouseenter mouseleave", myImageHover
);
function myImageHover (zEvent)
{
if (zEvent.type == 'mouseenter')
{
var imgurl = this.src.toString();
//need to replace '/thumbs/75x60/' part with '/photos/' to get the full size image
var bigimg = imgurl.replace("/thumbs/75x60/", "/photos/");
window.location.href = bigimg;
popup = window.open(bigimg,"popwindow","menubar=0,resizable=0,status=0,titlebar=0,toolbar=0,scrollbars=0,location=0,width=600,height=800") //how to set the width and the height dynamically
}
else
{
popup.close();
}
}