AJAX

get image size and how to make changes

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2008

Posts: 22

Reputation: mlohokare is an unknown quantity at this point

Solved Threads: 0

mlohokare

Offline

Newbie Poster

get image size and how to make changes

Nov 14th, 2008

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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: get image size and how to make changes

Nov 14th, 2008

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.

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<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>
<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>

Last edited by essential; Nov 14th, 2008 at 9:28 pm.

Attached Images

•

Join Date: Oct 2008

Posts: 22

Reputation: mlohokare is an unknown quantity at this point

Solved Threads: 0

mlohokare

Offline

Newbie Poster

Re: get image size and how to make changes

Nov 21st, 2008

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

•

Join Date: Jan 2007

Posts: 24

Reputation: sasankasekhar is an unknown quantity at this point

Solved Threads: 3

sasankasekhar sasankasekhar is offline

Offline

Newbie Poster

Re: get image size and how to make changes

Nov 21st, 2008

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

Example:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
img{
display:expression((this.height<=300)?'block':'none');
}
img{
display:expression((this.height<=300)?'block':'none');
}

Hope this solves your problem.

Regards ...

IF SOMEONE FEELS THAT THEY HAD NEVER MADE A MISTAKE IN THEIR LIFE, THEN IT MEANS THEY HAD NEVER TRIED A NEW THING IN THEIR LIFE

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: get image size and how to make changes

Nov 22nd, 2008

Yes it can be done by the following code

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
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 + '\''); }
}
function show(len) 
{  _a[len].style.visibility = 'visible'; _a[len].href = 'javascript<b></b>: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 + '\''); }
}

•

Join Date: Oct 2008

Posts: 22

Reputation: mlohokare is an unknown quantity at this point

Solved Threads: 0

mlohokare

Offline

Newbie Poster

Re: get image size and how to make changes

Nov 27th, 2008

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:

Help with Code Tags

(Toggle Plain Text)

<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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: get image size and how to make changes

Nov 27th, 2008

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...

•

Join Date: Oct 2008

Posts: 22

Reputation: mlohokare is an unknown quantity at this point

Solved Threads: 0

mlohokare

Offline

Newbie Poster

Re: get image size and how to make changes

Nov 27th, 2008

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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: get image size and how to make changes

Nov 28th, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<!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>
<!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...

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Oct 2008

Posts: 22

Reputation: mlohokare is an unknown quantity at this point

Solved Threads: 0

mlohokare

Offline

Newbie Poster

Re: get image size and how to make changes

#10

Dec 1st, 2008

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.

100 x 163 - original - Should be shows as it is and no <a> below this.
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]
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]

Help with Code Tags

(Toggle Plain Text)

<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