get image size and how to make changes

Question

mlohokare 0 Newbie Poster

15 Years Ago

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>

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

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

javascript

3 Contributors
15 Replies
265 Views
3 Weeks Discussion Span
Latest Post 15 Years Ago Latest Post by mlohokare

essential 84 Posting Shark

15 Years Ago

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>

sasankasekhar 0 Newbie Poster

15 Years Ago

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

essential 84 Posting Shark

15 Years Ago

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 + '\''); }
}

essential 84 Posting Shark

15 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mlohokare 0 Newbie Poster · Answer 1 · 2008-11-21T18:46:52+00:00

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

mlohokare 0 Newbie Poster · Answer 2 · 2008-11-27T11:23:59+00:00

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
:-/

mlohokare 0 Newbie Poster · Answer 3 · 2008-11-27T19:21:11+00:00

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

essential 84 Posting Shark Featured Poster · Answer 4 · 2008-11-28T11:21:48+00:00

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

mlohokare 0 Newbie Poster · Answer 5 · 2008-12-01T16:54:41+00:00

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]

<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

essential 84 Posting Shark Featured Poster · Answer 6 · 2008-12-02T12:25:14+00:00

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>

essential 84 Posting Shark Featured Poster · Answer 7 · 2008-12-02T13:09:40+00:00

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

essential 84 Posting Shark Featured Poster · Answer 8 · 2008-12-02T13:12:41+00:00

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

mlohokare 0 Newbie Poster · Answer 9 · 2008-12-04T14:59:52+00:00

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 :(

essential 84 Posting Shark Featured Poster · Answer 10 · 2008-12-04T16:09:42+00:00

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'; }

mlohokare 0 Newbie Poster · Answer 11 · 2008-12-08T17:24:16+00:00

Hi Essential,

Is there any way that can help me.

Please suggest.

Thanks,
Mahesh