View Full Version : image strip

06-13-2003, 01:48 AM
hi there

i'm working curently on a project with many images (icons if it makes any difference - actually they are gifs)

i want to save them as a strip image. i know it is possible to get each image from the strip using javascript (i know because I saw this once but i don't know where); also i've searched with google and i didn't found any example with an working script.

i need this for because i have a lot of files and will help the project running smoothly (will not initiate a HTTP request for every image representing an icon)

anyone can help me?

06-13-2003, 05:46 AM
Use an image map:

<img width=160 height=140 src="my_image.gif" border=0 ismap usemap="#map">

<map name="map">
<area name="icon1" href="/one.html" coords="20,20,70,60">

<area name="icon2" href="/two.html" coords="90,20,140,60">

<area name="icon3" href="/tree.html" coords="20,80,70,120">

<area name="icon4" href="/four.html" coords="90,80,140,120">


To change what the link is, you change the coords (coordinates)

Now, for icon1:
One point is put at top: 20 left: 20 (of the image)
and another point is pue at top: 70 left: 60.

These two points form a rectangle that acts as a particular link (in this case, the box formed links to /one.html)

There are ways to do other shapes than rectangles (Any other polygone I think, you can also make a circle) but I don't quite remember how...

Is this what you where looking for?

06-13-2003, 06:00 AM
Ok, I found an example of an image map, one of the shapes is a rectangle, but the two others are circles, the code is also written on that page, you can change whatever you like with the code and see the result on that same page, change the values of the coords attribute to see what happens :)

oh yeah, the link..

The link is here (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_areamap)

The coords for the circle shape are:
first numer, position from left of a point
second number, position from the top of that same point (It is now placed
third number, radius of the circle


06-14-2003, 01:34 AM
sorry, this isn't what I was looking for.

i want all the incons to save them in a one big file. and I want to acces a part of it (one icon) for every associated file; i want to slice it (using javascript or whatever ...)

here (http://www.cogs.susx.ac.uk/local/support/doc/java/tutorial/ui/drawing/improvingImageAnim.html) are some explanations (but on this link are some java piece of code only ...)

06-14-2003, 02:57 AM
finally got my answer for !

<div id="container" style="position:absolute; clip: rect(0px, 30px, 30px, 0px)">
<div id="image" style="position: absolute; top: 0; left: 0">
<img src="strip.gif" border="0">

with clip: rect(0px, 30px, 30px, 0px) I'm clipping the layer to the first 30 px from top and left (the params are set for right and bottom according CSS specs.)

and using the second div I'm moving the image to get the piece I want!

06-14-2003, 06:27 AM
nice:cool: :thumbsup: