Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resizing an Image and IE6

Status
Not open for further replies.
YellowSwordfish

YellowSwordfish

Programmer
Joined
Jun 17, 2006
Messages
2
Location
GB
Hi - I'm new to Javascript! I found a routine that I wanted to adapt. Simple and lightweight, it resizes a large image to a specified thumbnail size but when clicked on resizes to full size. I adpated it to accept an array of images and it works fine on all browsers except IE6 and I just can't figure out why... If any js guru out there can point me in the right direction I would be grateful.

Here's the simple routine:

Code: 
var saveImgWidth = [];

function scaleImg(imageID, displayWidth)
{
   var currentImg = document.images[imageID];

   if (currentImg.width>(displayWidth) ||     saveImgWidth[imageID]>(displayWidth)) 
	{
   if (currentImg.width==(displayWidth))
	currentImg.width=saveImgWidth[imageID];
   else
      {
         saveImgWidth[imageID] = currentImg.width;
         currentImg.style.cursor = "pointer";
         currentImg.width=(displayWidth);
         currentImg.style.visibility = "visible";
      }
   }
}

I tried it using image 'name' as well and also using getElementByID instead of document.images.

It's called by the image tag onClick and onLoad.

And it's just IE6 that doesn't play nicely.

Anyone able to advise what I am doing wrong?

Thanks and regards
Andy
 
Sort by date Sort by votes
After this line;

Code: 
var currentImg = document.images[imageID];

put an alert in showing the width:

Code: 
alert(currentImg.width);

to see what IE is returning. It may well be that it isn't what you are expecting.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Well well Dan! That's an eye opener!

So either the JS under IE is NOT sizing the images down to the actual width I have specified in the onLoad argument - OR - the OnClick is not reading the correct resized width! Interesting. And yes - this is just IE.

Ok - so a simple change to the code would be to look for less than/greater than which I guess would work. But I am much interested in what's going on?

Are you able to tell me why this is happening now you've steered my hammer towards the correct nail?

andy
 
Upvote 0 Downvote
Are you able to tell me why this is happening now you've steered my hammer towards the correct nail?
Click to expand...

No - because you've not said what the alert is actually returning.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Why use an array?

<html>
<script>
function scaleImg(imageID, oriWidth, newWidth)
{
var newWidth, origWidth;
var image = document.getElementById('first').style;
if (image.width==oriWidth){image.width = newWidth} else {image.width = oriWidth};

}
</script>
<body>
<img src=" id="first" style="width: 55px; height: auto;" onclick="scaleImg('first', '55px', '200px');">
<br>
</body>
</html>

Is this the kind of thing you are trying to acheive?
 
Upvote 0 Downvote
MrG,

There are a few things wrong with your code:

- You've hard-coded the ID, so no longer need the parameter "imageID"

- You've defined origWidth when you never assign any value to it

- You've defined a local variable (newWidth) with the same name as a parameter

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks Dan, you probably guessed I'm fairly new to Javascript and am trying to teach myself. Had some problems getting that script to work, so I changed a few things to help, but didn't change it back. I'll check more carefully next time.

try

<html>
<script>
function scaleImg(imageID, oriWidth, newWidth)
{
var image = document.getElementById(imageID).style;
if (image.width==oriWidth){image.width = newWidth} else {image.width = oriWidth};
}
</script>
<body>
<img src=" id="first" style="width: 55px; height: auto;" onclick="scaleImg('first', '55px', '200px');">
<br>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
913
rogerte
rogerte
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
862
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question Question
Buttons not aligned after another button is clicked
Replies
2
Views
676
gmmastros
gmmastros
AbidingDude
  • Locked
  • Question Question
replaceChild() and Keeping Relationships
Replies
1
Views
1K
AbidingDude
AbidingDude
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top