Images

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I want an image to start out very small and then grow larger as it comes
closer to the screen and then return to the smaller version.
 
"Closer to the screen?"

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer

Presuming that God is "only an idea" -
Ideas exist.
Therefore, God exists.
 
Probably wants that effect, an image that grows bigger (as in getting
closer). Sounds like a Flash application to me.
 
Hi Emmanuel,

Luck for you, it's Saturday. ;-)

A few notes on what I've written for you:

To make it easy for you, I put the entire script into the same table cell as
the image. Unless you know what you're doing, at least use the table and/or
cell with the script inside it as well as the image, without making any
changes to it. You can put the table into another table, or anywhere it a
page. You should notice that there is no space or line breaks between the
end of the image and the script, and between the end of the script and the
end of the table cell. Changing this may affect the layout.

I put the image in a table with 1 cell set to center alignment, so that it
would always be centered in the cell. The table is set to 100% width so that
it will occupy the full width of whatever you put it into, and the image
will be centered in the table, which is invisible.

I used inline CSS styles to do the table alignment and the size of the
image. The CSS style of the image is used to initialize global variables.
You will probably want to change it to the size of whatever image you use.
Change the URL (src) of the image too! Make sure it's pointing to your image
location.

The image size is initialized at the start to 1X1 pixel. You can change this
to whatever starting size you like, but be advised that it will grow to the
size specified in the inline style for the image, and shrink to the smallest
possible non-zero size, repeatedly.

There are a couple of global variables that affect the speed of the growing
and shrinking. "frameRate" is the interval (in milliseconds) that determines
how often the "growShrink" function will be called. It is initialized to 200
ms (1/5 of a seond). Making it much smaller may not make the animation
smoother; it takes time for the browser to redraw. But you can tweak it.
"pix" is the number of pixels that the image will change in size both
horizontally and vertically. Making this small increases smoothness of
animation, but also slows it down. Again, feel free to tweak it.

The "id" attribute of the image is used to identify the image to be changed.
Don't change it!

If you paste it into an HTML document in FrontPage, the image will appear as
a red "x" because the image isn't there. But when you change the "src" path
to the image, to one that is in your web, it will appear in the FrontPage
design view.

This can be used with any size and dimension of image. It doesn't have to be
square. The initialization makes note of the smaller of the width and
height, and uses this for calculation.

<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1"
style="text-align: center">
<tr>
<td>
<img border="0" src="images/chutney(large).gif"
id="resizable" style="width: 256px; height: 256px"><script
type="text/javascript"><!--

var frameRate = 200;
var pix = 2;

var imgWidth, imgHeight;
var testDimension;
var grow= true;

function fromStyle(stylePx)
{
return parseInt(stylePx.toLowerCase().substr(0, stylePx.indexOf("px")));
}

function toStyle(value)
{
return value + "PX";
}

function growShrink(imageId)
{
var w, h;
var pic = document.getElementById(imageId);
w = fromStyle(pic.style.width);
h = fromStyle(pic.style.height);

w += (grow ? pix : -pix);
h += (grow ? pix : -pix);
pic.style.width = toStyle(w);
pic.style.height = toStyle(h);
if (w >= testDimension || h >= testDimension) grow = false;
else if (w <= pix || h <= pix) grow = true;
}
var el = document.getElementById("resizable");
imgWidth = fromStyle(el.style.width);
imgHeight = fromStyle(el.style.height);

testDimension = Math.min(imgWidth, imgHeight);
el.style.width = "1px";
el.style.height = "1px";
setInterval("growShrink('resizable')", frameRate);
// --></script></td>
</tr>
</table>

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer

Presuming that God is "only an idea" -
Ideas exist.
Therefore, God exists.
 
Back
Top