Javascript getting image width

Codewalkers Forums Sponsor:

You eat, breathe and sleep innovation. Build your mobile intelligence with BlackBerry® experts this July. Register Today!

June 4th, 2004, 02:40 AM

jeremywilken

Join Date: Apr 2007

Location: Central Illinois soon to be moved

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

Send a message via Yahoo to jeremywilken

Javascript getting image width

How do I get the width and height of an image dynamically using javascript? I want to resize the image, but I also want to make sure the image doesn't exceed a certain size. Any ideas? Thanks. Client-side things don't seem to be my forte.

June 4th, 2004, 02:48 AM

CodeKadiya

Join Date: Apr 2007

Location: Colombo,Sri Lanka

Posts: 2,313

Time spent in forums: < 1 sec
Reputation Power: 4

RE: Javascript getting image width

Code:

function getImageWidth(myImage) {
	var x, obj;
	if (document.layers) {
		var img = getImage(myImage);
		return img.width;
	} else {
		return getElementWidth(myImage);
	}
	return -1;
}

function getImageHeight(myImage) {
	var y, obj;
	if (document.layers) {
		var img = getImage(myImage);
		return img.height;
	} else {
		return getElementHeight(myImage);
	}
	return -1;
}

June 4th, 2004, 03:19 AM

jeremywilken

Join Date: Apr 2007

Location: Central Illinois soon to be moved

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

RE: Javascript getting image width

thanks for the speedy reply and code, just wondering, how do I access the value of the height and width?

June 4th, 2004, 03:23 AM

CodeKadiya

Join Date: Apr 2007

Location: Colombo,Sri Lanka

Posts: 2,313

Time spent in forums: < 1 sec
Reputation Power: 4

RE: Javascript getting image width

Code:

imageWidth = getImageWidth("path/to/image");
imageHeight = getImageHeight("path/to/image");

June 4th, 2004, 04:03 AM

jeremywilken

Join Date: Apr 2007

Location: Central Illinois soon to be moved

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

RE: Javascript getting image width

I can't seem to get this to work. An object is expected and I have IE, so

Quote:

return getElementWidth(myImage);

could be a problem? Should I show my whole script to explain what I'm trying to do? Thanks again.

June 4th, 2004, 06:25 AM

CodeKadiya

Join Date: Apr 2007

Location: Colombo,Sri Lanka

Posts: 2,313

Time spent in forums: < 1 sec
Reputation Power: 4

RE: Javascript getting image width

Yes, post the full code here. I didn't understand you much

June 4th, 2004, 07:50 AM

Dani

Join Date: Apr 2007

Posts: 7

Time spent in forums: < 1 sec
Reputation Power: 0

RE: Javascript getting image width

You probably just want to make sure you're page doesn't get all messed up.

What I did recently was use the <div> tag and overflow:hidden
That breaks the image off if it's to big. I also make the image clickabel if people want to see the actual image.
Here's an example:

<td width="230" valign="top">
<div style="overflow:hidden; width:230px; height:30px;"><a href="#" onMouseDown="window.open('showimage.php?image=$image','image',' toolbar=0,scrollbars=0,location=0,statusbar=0,menu bar=0,resizable=0')"><img src="../images/$image" border="0"></a></div>
</td>

Regards Dani

June 4th, 2004, 01:39 PM

jeremywilken

Join Date: Apr 2007

Location: Central Illinois soon to be moved

Posts: 16

Time spent in forums: < 1 sec
Reputation Power: 0

RE: Javascript getting image width

Ok heres the code, and just a note the photos[], title[], and text[] arrays are actually pulled from a database using PHP, so I can change which album of photos is displayed easily. This is the whole page after it is rendered by PHP, I took out a lot of the array values to shorten it also.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>the jeremy wilken project :: slideshow :: Prom 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var title=new Array()
var which=0

//var preloadedimages=new Array()
//for (i=0;i<photos.length;i++){
//preloadedimages[i]=new Image()
//preloadedimages[i].src=photos[i]
//}

photos[0]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_000.JPG"
text[0]=""
title[0]="Index Photo"
photos[1]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_001.JPG"
text[1]="Jeremy by his car, how exciting"
title[1]="Jeremy by car"
photos[2]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_003.JPG"
text[2]="Jeremy again stands near the motor transit vehicle"
title[2]="Jeremy still by car"
photos[3]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_004.JPG"
text[3]="Most of the gang, some haven't arrived yet"
title[3]="Gang photo 1"
photos[4]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_005.JPG"
text[4]="Another of part of the gang, we look sharp"
title[4]="Gang photo 2"
photos[5]="http://www.wilkenwebdesign.com/archives/2004/prom_images/prom_006.JPG"
text[5]="Travis with his date, looking all Monopoly-man-like"

fresh = 'yes'
function getImageWidth(myImage) {
var x, obj;
if (document.layers) {
var img = getImage(myImage);
return img.width;
} else {
return getElementWidth(myImage);
}
return -1;
}

function getImageHeight(myImage) {
var y, obj;
if (document.layers) {
var img = getImage(myImage);
return img.height;
} else {
var img = getImage(myImage);
return img.height;
}
return -1;
}

function keeptrack(){
tracker=which+1
imgWidth=getImageWidth(photos[tracker])
if (fresh == 'yes') {
if (imgWidth>680) {
percentOver=imgWidth/680
percentDifference=2-percentOver
percentReduce=Math.floor(percentDifference*680)
imgWidth=' width="'+percentReduce+'"'
imgHeight=' height="'+percentReduce+'"'
}
//if (imgHeight>490) {
//percentOver=imgHeight/490
//percentDifference=2-percentOver
//percentReduce=Math.floor(percentDifference*680)
//imgWidth=' width="'+percentReduce+'"'
//imgHeight=' height="'+percentReduce+'"'
//}
window.status="Prom 2004 :: Image "+(tracker)+" of "+photos.length
document.all.label.innerHTML="<font size='1'><b>Album</b>: Prom 2004 </font>::<font size='1'> <b>Image</b>: "+(tracker)+" of "+photos.length+"</font> :: <b>Title</b>: <font size='2' color='#00CC00'>"+title[which]+"</font>"
document.all.text.innerHTML=text[which]
}
document.write('<img src="'+photos[0]+'"'+imgHeight+' name="photoslider" style="filter:revealTrans(duration=2,transition=23)"'+imgWidth+' border=0>')
}


function backward(){
if (which>0){
which--
document.images.photoslider.src=photos[which]
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
keeptrack()
}
}

function backward_ten(){
if (which>9){
for (z=0;z<10;z++) {
which--
}
document.images.photoslider.src=photos[which]
keeptrack()
}
}

function forward_ten(){
if (which<photos.length-9){
for (z=0;z<10;z++) {
which++
}
document.images.photoslider.src=photos[which]
keeptrack()
}
}

</script>
<style type="text/css">
.albumOptions {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
</style>
<script language="JavaScript">
function go()
{
	box = document.navigation.SelectAlbum;
	selected = box.options[box.selectedIndex].value;
	if (destination) location.href = "slideshow.php?album="+selected;
}
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="label" style="position:absolute; top:557; left: 280; font-family:verdana; font-size:12; color:#FFFFFF;"></div>
<div id="text" style="position:absolute; width: 500; top:470; left: 45; font-family:verdana; font-size:12; color:#FFFFFF;"></div>
<div id="albumSelect" style="position:absolute; top:3; left: 280; font-family:verdana; font-size:10; color:#FFFFFF;">
<form name="nav">
<b>Select Album</b> :: <select class="albumOptions" name="selected" size="1">
<option>:: Select Album ::</option>
<option value="Prom 2004" SELECTED>Prom 2004</option>
</select>
    <input class="albumOptions" type="button" value="View" 
onClick="jumptolink(document.nav.selected)">
</form>
<script type="text/javascript">
function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
window.location="slideshow.php?album="+selectedopt.value
}
</script>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="800">
  <tr> 
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="18" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="14" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="36" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="50" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="50" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="50" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="500" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="82" height="1" border="0"></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0"></td>
  </tr>
  <tr> 
    <td colspan="8"><img name="slideshow_r1_c1_2" src="/archives/slideshow_imgs/slideshow_r1_c1.gif" width="800" height="30" border="0" alt=""></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="30" border="0"></td>
  </tr>
  <tr> 
    <td colspan="2"><img name="slideshow_r2_c1_2" src="/archives/slideshow_imgs/slideshow_r2_c1.gif" width="32" height="486" border="0" alt=""></td>
    <td colspan="5">

<div id="stage" style="position:static; top: 30; left 30; width:680; max-height:490; max-width:680; color:white; z-index:2; text-align:center; background-color: #000000; layer-background-color: #000000; border: 0px none #000000;"> 
<script>

keeptrack()

</script>
      </div>
	
	</td>
    <td><img name="slideshow_r2_c8" src="/archives/slideshow_imgs/slideshow_r2_c8.gif" width="82" height="486" border="0" alt=""></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="486" border="0"></td>
  </tr>
  <tr> 
    <td colspan="8"><img name="slideshow_r3_c1" src="/archives/slideshow_imgs/slideshow_r3_c1.gif" width="800" height="24" border="0" alt=""></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="24" border="0"></td>
  </tr>
  <tr> 
    <td><img name="slideshow_r4_c1_2" src="/archives/slideshow_imgs/slideshow_r4_c1.gif" width="18" height="46" border="0" alt=""></td>
    <td colspan="2"><a href="#" onClick="backward(); return false"><img name="slideshow_r4_c2_2" src="/archives/slideshow_imgs/slideshow_r4_c2.gif" width="50" height="46" border="0" alt=""></a></td>
    <td><img name="slideshow_r4_c4_2" src="/archives/slideshow_imgs/slideshow_r4_c4.gif" width="50" height="46" border="0" alt=""></td>
    <td><img name="slideshow_r4_c5_2" src="/archives/slideshow_imgs/slideshow_r4_c5.gif" width="50" height="46" border="0" alt=""></td>
    <td><a href="#" onClick="forward(); return false"><img name="slideshow_r4_c6_2" src="/archives/slideshow_imgs/slideshow_r4_c6.gif" width="50" height="46" border="0" alt=""></a></td>
    <td colspan="2"><img name="slideshow_r4_c7_2" src="/archives/slideshow_imgs/slideshow_r4_c7.gif" width="582" height="46" border="0" alt=""></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="46" border="0"></td>
  </tr>
  <tr> 
    <td colspan="8"><img name="slideshow_r5_c1" src="/archives/slideshow_imgs/slideshow_r5_c1.gif" width="800" height="14" border="0" alt=""></td>
    <td><img src="/archives/slideshow_imgs/spacer.gif" alt="" name="undefined_2" width="1" height="14" border="0"></td>
  </tr>
</table>
</body>
</html>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: