mapping an image in page builder html

Nikki Valentine Odens · June 2009

Has anyone made a map of an image in page builder, one image that has say six different images each with a separate link?

I have tired copying the source from an external page from another site, just to see if it would work - hoping to just change the size and images, but I had no success... advice, hints ... please!

Matt Burghdoff 2 · June 2009

Hi Nikki,

Are you sure that you're looking for image mapping? If you have multiple different images each going to a unique separate link, it sounds like all you need to do is hyperlink those images. Assuming that you are talking about image mapping (having one image be clickable in multiple different sections) I've done this a number of times, both in pagebuilder pages and emails. Here's a direct copy of the code I've used that worked for multiple clickable locations:

The one problem I've had was using multiple images for multiple maps, but I never investigated it heavily since it was just as easy to slice the second image up and hyperlink the components.

I hope this helps.

Nikki Valentine Odens · June 2009

Matt Burghdoff:
Hi Nikki,

Are you sure that you're looking for image mapping? If you have multiple different images each going to a unique separate link, it sounds like all you need to do is hyperlink those images. Assuming that you are talking about image mapping (having one image be clickable in multiple different sections) I've done this a number of times, both in pagebuilder pages and emails. Here's a direct copy of the code I've used that worked for multiple clickable locations:

<IMG height=244 alt="Go the Final Mile" src="..images/content/pagebuilder/12441.jpg" width=250 useMap=#Map border=0 />

<MAP name=Map>

<AREA shape=RECT target=_new coords=0,0,125,122 href="http://support.operationsmile.org/site/TellAFriend" />

<AREA shape=RECT target=_new coords=125,0,250,122 href="http://support.operationsmile.org/site/TR/Events/OneSmile?pg=ffind&fr_id=1070" />

<AREA shape=RECT target=_new coords=0,122,125,244 href="http://www.operationsmile.org/final-mile/" />

<AREA shape=RECT target=_new coords=125,122,250,244 href="https://secure.operationsmile.org/site/Donation2?df_id=1280&1280.donation=form1" /></MAP>

The one problem I've had was using multiple images for multiple maps, but I never investigated it heavily since it was just as easy to slice the second image up and hyperlink the components.

I hope this helps.

This helps, being fairly new to using HTML, I still don't understand how you came up with the coords - size, I would like to create one image that takes up most of the page with five linkable images that aren't all the same size. Does this make sense? This may be a poor example, but I've been asked basically to replicate the format on www.sammoon.com. The large image on their homepage is one image not a table. It looks fairly basic, I just don't know where to start. Thanks for your help!

Nikki Valentine Odens · June 2009

Nikki Valentine Odens:
This helps, being fairly new to using HTML, I still don't understand how you came up with the coords - size, I would like to create one image that takes up most of the page with five linkable images that aren't all the same size. Does this make sense? This may be a poor example, but I've been asked basically to replicate the format on www.sammoon.com. The large image on their homepage is one image not a table. It looks fairly basic, I just don't know where to start. Thanks for your help!

do I need to download some kind of utility to map out the coords?

Matt Burghdoff 2 · June 2009

Nikki Valentine Odens:
This helps, being fairly new to using HTML, I still don't understand how you came up with the coords - size, I would like to create one image that takes up most of the page with five linkable images that aren't all the same size. Does this make sense? This may be a poor example, but I've been asked basically to replicate the format on www.sammoon.com. The large image on their homepage is one image not a table. It looks fairly basic, I just don't know where to start. Thanks for your help!

Quick down and dirty, image mapping is taking one image, then saying that you want one part of that to be clickable and go to one point. In order to tell the computer what should be clickable and where it should go, you need to define the area that is clickable - that's where this code comes in.

"height=244" is how tall your image is, measured in pixels. "width=250" does the same, just telling how wide your image is now instead of how tall. Getting one image that fills EVERY browser and looks good will be nigh-on impossible - and ill-advised - so I'd recommend that you pick a good width for your website that you like (700 pixels wide is a number that we use often, 600 for emails) and go with that.

Once you get the image, you then need to tell the computer what part of it should be clickable - your AREA.

"AREA shape=RECT" tells the computer to create a rectangular clickable area over your image

"target=_new" tells the computer to open the content in a new window once it is clicked on

"coords=0,0,125,122" tells the computer where to actually find the clickable region

The coordinates can be the trickiest part. They are the X and Y pixel coordinates of the two endpoints of your clickable area

this point

X-------------------------------------

] [

-------------------------------------X

and this point (sorry if this looks wonky, I'm making it in a visual editor so the sidelines of the box might not come out looking quite right)

Usually, I just get those out of photoshop, if you're familiar with using it or similar image-manipulation software. The slice tool combined with the ruler helps monumentally with getting the right coords. There are supposedly some free online programs which will also generate coordinates for you, but I've never had the urge/need to use them, so I can't vouch for or point you to any.

Worst-case scenario, if you have an image and just need the coordinates, I could probably slice it up for you.

Nikki Valentine Odens · June 2009

Matt Burghdoff:
Quick down and dirty, image mapping is taking one image, then saying that you want one part of that to be clickable and go to one point. In order to tell the computer what should be clickable and where it should go, you need to define the area that is clickable - that's where this code comes in.

<IMG height=244 alt="Go the Final Mile" src="..images/content/pagebuilder/12441.jpg" width=250 useMap=#Map border=0 />

"height=244" is how tall your image is, measured in pixels. "width=250" does the same, just telling how wide your image is now instead of how tall. Getting one image that fills EVERY browser and looks good will be nigh-on impossible - and ill-advised - so I'd recommend that you pick a good width for your website that you like (700 pixels wide is a number that we use often, 600 for emails) and go with that.

Once you get the image, you then need to tell the computer what part of it should be clickable - your AREA.

<AREA shape=RECT target=_new coords=0,0,125,122 href="http://support.operationsmile.org/site/TellAFriend" />

"AREA shape=RECT" tells the computer to create a rectangular clickable area over your image

"target=_new" tells the computer to open the content in a new window once it is clicked on

"coords=0,0,125,122" tells the computer where to actually find the clickable region

The coordinates can be the trickiest part. They are the X and Y pixel coordinates of the two endpoints of your clickable area

this point

X-------------------------------------

] [

-------------------------------------X

and this point (sorry if this looks wonky, I'm making it in a visual editor so the sidelines of the box might not come out looking quite right)

Usually, I just get those out of photoshop, if you're familiar with using it or similar image-manipulation software. The slice tool combined with the ruler helps monumentally with getting the right coords. There are supposedly some free online programs which will also generate coordinates for you, but I've never had the urge/need to use them, so I can't vouch for or point you to any.

Worst-case scenario, if you have an image and just need the coordinates, I could probably slice it up for you.

Your amazing, thank you! You explain very well & I actually understand so this is a plus plus!! As it looks the coords will be the tricky part, I'll have to get back to you once I play around with it. Again, thank you so much!

mapping an image in page builder html

Comments

Categories