|
Image Pop
Script
Place this below your <body>
tag:
//START CODE
<script>
<!--
var thumb = null;
function showThumbnail(which,e)
{
thumb = document.getElementById('thumb');
if( thumb && thumb.style.visibility == 'hidden' )
{
thumb.style.left = e.pageX ? pageXOffset + e.clientX - 0 :
document.body.scrollLeft + e.x + 0;
thumb.style.top = e.pageY ? pageYOffset + e.clientY :
document.body.scrollTop + e.y;
thumb.style.visibility = 'visible';
thumb.innerHTML = '<img src="' + which + '">';
}
}
function closeThumbnail()
{
if( thumb )
thumb.style.visibility = 'hidden';
}
function MM_displayStatusMsg(msgStr) { //v1.0
status=msgStr;
document.MM_returnValue = true;
}
//-->
</script>
<div id="thumb" style="position: absolute; visibility: hidden; border:
1px solid #FFC5E3"></div>
//END CODE
Place this anywhere on your site:
//START CODE
<img border="0" src="images/yoursmallimage.jpg"
width="100" height="120" onclick="showThumbnail('images/yourbigimage.jpg',event)"
onMouseOut="closeThumbnail()">
//END CODE
|
images/yoursmallimage.jpg |
:replace this with your small thumb |
|
images/yourbigimage.jpg |
: replace
this with the path to your big image |
|
onclick |
: you can
replace it with
onmouseover , |
|
