Hi Everyone,

I am Mahesh. I am new in Javascript.

I am creating a web page using XSLT. But for that I need help for javascript.

Problem Statement
*****************************************
There are several <img>s in output html page.
images id are randomly generated using xslt.
in that img tag there is no width attribute.
I need to check the width of the original images before loading.
If image's width is more than 300px then

1] that image should automatically get dispalyed as 300px in width.
2] Below that image there should be a link
like <a href="..." ....>Click here for actual image</a>
3] After clicking on link the original image should be appear.

*****************************************
While trying i reached upto below,

<html>
<head>
<style type='text/css'> .test1{float:center;margin:.5em 0;margin-right:10px;border:0px solid #999; padding:2px; width: 300px}</style>
<script language="JavaScript" type="text/javascript">
function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
var width = newImg.width;

if (width > 300)
{

document.getElementById('img_2').className = 'test1';


}
else
{
alert ('width is: ' + width + ' so Image is correct');
}
}
</script>
</head>
<body bgcolor='#FFFFFF' text='#000000' vlink='#840084' alink='#0000FF' class='text' >
<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; break-before: page;'>
<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;'>
<img id="img_1" alt='Graphic' src="pic23281.jpg" onClick="getImgSize(document.getElementById(id).src);"/>
</div>

<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;'>
<img id="img_2" alt='Graphic' src="test2.jpg" onClick="getImgSize(document.getElementById(id).src);" />
</div>
</div>
</body>
</html>


*****************************************

Is there any way without explistly mentionetion the "id" I can manage which image should be bigger and how to generate an anchor below that image only. Because i cant know each and every time which will be the <img id="">

Thanks in advance.

I am really stuck on this point please help.

Cheers
Mahesh

Hope this will help you up! This example will display all images on the fixed width of 130pixel. The Image i used is included on this demo. See the attached file.

<html>
<head>
<title><!--Sample--></title>
<style type="text/css">
<!--
#wrapper {
      width: 560px;
      margin: 0;
      padding: 0;
      text-align: center;
}
#content {
      width: 580px;
      height: 160px;
      overflow: hidden;
      float: left;
      border: thin solid #999;
      margin: 20px 0 10px 0;
      padding: 0;
}
.txt {
width: 130px;
height: 125px;
float: left;
margin: 6px 4px 0 8px;
padding: 0;
text-align: center;
}
.txt img {
      width: 126px;
      height: 105;
      margin: 0;
      padding: 0;
      float: left;
      border: 2px solid #E5E5E5;
      width/**/:/**/ 130px;
      display: inline;
}
.txt a:link, .txt a:visited {
      margin-top: 7px;
      color: #696969;
      display: block;
      float: center;
      clear: both;
      text-decoration: none;
      font: 13px Verdana, Helvetica, Arial, Sans-serif;
}
.txt a:active, .txt a:hover {
      margin-top: 7px;
      color: #EE0000;
      display: block;
      float: center;
      clear: both;
      text-decoration: none;
      font: 13px Verdana, Helvetica, Arial, Sans-serif;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload = function()
{ _img = document.getElementsByTagName('img');
  _a = document.getElementsByTagName('a');
for ( var x = 0; x <= _img.length; x++ ) { 
_a[x].style.visibility = 'hidden';
if ( _img[x].width > 130) { _img[x].style.width = '130px'; }
 }
}

function show(len) 
{ _a[len].style.visibility = 'visible'; _a[len].href = _img[len].src;
 }

//-->
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(0);" /><a href="#">View Actual Size</a></div>
<div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(1);" /><a href="#">View Actual Size</a></div>
<div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(2);" /><a href="#">View Actual Size</a></div>
<div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(3);" /><a href="#">View Actual Size</a></div>
</div>
</div>
</body>
</html>
Attachments member_pic.gif 9.15 KB

Hi,

Thanks for your prompt and prestigious help.

I have one query;

Can I show those images who are having below or equal to 300px width as it is. and above that can be only having the anchor [and popup with the actual width and height of image].

Please help.

The answer of above question will solve my problem.

the code given above helps me lot.

Thanks again.

If any one found answer for above please replay.

Thanks in advance.

Cheers,
Mahesh

Sure,
you can do that. Use expressions in your css.

Example:

img{
display:expression((this.height<=300)?'block':'none');
}

Hope this solves your problem.

Regards ...

Yes it can be done by the following code

function show(len) 
{  _a[len].style.visibility = 'visible'; _a[len].href = 'javascript:void(0);';
_a[len].onclick = function() {
window.open(_img[len].src,target='_blank','toolbar=no,scrollbars=no,location=no,status=no,menubar=no,width=' + _img[len].clientWidth + ',height=' + _img[len].clientHeight + '\''); }
}

Hi.

Thanks for your help.

I tried with above code but not getting the desired output.

So I modified your above mentioned code it works but not for all images. It takes the last image only.

Don't know how this happen.

Modified code is as below:

<html>
	<head>
		<style type='text/css'> .test1{float:center;margin:.5em 0;margin-right:10px;border:0px solid #999; padding:2px; width: 300px}</style>
		<script language="JavaScript" type="text/javascript">
			function show(len)
			{
			window.onload = function()
			   {
				   _img = document.getElementsByTagName('img');
				   _a = document.getElementsByTagName('a');
				   for ( var x = 0; x <= _img.length; x++ )
				   {
				   	_a[x].style.visibility = 'hidden';
				   	if ( _img[x].width > 300)
				   		{
				   			_img[x].style.width = '300px';
				   		}

				   		_a[len].style.visibility = 'visible';
						_a[len].href = 'javascript:void(0);';
						_a[len].onclick = function()
						{
						window.open(_img[len].src,target='_blank','toolbar=no,scrollbars=no,location=no,status=no,menubar=no,width=' + _img[len].Width + ',height=' + _img[len].Height + '\'');
						}
					}
				}
		}

		</script>
	</head>
	<body bgcolor='#FFFFFF' text='#000000' vlink='#840084' alink='#0000FF' class='text' >
		<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; break-before: page;'>
			<table>
				<tr>
					<td>
						<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;'>
							<img id="img_1" alt='Graphic' src="pic23281.jpg"  onload="show(0)"/><br /><a href="#">View Actual Size</a>
						</div>
					</td>
					<td>
						<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;'>
							<img id="img_2" alt='Graphic' src="test2.jpg" onload="show(1)" /><br /><a href="#">View Actual Size</a>
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div style='margin-left: 0pt; margin-right: 0pt; text-indent: 0pt; margin-top: 8pt; text-align: center;'>
							<img id="img_3" alt='Graphic' src="after_controls_2.gif" onload="show(2)" /><br /><a href="#">View Actual Size</a>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Also it is not showing me the "exact" size of image when opened in popup.

Please suggest what to do in this case.

Cheers,
Mahesh
:-/

Try to assign the actual width or height value of the image in your popup! window.open('url of the image', target='_blank','width=' + theimage.width + ',height=250'); i havnt got time to test the and study this code, but if i get my time, i'l let you know. Good day...

Hi,

Thanks for instant reply..

Applying the actual width and height solved the problem of popup output.

But if i am trying to more than 2 images anchor applies only for last image; instead of applying all the images that satisfy the condition.

******************************************************************
So When code runs automatically all the images [more than 300px width]

1] should converted to 300 pixel.
2] popup should appear to those images only.
3] when click on popup image should appear in actual and exact size of original.
******************************************************************

You help me lot dear.

Thanks for that.

Cheers,
Mahesh

For the final result, here's what ive got! This markup is a valid HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Pop my image</title>
<script type="text/javascript">
function showImage(ref)
{ 
 var thisWidth = [];
 var thisHeight = [];
 img = document.getElementsByTagName('img');
 for (var x = 0; x < img.length; x++) {
 thisWidth[thisWidth.length] = img[x].width;
 thisHeight[thisHeight.length] = img[x].height;
 } window.open(img[ref].src, target='_blank','width=' + thisWidth[ref] + ',height=' + thisHeight[ref] + ',location=no,toolbar=no,menubar=no,scrollbars=no,status=no');   
} 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<a href="javscript:void(0);" onclick="showImage(0);">Image1</a><br>
<img src="friendster_logo.png" alt="image1"><br>
<a href="javscript:void(0);" onclick="showImage(1);">Image2</a><br>
<img src="v15445.gif" alt="image2">
</body>
</html>

Hope this will benefit your current coding. Good day to you...

Hi,

Thanks for your kind attention towards my problem.

While using code, I can manage to see all the images with <a> element, and all images are showing in their original width on HTML page.

Where as I want to see <a> only for those images who are exceeding the width of 300 only. After clicking on that <a> popup should be open with excat image width and height.

I have rewritten the your code as below; please have a look and suggest me; where i am wrong and can manage my correct answer:

In below images are having different widths.

  1. 100 x 163 - original - Should be shows as it is and no <a> below this.
  2. 500 x 375 - Original - Should be shows as 300 in width on HTML page and required <a> below that and when click on <a>; POPUP should be opened with exact width and height. [now it is opening 432 x 324]
  3. 792 x 166 - original - Should be shows as 300 in width on HTML page and required <a> below that and when click on <a>; POPUP should be opened with exact width and height. [now it is opening 432 x 91]
<html>
<head>
<title><!--Sample--></title>
<script type="text/javascript">
<!--
window.onload = function()
{
_img = document.getElementsByTagName('img');
_a = document.getElementsByTagName('a');
for ( var x = 0; x <= _img.length; x++ )
{
_a[x].style.visibility = 'hidden';
if ( _img[x].width > 300)
{
_img[x].style.width = '300px';
}
}
}
function show(len)
{
_a[len].style.visibility = 'visible';
_a[len].href = 'javascript:void(0);';
_a[len].onclick = function()
{
window.open(_img[len].src,target='_blank','toolbar=no,scrollbars=no,location=no,status=no,menubar=no,width=' + _img[len].Width + ',height=' + _img[len].Height + '\'');
}
}
//-->
</script>
</head>
<body>
<img src="pic23281.jpg" id="img0" onmouseover="show(0);" /><br /><a href="#">View Actual Size</a><br /><br /><br />
<img src="test2.jpg" id="img1" onmouseover="show(1);" /><br /><a href="#">View Actual Size</a><br /><br /><br />
<img src="limits.gif" id="img2" onmouseover="show(2);" /><br /><a href="#">View Actual Size</a><br /><br /><br />
</body>
</html>

Please suugest.

Thanks for all your help.

Cheers,
Mahesh

I came up to this as for the final solution... Have fun!
This is a valid xHTML 1.0 Strict

<?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">
/* <![CDATA[ */
var img = document.getElementsByTagName('img');
var links = document.getElementsByTagName('a');
var imageWidth = [];
var imageHeight = [];
function myImage()
{  
 for ( var x = 0; img.length; x++ ) {
img[x].id = 'image' + x;
links[x].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 = 300; }
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>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<body>
<p><img src="image1" alt="image1"  /><br />
<a href="*">Image1</a></p>
<p><img src="image2" alt="image2"  /><br />
<a href="*">Image2</a></p>
<p><img src="image3" alt="image3"  /><br />
<a href="*">Image3</a></p>
</body>
</html>

Oops! I forgot to change it! Try to see line#24 if (document.images && img && t.width < 300) it all means that if your images is less than or lower than 300pixed wide then the corresponding link for that specific image will show up. But what is if the images is greater the 300px then the that images should be converted at exact width of 300px and then show specific link for that image.
For that outcome simply change the above code to this if (document.images && img && t.width > 300) dont forget to mark the thread solved. Good day to you...

Oops! I forgot to change it! Try to see line#24 if (document.images && img && t.width < 300) it all means that if your images is less than or lower than 300pixed wide then the corresponding link for that specific image will show up. But what you want is if the images is greater the 300px then that images should be converted at exact width of 300px and then show specific link for those images.
For that outcome simply change the above code to this if (document.images && img && t.width > 300) dont forget to mark the thread solved. Good day to you...

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 [B]src="limits.gif"[/B] alt="image1" id="image1" /><br />
<a href="*">Image1</a></p>
<p><img [B]src="after_controls_2.gif"[/B] alt="image2"  id="image2"/><br />
<a href="*">Image2</a></p>
<p><img [B]src="pic23281.jpg"[/B] alt="image3"  id="image3"/><br />
<a href="*">Image3</a></p>
</body>
</html>

****************************
Please help.
****************************

cheers,
Mahesh :(

All of my codes is tested before released!
It's working nice with me, since am using Opera 9.6 -

Things gone bad in your code! From this line -->

/* if (img[x].width > 300) { img[x].width = 300px; -- to fix simply copy the code below... */
 
if ( img[x].width > 300 ) { img[x].style.width = '300px'; }

Hi Essential,

Is there any way that can help me.

Please suggest.


Thanks,
Mahesh

This article has been dead for over six months. Start a new discussion instead.