Here is a tuorial , shows the image in pop-window on MouseOver.
Also has more functions.
<html>
<head>
<title>Image resizing Tutorial - Pravin Asar</title>
</head>
<body>
<script language="javascript">
function getImageObj () {
var bigObj = document.getElementById('b
return (bigObj);
}
var sw ;
function OpenCenWindow (imgURL, winname, width, height) {
var x = 0.5 *(window.screen.width - width);
var y = 0.5 *(window.screen.height - height);
var posStr = ", screenX=" + x + ", screenY=" + y;
if (typeof (sw) != 'undefined') {
sw.close();
}
if (document.all) {
posStr = ", left=" + x + ", top=" + y;
}
var pStr = 'resizable, status=no,width=' + width + ', height=' + height +
', alwaysRaised=1, addressbar=no, titlebar=no, toolbar=no, menubar=no, status=no';
sw = window.open ("", winname,pStr +posStr );
imgSize = GetImageSize(imgURL, width, height);
var imgStr = "<img src=\"" + imgURL.src + "\" width=\"" + imgSize.width + "\">";
sw.document.write (imgStr);
}
function CloseWindow() {
if (sw) { sw.close(); }
}
function GetImageSize (curImg, viewWidth, viewHeight)
{
var scale = 1.0;
var width, height;
width = curImg.width;
height = curImg.height;
var xscale=viewWidth/width;
var yscale=viewHeight/height;
if (parseFloat(xscale) > parseFloat(yscale))
{
scale = yscale;
width = parseInt(width*scale);
height = parseInt(height*scale);
}
else
{
scale = xscale;
width = width*scale;
height = height*scale;
}
this.width = width;
this.height = height;
return (this);
}
function SetImageSize (curImg, viewWidth, viewHeight)
{
var scale = 1.0;
var width, height;
width = curImg.width;
height = curImg.height;
var xscale=viewWidth/width;
var yscale=viewHeight/height;
if (parseFloat(xscale) > parseFloat(yscale))
{
scale = yscale;
width = parseInt(width*scale);
height = parseInt(height*scale);
}
else
{
scale = xscale;
width = width*scale;
height = height*scale;
}
curImg.width = width;
curImg.height = height;
}
</script>
<table border="1" bordercolor="#000000">
<tr>
<td>
<a href="javascript:void(0);"
</td>
<td>
<a href="javascript:void(0);"
</td>
<td>
<a href="javascript:void(0);"
</td>
</tr>
<tr>
<td colspan="3" style="text-align:center; vertical-align:middle;">
<img style="vertical-align:midd
</td>
</tr>
<tr>
<td colspan="3">bring mouseover image see window popup <br>and<br> mouse out will close the pop-up window.</td>
</tr>
</table>
</body>
</html>
Main Topics
Browse All Topics
by: pravinasarPosted on 2007-09-12 at 06:34:26ID: 19876071
<img src="imag1.gif" onmouseover="this.width = 200;" onmouseout="this.width=100