Re: Resizing GIFs for HTML?

Subject: Re: Resizing GIFs for HTML?
From: "Wing, Michael J" <mjwing -at- INGR -dot- COM>
Date: Fri, 6 Mar 1998 13:15:12 -0600

> Whoa now, Mike...I hope this was merely a demonstration of a clever
> workaround, rather than a recommendation. I see some killer problems with
doing this in any volume. First off, it's impossible to do this for
hundreds of images in an HTML document. .

No, Tim, he simply said that he can't imagine how he'd do that in HTMl. I
don't see where he was talking about hundreds of images. He was talking
about a single schematic image. I showed him how to do it in HTML for a
single schematic image. What's the beef?

What 's so hard about doing it for hundreds of images? It's not impossible.
It takes some innovative thinking. Watch me!

First, lets change the subprocedure from being one image specific to being
all-images. Therefore, the subprocedures are increase() and decrease().

Second, we no longer need the id tag for each image because all images will
be processed.

Third each image tag needs to call these procedures. Therefore, use a
replace function of a text editor (such as Edit pad) and do the following:

Replace <IMG
With <IMG onmouseover="increase()" onmouseout="decrease()"

Voila! all images will now double in size when the mouse is placed over any
image and decrease when the mouse is no longer over the image.

Here's the code.
=====================================================
<html>
<head>
<title>Test Zoom</title>
<meta>

<script language=VBScript>
sub increase()
Dim I, MyImg
Set MyImg = document.all.tags("IMG")
For I = 0 To document.all.tags("IMG").length -1
MyImg.Item(I).Width = MyImg.Item(I).Width*2
MyImg.Item(I).height = MyImg.Item(I).Height*2
Next
Set MyImg = Nothing
end sub

sub decrease()
Dim I, MyImg
Set MyImg = document.all.tags("IMG")
For I = 0 To document.all.tags("IMG").length -1
MyImg.Item(I).Width = MyImg.Item(I).Width/2
MyImg.Item(I).height = MyImg.Item(I).Height/2
Next
Set MyImg = Nothing
end sub
</script>

<body>
<p><img onmouseover="increase()" onmouseout="decrease()" src="Image1.gif"
alt="" WIDTH="40" HEIGHT="40"></p>

<p><img onmouseover="increase()" onmouseout="decrease()" src="Image2.gif"
alt="" WIDTH="40" HEIGHT="40"></p>
</body>
</html>
=============================================

Don't want all images to increase or decrease? OK, watch this.

First, give the image an identifier and supply the id to the subprocedure
calls.

<p><img id="Image1" onmouseover="increase(Image1)"
onmouseout="decrease(Image1)" src="Image1.gif" alt="" WIDTH="40"
HEIGHT="40"></p>

Second, change the subprocedure to accept an image

sub increase(MyImage)
MyImage.Width = MyImage.Width*2
MyImage.Height = MyImage.Height*2
end sub

The increase procedure now only processes the specified image (in this case,
Image1).

Second, it uses VBScript, something
that Netscape isn't really happy with and older browsers can't
handle

The same subprocedure can be done in Java or JavaScript. But, I have a
feeling you know that.

> Third and most importantly, GIFs aren't really scalable because they're
> bitmaps. Increase their size and you'll rapidly lose the image quality.
> Screen resolutions aren't ideal at the best of times and bitmaps only
> worsen the problem.
>
The issue as presented had nothing to do with image quality. It was that he
said that he could not imagine that HTML could scale the picture. I showed
him that it can. You said that it could not be easily implemented for
hundreds of pictures. I have now showed you (above), that that's also not
true.

> I think what Mike Johnson was talking about was plots, which can be
> rescaled nicely even in PDF. Do the same in PDF with bitmapped schematics
> and you'll get jaggies. There isn't any comparable vector display for HTML
> at all, so the workaround isn't really practical unless you can tolerate a
> great deal of display degradation. Further, a B-size vector isn't as big
> (usually) as a B-size bitmap, which can, in full 24-bit color, easily be
> several meg in size.
>
Oh yeah! Where did he mention plots? I don't see it in his post!

> >>
> >> One thing I really like about PDF images is that they are scalable.
> You =
> >> can zoom in and really see the details - even on a laptop. It is a =
> >> great way to put B-sized schematics on line. I can't imagine how I'd
> do =
> >> that with HTML or anything else for that matter.
> >>
> >> Happy Friday from a snowy Salt Lake City!
> >>
> >> Mike Johnson
> >> OEC Medical Systems
> >> Michaelj -at- oecmed -dot- com
> >>
> >Ok, here's how. The following increases the size of the schematic GIF by
> a
> >factor of 1.5 every time it (the image) is clicked. It decreases the
> size
> >by a factor of 1.5 whenever the image is double-clicked.
> >
> ><img id="MyImage" src="Schematic.gif" alt="My Schematic" WIDTH="40"
> >HEIGHT="40">
> >
> ><script language=VBScript>
> >
> > Sub MyImage_onclick()
> > MyImage.Width = MyImage.Width * 1.5
> > MyImage.Height = MyImage.Height * 1.5
> > End Sub
> >
> > Sub MyImage_dblclick()
> > MyImage.Width = MyImage.Width */1.5
> > MyImage.Height = MyImage.Height / 1.5
> > End Sub
> >
> ></script>
> >
> >
> >Mike
>
MIke

Michael Wing (mailto:mjwing -at- ingr -dot- com)
Principal Technical Writer
Intergraph Corporation; Huntsville, Alabama
http://www.ingr.com/iss/products/mapping/

"Humpty was pushed!"




Previous by Author: Recall: Resizing GIFs for HTML?
Next by Author: Re: Re[2]: Resizing GIFs for HTML?
Previous by Thread: Re: Resizing GIFs for HTML?
Next by Thread: Re: Resizing GIFs for HTML?


What this post helpful? Share it with friends and colleagues:


Sponsored Ads