How To splice a picture in to html?

[.:kSaL:.]

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?

[justame]

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

[pardicity3]

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

[boxer_1]

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 .

[semisonic]

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?

[pardicity3]

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!

[.:kSaL:.]

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

[justame]

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

[.:kSaL:.]

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

[boxer_1]

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?.?.?

[welo]

Maybe everyone forgot about SplitImage? ( I did too. hadta do some rummaging to find I still had it installed, hehe)

[Tonz]

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

[Sp00kY]

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 \/

[selena]

Originally Posted by .:kSaL:.

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.

[brazenskies]

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