Hi Essential,
Thanks for This.
But still my problem is not solved......
I used above code
The changes done by me in above are:
1] Instead of
<img
src="image1" OR src="image2" OR src="image3" alt="image1" />
i use actual filename as below
<img src="limits.gif" alt="image1" id="image1" /> and so on
I am using IE 6 SP 2 and FF 3.0
****************************
Now I am facing below problems:
1] Images having more than 300px width are showing as it is on HTML page. [instead of showing 300px in width on html page]
2] Links are generating to all images though they are less [i.e. below 300px width]
3] when click on <a> only goes to next page and not showing the image. [Not opening in another popup with image]
Please suggest where i am wrong and how can I overcome the same.
****************************
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head profile="http://www.w3.org/2005/10/profile">
<title>Get The Image Size</title>
<script type="text/javascript">
<!--
var img = document.getElementsByTagName('img');
var links = document.getElementsByTagName('a');
var imageWidth = [];
var imageHeight = [];
function myImage()
{
for ( var x = 0; img.length; x++ ) {
img[len].id = 'image' + x;
links[len].id = 'show' + img[x].id;
imageWidth[imageWidth.length] = img[x].width;
imageHeight[imageHeight.length] = img[x].height;
links[x].style.visibility = 'hidden';
if ( img[x].width > 300 ) { img[x].width = 300px; }
img[x].onmouseover = function(e) {
e = e ? e : window.event;
t = e.target ? e.target : e.srcElement;
if (document.images && img && t.width > 300) { links['show'+t.id].style.visibility = 'visible'; links['show'+t.id].href = t.src; }
}
links[x].onclick = function() {
for (var i = 0; i < this.id.length; i++) {
var uri = this.href;
var ids = this.id;
var ref = ids.charAt(i); } this.href = 'javascript:void(0);';
window.open(uri,target="_blank",'toolbar=no,scrollbars=no,location=no,status=no,menubar=no,width=' + imageWidth[ref] + ',height=' + imageHeight[ref] + '\'');
if (window.addEventListener)
window.addEventListener('load',myImage,false);
else if (window.attachEvent)
window.attachEvent('onload',myImage);
else if (document.getElementById)
window.onload = myImage;
}
}
}
-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>
<body>
<p><img src="limits.gif" alt="image1" id="image1" /><br />
<a href="*">Image1</a></p>
<p><img src="after_controls_2.gif" alt="image2" id="image2"/><br />
<a href="*">Image2</a></p>
<p><img src="pic23281.jpg" alt="image3" id="image3"/><br />
<a href="*">Image3</a></p>
</body>
</html>
****************************
Please help.
****************************
cheers,
Mahesh
Unsolved 
Offline 
