943,573 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > get image size and how to make changes
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Nov 14th, 2008
0

get image size and how to make changes

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
mlohokare is offline Offline
22 posts
since Oct 2008
Permalink
Nov 14th, 2008
0

Re: get image size and how to make changes

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.
javascript Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <title><!--Sample--></title>
  4. <style type="text/css">
  5. <!--
  6. #wrapper {
  7.       width: 560px;
  8.       margin: 0;
  9.       padding: 0;
  10.       text-align: center;
  11. }
  12. #content {
  13.       width: 580px;
  14.       height: 160px;
  15.       overflow: hidden;
  16.       float: left;
  17.       border: thin solid #999;
  18.       margin: 20px 0 10px 0;
  19.       padding: 0;
  20. }
  21. .txt {
  22. width: 130px;
  23. height: 125px;
  24. float: left;
  25. margin: 6px 4px 0 8px;
  26. padding: 0;
  27. text-align: center;
  28. }
  29. .txt img {
  30.       width: 126px;
  31.       height: 105;
  32.       margin: 0;
  33.       padding: 0;
  34.       float: left;
  35.       border: 2px solid #E5E5E5;
  36.       width/**/:/**/ 130px;
  37.       display: inline;
  38. }
  39. .txt a:link, .txt a:visited {
  40.       margin-top: 7px;
  41.       color: #696969;
  42.       display: block;
  43.       float: center;
  44.       clear: both;
  45.       text-decoration: none;
  46.       font: 13px Verdana, Helvetica, Arial, Sans-serif;
  47. }
  48. .txt a:active, .txt a:hover {
  49.       margin-top: 7px;
  50.       color: #EE0000;
  51.       display: block;
  52.       float: center;
  53.       clear: both;
  54.       text-decoration: none;
  55.       font: 13px Verdana, Helvetica, Arial, Sans-serif;
  56. }
  57. -->
  58. </style>
  59. <script type="text/javascript">
  60. <!--
  61. window.onload = function()
  62. { _img = document.getElementsByTagName('img');
  63.   _a = document.getElementsByTagName('a');
  64. for ( var x = 0; x <= _img.length; x++ ) { 
  65. _a[x].style.visibility = 'hidden';
  66. if ( _img[x].width > 130) { _img[x].style.width = '130px'; }
  67.  }
  68. }
  69.  
  70. function show(len) 
  71. { _a[len].style.visibility = 'visible'; _a[len].href = _img[len].src;
  72.  }
  73.  
  74. //-->
  75. </script>
  76. </head>
  77. <body>
  78. <div id="wrapper">
  79. <div id="content">
  80. <div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(0);" /><a href="#">View Actual Size</a></div>
  81. <div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(1);" /><a href="#">View Actual Size</a></div>
  82. <div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(2);" /><a href="#">View Actual Size</a></div>
  83. <div class="txt"><img src="images/member_pic.gif" id="img0" onclick="show(3);" /><a href="#">View Actual Size</a></div>
  84. </div>
  85. </div>
  86. </body>
  87. </html>
Attached Thumbnails
Click image for larger version Name: member_pic.gif Views: 783 Size: 9.2 KB ID: 8156  
Last edited by essential; Nov 14th, 2008 at 9:28 pm.
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Nov 21st, 2008
0

Re: get image size and how to make changes

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
mlohokare is offline Offline
22 posts
since Oct 2008
Permalink
Nov 21st, 2008
0

Re: get image size and how to make changes

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

Example:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. img{
  2. display:expression((this.height<=300)?'block':'none');
  3. }

Hope this solves your problem.

Regards ...
Reputation Points: 10
Solved Threads: 3
Newbie Poster
sasankasekhar is offline Offline
24 posts
since Jan 2007
Permalink
Nov 22nd, 2008
0

Re: get image size and how to make changes

Yes it can be done by the following code
javascript Syntax (Toggle Plain Text)
  1. function show(len) 
  2. {  _a[len].style.visibility = 'visible'; _a[len].href = 'javascript:void(0);';
  3. _a[len].onclick = function() {
  4. 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 + '\''); }
  5. }
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Nov 27th, 2008
0

Re: get image size and how to make changes

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
mlohokare is offline Offline
22 posts
since Oct 2008
Permalink
Nov 27th, 2008
0

Re: get image size and how to make changes

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...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Nov 27th, 2008
0

Re: get image size and how to make changes

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
mlohokare is offline Offline
22 posts
since Oct 2008
Permalink
Nov 28th, 2008
0

Re: get image size and how to make changes

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

javascript Syntax (Toggle Plain Text)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <head>
  3. <title>Pop my image</title>
  4. <script type="text/javascript">
  5. function showImage(ref)
  6. { 
  7.  var thisWidth = [];
  8.  var thisHeight = [];
  9.  img = document.getElementsByTagName('img');
  10.  for (var x = 0; x < img.length; x++) {
  11.  thisWidth[thisWidth.length] = img[x].width;
  12.  thisHeight[thisHeight.length] = img[x].height;
  13.  } window.open(img[ref].src, target='_blank','width=' + thisWidth[ref] + ',height=' + thisHeight[ref] + ',location=no,toolbar=no,menubar=no,scrollbars=no,status=no');   
  14. } 
  15. </script>
  16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  17. <meta http-equiv="Content-Script-Type" content="text/javascript">
  18. </head>
  19. <body>
  20. <a href="javscript:void(0);" onclick="showImage(0);">Image1</a><br>
  21. <img src="friendster_logo.png" alt="image1"><br>
  22. <a href="javscript:void(0);" onclick="showImage(1);">Image2</a><br>
  23. <img src="v15445.gif" alt="image2">
  24. </body>
  25. </html>
Hope this will benefit your current coding. Good day to you...
Featured Poster
Reputation Points: 114
Solved Threads: 138
Posting Shark
essential is offline Offline
973 posts
since Aug 2008
Permalink
Dec 1st, 2008
0

Re: get image size and how to make changes

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
mlohokare is offline Offline
22 posts
since Oct 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Regarding XML convertion
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Help me ->very son->CheckBox





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC