Web Analytics Made Easy -
StatCounter How To splice a picture in to html? - CodingForum

Announcement

Collapse
No announcement yet.

How To splice a picture in to html?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How To splice a picture in to html?

    i ws wondering how to make a picture fit in to the html like the background but no by puting it in the body tag more like cutting it up and putting it in tables can someone help me?
    meh....

  • #2
    Re: How To splice a picture in to html?

    Originally posted by .:kSaL:.
    like cutting it up and putting it in tables can someone help me?
    .:k...
    just a checkout® this link...
    http://www.google.ca/search?q=image+...-1&hl=en&meta=

    youre looking for just a image® dicer...:O)))
    The New JustaBuster Version 2.0 OR JustaBusta Lite V2.0
    ...just a special® thanx kinda hugs to jkd n' nex ...:O)))

    CommemorateWTC.com --Please lend your support

    Comment


    • #3
      Hmm, well I am no graphics expert, and the only way I ever splice up pictures is using photoshop. So if you have photoshop, I just put up guides where I want to cut up the picture at (goto view>new guide) and then use the marquee tool to select the [art of the picture then cut it. Then just paste it into a new file and there you go, you got one piece of your picture.

      That's how I would do it in photoshop, but seeing as how not too many people have photoshop (too dang expensive) that might not be a good solution for you. Also seeing as how I am tired and hungry I am starting to think that my directions don't make sense....

      Edit: Dang Justame, he is always one step ahead of me with better advice...oh well! Pay attention to his post and not mine!!
      My Site {Mike's Adventures}

      Yikes, forums are almost too much fun.

      Comment


      • #4
        Originally posted by pardicity3
        ....
        Edit: Dang Justame, he is always one step ahead of me with better advice...oh well! Pay attention to his post and not mine!!
        FYI - Justame isn't a 'He', but rather a 'She'....

        .:KSal:., could you tell us the effect / look you are trying to accomplish? With this information we may be able to provide some more suggestions .
        boxer_1
        CodingForum Moderator
        "How did a fool and his money get together in the first place?"

        Comment


        • #5
          i tried using the Slicer Dicer thing, but it doesn't work on my computer. i was wondering if anyone knew how to use it or what was wrong?

          Comment


          • #6
            I appoligize greatly

            Man, I feel like an idiot! Sorry Justame, stupid males and their jumping to conclusions that everyone that they don't know is a guy!
            My Site {Mike's Adventures}

            Yikes, forums are almost too much fun.

            Comment


            • #7
              well here is the link
              http://ksal.netfirms.com/html
              and here is the pic
              htpp://ksal.netfirms.com/html/newsitemaybe.png

              but since the pic is in the body tag it takes to much time to dl it

              the lay out is basicly the same i just want to dice it up so the load time is much faster
              Man, I feel like an idiot! Sorry Justame, stupid males and their jumping to conclusions that everyone that they don't know is a guy!
              lol
              i hope this helps alittle more
              meh....

              Comment


              • #8
                par...
                thats just a ok®...dont worry 'bout it k??? alll is just a forgotten® ya posted it...lol...


                box...:O))) just a ta®...


                .:k...
                htpp://ksal.netfirms.com/html/newsitemaybe.png
                s/b
                http://ksal.netfirms.com/html/newsitemaybe.png

                n' /me is just a wondering® tooo??? just a rent® png's bigger than jpgs??? mayyybe you can just a change® the file type???
                The New JustaBuster Version 2.0 OR JustaBusta Lite V2.0
                ...just a special® thanx kinda hugs to jkd n' nex ...:O)))

                CommemorateWTC.com --Please lend your support

                Comment


                • #9
                  Originally posted by justame
                  par...




                  htpp://ksal.netfirms.com/html/newsitemaybe.png
                  s/b
                  http://ksal.netfirms.com/html/newsitemaybe.png

                  n' /me is just a wondering® tooo??? just a rent® png's bigger than jpgs??? mayyybe you can just a change® the file type???
                  i could change it but i would still want to dice it up in to the html
                  meh....

                  Comment


                  • #10
                    In case you're interested, I reduced it from around 157 Kb (size when I downloaded it) to 22.2 Kb and attached it here for you.

                    Don't know if you'll want it compressed that much, but it's here if you do .

                    What did you make the graphic with? There may be slice options in the program you made it with?.?.?
                    Attached Files
                    boxer_1
                    CodingForum Moderator
                    "How did a fool and his money get together in the first place?"

                    Comment


                    • #11
                      Maybe everyone forgot about SplitImage? ( I did too. hadta do some rummaging to find I still had it installed, hehe)
                      Llamasery Enlightened Internet Strategies
                      "Psychics will lead dogs to your body." --Alleged fortune cookie message

                      Comment


                      • #12
                        Originally posted by .:kSaL:.

                        but since the pic is in the body tag it takes to much time to dl it

                        the lay out is basicly the same i just want to dice it up so the load time is much faster

                        If I may quote from Thomas A Powell, in his book titled..
                        "The Complete Reference - HTML"



                        "Another interesting fact of TCP/IP on web pages is the slow-start mechanism. Many people are very concerned about optimizing images to the smallest size, but anyone who has used the Internet to download large files has seen download rates start slowly and increase to a maximum speed. This is TCP/IP in action. Does a page with one big image load faster that a page with ten small images? The large image beats the ten small ones without trouble."



                        I would sugest that (if download time your main concern) leaving it as one big graphic. (There is a program that resizes the background to fit variable resolutions, but i can't seem to find the link, I know someone here will have it - it is just brilliant).

                        If you want to slice the image into tables as you say, you will need to either use "any" (including Photoshop <5 - but not Photoshop 5.5 and above) graphics program and hand code the links into the table like so....


                        First decide the layout of the table and set obsolute widths for each and every cell. Once you have done that, go to the image and select the piece of the pic that goes into (say) the first cell - lets say its w=20 and h=30. Select this size peice of the image (how will depend on what program you are using), copy this portion and export (or "save As") to the directory. (Lets call it MYPICSLICE1.GIF). Now code the cell accordingly.

                        (Ive put the second slice in to..)

                        <table width... etc>
                        <tr>
                        <td width="20" height="30" align="left"><img src="MYPICSLICE1.gif" width="20" height="30" border="0" alt="" ></td>
                        <td width="220" height="30" align="left"><img src="MYPICSLICE2.gif" width="220" height="30" border="0" alt="" ></td>
                        </tr>
                        </table>

                        Remember, if you have set cell padding or cellspacing above "0", it will change the position of the image., set them to "0" for now until you get the images setup.

                        If the two peices fit together, set them as the background for each cell.


                        OR..........................

                        If you have (or go get) Photoshop 5.5 or above, it will do the slicing in about two minutes.

                        I will send you the sliced version of the optimised image.

                        Hope this helps


                        Tonz
                        Beware, the Cybertooth tiger cometh

                        Comment


                        • #13
                          Try Div

                          You CAN use tables to place the individual pieces of the picture... but try using DIV, it's really simple. There's far less code, and you don't have to worry about borders.

                          <div id="Layer1" style="position: absolute; left: ???; right: ???;>
                          <img src="yourimage.ext"></div>

                          Don't forget you can alter the size of the image within it's tag, just incase you need to get the pieces perfect.
                          DIV is really simple but very worthwhile, especially with the position: absolute;
                          Just watch out for different resolutions, although I've never had any trouble myself, I hear that different resolutions can effect it.

                          Peace \/
                          `Sp00kY`

                          Comment


                          • #14
                            This will be helpful if you try it

                            Originally posted by .:kSaL:. View Post
                            i ws wondering how to make a picture fit in to the html like the background but no by puting it in the body tag more like cutting it up and putting it in tables can someone help me?
                            Cool Mike

                            Mapedit software will work fine. It is most user-friendly imagemap editor and most complete as well. Following are the new features of Mapedit 4.0

                            hotspot alignment,
                            multiple documents,
                            multiple-hotspot
                            multiple-point selections,
                            an improved insert-point feature,
                            "crisp-angle" polygon edge drawing and a great deal more.
                            Last edited by oracleguy; Jun 5, 2008, 01:55 PM.

                            Comment


                            • #15
                              some people in this thread need to learn the difference between slicing and splicing!

                              Comment

                              Working...
                              X