Slicing an image for web

Admiral Huddy · 22 Dec 2014 at 11:58

Hi,

I wish to slice an image for the web with the html code to bind it together afterwards. Each of the sliced images has a separate url link.

Is there a way in PS elements 12 this can be done?

Thanks

xbenjiiman · 22 Dec 2014 at 12:43

What are you trying to achieve? Do you actually want to slice and separate the image or do you want links for each part of the image?

If it's the latter, you can use image maps.

If not, I'm sure it won't be hard to use separate image tags with links and then join the image back together with some CSS.

MoDe · 22 Dec 2014 at 15:41

I know in Photoshop you can use the slice tool and then save for web.

If you choose to save the images and html via Photoshop, it actually generates the html for you.

So use slice to slice where you want image to be separates, then go to File > Save for Web.

Not used Elements, so not sure if this function is available.

Admiral Huddy · 23 Dec 2014 at 08:36

It doesn't look the feature is available in the Elements version because I have seen exactly what you describe in earlier version of CS.

It's basically one image but i want different URLs for 3 different parts. g on various parts so the image mapping looks interesting. Is that a Mozilla HTML extension? Mind you, i see it's restricted to a certain point on the screen so assumes the image is fixed in one location?

MoDe · 23 Dec 2014 at 09:01

Quick example of mapping with your sig above, it basically works on cordinates, I think it works coords="MARGIN-LEFT, MARGIN-TOP, WIDTH OF HOTSPOT, HEIGHT OF HOTSPOT"

xbenjiiman · 23 Dec 2014 at 09:03

Admiral Huddy said:
It's basically one image but i want different URLs for 3 different parts. g on various parts so the image mapping looks interesting. Is that a Mozilla HTML extension? Mind you, i see it's restricted to a certain point on the screen so assumes the image is fixed in one location?

No, it's part of the W3 spec so it's available in all browsers.

It's not mapped to a point on the screen but to certain points on the image. If you move the image around the page, the points stay fixed to wherever they were on the image.

Made a quick example for you: http://jsfiddle.net/wnp8hkj1/ (the link is over your name text)

Edit: I got beaten to it.

MoDe said:
Quick example of mapping with your sig above, it basically works on cordinates, I think it works coords="MARGIN-LEFT, MARGIN-TOP, WIDTH OF HOTSPOT, HEIGHT OF HOTSPOT"

It works out as follows:

shape="rect" coords="x1, y1, x2, y2"
shape="circ" coords="x, y, r"
shape="poly" coords="x1, y1, x2, y2, ..., xn, yn"

Dup · 23 Dec 2014 at 12:37

The code for putting 3 images inside anchor links is far easier than messing with dodgy image maps!

Just save the image cropped into 3 different ones and then do some quick code.

What is the final destination for said image(s)? Will it be a set size overall?

Image maps are only useful when you want the links to be a shape other than a square or oblong.