View Full Version : image strip
06-13-2003, 01:48 AM
i'm working curently on a project with many images (icons if it makes any difference - actually they are gifs)
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">
<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.
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
Powered by vBulletin® Version 4.2.2 Copyright © 2015 vBulletin Solutions, Inc. All rights reserved.