Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: image strip

  1. #1
    New Coder
    Join Date
    Jun 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question image strip

    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?
    Attached Thumbnails Attached Thumbnails image strip-strip.gif  

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Use an image map:

    Code:
    <html>
    <body>
    <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">
    
    </map>
    </body>
    </html>
    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?
    Shawn

  • #3
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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



    <edit>
    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

    so
    coords="left,top,radius"
    </edit>
    Last edited by shlagish; 06-13-2003 at 06:03 AM.
    Shawn

  • #4
    New Coder
    Join Date
    Jun 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 are some explanations (but on this link are some java piece of code only ...)
    Last edited by dragoon; 06-14-2003 at 01:36 AM.

  • #5
    New Coder
    Join Date
    Jun 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    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">
    </div>
    </div>

    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!

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    nice
    Shawn


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •