Stitching Together images on a website

Discussion in 'Community' started by Computer_Phreak, Apr 13, 2003.

  1. Computer_Phreak macrumors 6502

    Joined:
    Jul 15, 2002
    #1
    Ok,
    I have several images (about 12) that I want to combine on a web page, sorta like at www.ambitiouslemon.com. The images were all originally one, and I separated them to allow some parts to be hyperlinks.

    P.S.: How do you like my logo?

    [​IMG]
     
  2. scem0 macrumors 604

    scem0

    Joined:
    Jul 16, 2002
    Location:
    back in NYC!
    #2
    I have always wondered the same thing! It will be quite hard
    using purely HTML. What editor do you use, if any? Dreamweaver
    is good in my limited opinion.

    Oh, and being a big fan of the Matrix, I love your logo ;).
     
  3. Computer_Phreak thread starter macrumors 6502

    Joined:
    Jul 15, 2002
    #3
    I use dreamweaver, but the closest i can get the images is about 1/16th of an inch apart. Maybe if i used tables, and filled the tables with a background picture???:confused:
     
  4. rice_web macrumors 6502a

    rice_web

    Joined:
    Oct 25, 2001
    Location:
    Minot, North Dakota
    #4
    Check the source code; I bet you have non-breaking spaces or plain-old spaces in between the images. Oh, and Dreamweaver will distort things a bit; try previewing the page in a web browser.
     
  5. losfp macrumors regular

    Joined:
    Jul 16, 2002
    Location:
    Sydney
    #5
    safest way is definitely in a table with cellpadding and cellspacing set to 0.

    alternatively you could go for an image map - that way you don't have to slice the image.
     
  6. scem0 macrumors 604

    scem0

    Joined:
    Jul 16, 2002
    Location:
    back in NYC!
    #6
    yeah, just set the cell spacing/padding to 0 and the spaces
    in between will be removed, but it might not come out perfect
    when you preview. :(;)
     
  7. shakespeare macrumors 6502

    Joined:
    Apr 29, 2002
    Location:
    Portland, Maine
    #7
    If you draw the different images as "slices" using the slice tool of Photoshop or ImageReady (it looks like a scalpel, I think), you can then choose "Save to web" and, in the options, choose HTML and images. You'll be given an HTML file, the source of which will have a table with working links to your image files. You can copy that source to your real HTML document - the only inconvenience is that you may have to edit the links in the source (if you want the images in a different folder).
     
  8. tazo macrumors 68040

    tazo

    Joined:
    Apr 6, 2003
    Location:
    Pacific Northwest, Seattle, WA actually
    #8
    Re: Stitching Together images on a website

    first thing you can do is reduce the size of that logo-otherwise say adios to all dial up users.

    couldnt you do what u want using a table with no borders or table spacing?
     
  9. Mr. Anderson Moderator emeritus

    Mr. Anderson

    Joined:
    Nov 1, 2001
    Location:
    VA
    #9
    You can do it in photoshop or imageready really simply, but from experience, I've avoided slicing images up if I can and use image maps. It keeps the image together and avoids worrying about what it will look like in different browsers - cause chances are it will be different and you won't be able to get it perfect in every browser.

    But you best bet is to use flash and aviod the issues altogether.

    D :D
     
  10. Rower_CPU Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #10
    Accessibility

    One thing to keep in mind...

    If you the slightest possibility of vision impaired users viewing your site, image maps and Flash aren't the best to use. Flash MX adds some needed accessibilty options, but they're not all there.

    Slices with ALT tags will give people using screen readers the ability to navigate your site. :)
     
  11. shakespeare macrumors 6502

    Joined:
    Apr 29, 2002
    Location:
    Portland, Maine
    #11
    I have never had problems with the display of Photoshop/ImageReady-generated code. If I don't mess with the code, it always shows up right.

    You'll notice that Apple themselves uses the table-with-images approach to make big graphics out of little files: see the navigation bar at the top of their page, for instance.
     
  12. rainman::|:| macrumors 603

    rainman::|:|

    Joined:
    Feb 2, 2002
    Location:
    iowa
    #12
    imagemaps are nice, but the server you're using has to support them-- which can be a downfall...

    i've often wondered about doing something like this in pure HTML... it's the way i prefer to work, but things like this always leave me reaching for a wysiwyg editor...

    pnw
     
  13. Mr. Anderson Moderator emeritus

    Mr. Anderson

    Joined:
    Nov 1, 2001
    Location:
    VA
    #13
    I'm of the opinion now that for my Flash sites if you don't have the plugin then you're missing out. I'm not going to worry about it.

    And that's one thing you'll have to consider by using flash. But it really does give you so much more flexibility and I don't think I'm going to be doing much regular html for my sites any more.

    D
     

Share This Page