Imagemapping in Photoshop CS3or4?

[ModernRevolutions]

Ok I want to create image mapping in Photoshop CS3 or CS4 (i have both) However, I have no idea how to do it. Here is a site that has the image mapping that i would like it to be like: http://www.meganfoxfans.net/

[Snookerman]

Here's a good tutorial to get you started:
http://www.entheosweb.com/website_design/image_maps.asp
It's actually not that difficult, just play around with it for a few minutes and you'll have no problems.

Good luck!

[auntnini]

Unless Photoshop has a new gimmick (got nothing from Help), you only use image editing program to get SHAPE COORDINATES of areas in image. The rest is HTML: usemap="#mapName" attribute in <img> tag, tied to <map name="mapName"></map> tag encompassing the specified
<area shape="areaShapeType" coords="area coordinates" ...>

Snookerman's link to http://www.entheosweb.com/website_design/image_maps.asp is great if you have DREAMWEAVER (which makes getting shape coordinates easy). If you don't have Dreamweaver, here are some other links http://www.htmlcodetutorial.com/imag...msupp_220.html http://www.w3schools.com/TAGS/tag_map.asp -- with a big quote from http://www.elated.com/articles/creating-image-maps/ explaining the basics:

The usemap attribute ... add the usemap attribute to the standard img tag for the image... <img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" usemap="#shapes"/>
... the usemap="#shapes" attribute ... associates the image map with the image. ... The other half of the image map is the map definition itself. In this definition, we tell the browser where the hot spots are in the image, and what the hot spots need to link to.

The map is defined using the <map></map> tag. ... The general syntax for the map element is:

<map name="map-name">

<area shape="area shape"
coords="area coordinates"
href="area hyperlink" or nohref="nohref"
target="hyperlink target"
title="area title"
alt="alternate text"/>

<area shape="area shape" ...

</map>

So, each image map is given a name (map-name), and one or more area tags to specify the hot spots in the image.

The area tag has the following attributes:
shape="rect | circle | poly | default"

Specifies the shape of the area. Possible values are:

* rect (a rectangular shape),
* circle (a circular shape),
* poly (an arbitrary polygon, with 3 or more points), or
* default (which represents the remaining area of the image not defined by any area tags).

coords="area-coordinates" ... Specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the shape attribute:

Shape Coordinates
rect coords="x1,y1,x2,y2"
(The top left and bottom right corners of the rectangle)
circle coords="x,y,r"
(The center and radius of the circle)
poly coords="x1,y1,x2,y2,x3,y3,..."
(The corners of the polygon)

Note that all coordinate values are relative to the top left corner of the image. In other words, the top left corner always has coordinates (0,0). Note also that the default shape type does not need any coordinates.

Other than navigation in top image (bad idea), did not see much by way of IMAGEMAP at http://www.meganfoxfans.net/

[Snookerman]

Ohh, I just saw CS3 or 4 and image maps and assumed you were talking about Dreamweaver but now I see it's Photoshop you have..

If you don't have Dw there are some online tools that will help you out, here is a good one:
http://www.maschek.hu/imagemap/imgmap

Good luck!

[auntnini]

For PHOTOSHOP should have mentioned: use Window>INFO panel (F8) to get shape coordinates. In the middle of INFO panel, note the X and Y readings under cursor. Rectangle "rect" four shape coordinates are X1 Y1 at top left corner and X2 Y2 at bottom right corner. As a visual reference for X Y readings in INFO panel, could drag out a rectangular shape or shift-drag square shape with Marquee (M) tool over area to be specified as clickable shape "hot spot" in image.

Getting X Y center point and RADIUS of a circle is tricky. Make 1- pixel mark with Brush (B) at center point for circle. Shift-M toggle to Oval marquee tool. Click center point of circle and Shift-Option-Drag Oval tool to create circular marquee from center point. Shift-I toggle to Ruler tool, click center point and drag Ruler to edge of circular marquee for radius length (L in upper right of INFO panel) reading.

Dreamweaver makes all of this so much easier.

A List Apart at http://www.alistapart.com/articles/imagemap/ has CSS version of image map. Also see wonderful Stu Nicholls' CSS at http://www.cssplay.co.uk/articles/imagemap/.

http://www.dynamicdrive.com/forums/i...attach/jpg.gif