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

#11

Dec 2nd, 2008

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

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

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

•

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

#12

Dec 2nd, 2008

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

•

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

#13

Dec 2nd, 2008

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

•

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

#14

Dec 4th, 2008

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.

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

Help with Code Tags

(Toggle Plain Text)

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

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

•

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

#15

Dec 4th, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
/* 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'; }
/* 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'; }