Many links from a picture

Forum Moderators: open

Message Too Old, No Replies

Many links from a picture

image maps or slices?

Blue_Tetra

7:18 pm on Mar 11, 2002 (gmt 0)

Hello all,

I'm newbie in this forum, and I'm not sure if someone has thrown this question before.

I'm wondering how can I link one picture (.jpg) to many links.

For instance:
I have only one picture in .jpg format, and on the picture, there are some options I want to link : Home, Index, List, Contact us, etc.

My question is, how can I link those options without breaking the picture into pieces ? or should I break it ?

Many thanks,

eeblet

7:23 pm on Mar 11, 2002 (gmt 0)

It seems like you're talking about an image map. You can create one easily in a graphics app such as fireworks or photoshop. If not, you can also do it manually (although you then need to figure out the x-y coords of the hyperlinked areas). hope this helps!

-beth

pageoneresults

7:28 pm on Mar 11, 2002 (gmt 0)

Your mapping code might look something like this...

isNaN

7:30 pm on Mar 11, 2002 (gmt 0)

Homsite Application provides image map template.

Blue_Tetra

7:40 pm on Mar 11, 2002 (gmt 0)

Wow, this forum is great. I got replies just in a few minutes. thanks all !!!

I've never used image map. Lets say that I have a picture file name: Home.jpg. How can I apply this maping code ? Could you please show me the codes example that includes the source of .jpg file.

many thanks.

isNaN

8:02 pm on Mar 11, 2002 (gmt 0)

Blue_Tetra

8:15 pm on Mar 11, 2002 (gmt 0)

Great. Thanks all for helping me.

gethan

8:29 pm on Mar 11, 2002 (gmt 0)

I use Happy Lad image mapper [google.com] - Freeware - and good enough for all my image map needs.

Welcome to WebmasterWorld Blue_Tetra, eeblet and isNaN.

isNaN

8:51 pm on Mar 11, 2002 (gmt 0)

Thanks for a nice welcome

eeblet

9:01 pm on Mar 11, 2002 (gmt 0)

ditto :)

pageoneresults

9:05 pm on Mar 11, 2002 (gmt 0)

One thing we've all failed to tell you and that is the preferred method of doing this. I'm going to suggest that you slice the image and then hyperlink the slices through the normal process. Image maps are not the preferred method.

eeblet

9:09 pm on Mar 11, 2002 (gmt 0)

why do you prefer sliced & hyperlinked imgs to image maps? a lot of our customers have really slow connections, so i use image maps because sliced images tend to load less gracefully (one or two imgs lag behind).

Brett_Tabke

5:55 pm on Mar 12, 2002 (gmt 0)

Go with sliced images with href wrappers. You get the link pop on se's that count insite link pop and decrease dl time for the browser. Just be sure to use the actual image size in the <img> tag (speeds up rendering on many browsers).

pageoneresults

7:26 pm on Mar 12, 2002 (gmt 0)

Thanks Brett! Don't forget to mention that you now have use additional alt tags. Not that it means a whole lot, but coupled with all the other elements, its part of the equation. No spam in the alt either, make sure the alt is definitive of the image it represents. If the button reads blue widgets, then your alt will read blue widgets. You can get a little creative but be careful!

pageoneresults

7:30 pm on Mar 12, 2002 (gmt 0)

so i use image maps because sliced images tend to load less gracefully (one or two imgs lag behind)

I haven't done much experimentation lately with one large graphic and download times. But, I can tell you that browsers handle multiple smaller images much quicker than one large one. I think I'll take the chance of those last two being delayed and at least give the visitor some content to begin scanning.

Gotta be careful with large images. Even though we talk about 56k, very few are seeing above 46k and I think the average is less than that. We all tend to get spoiled here on our high speed connections and we sometimes forget about the majority of our audience's connection speed.

gethan

7:38 pm on Mar 12, 2002 (gmt 0)

Horses for courses and all that.

Imagemaps are fantastic for interactive maps and other specialist applications. Basically anything where a rectangle just isn't good enough.

For menus - nope, instead slice up into individual images as Pageonresults and Brett recommend.

eeblet

7:40 pm on Mar 12, 2002 (gmt 0)

Oh, I agree about watching out for large images. My imagemaps run well under 10K.

(Our company site [which I'm currently rewriting using CSS, so forgive the yucky code], <http://www.radiovoodoo.com>, uses imagemap nav.)

pageoneresults

7:50 pm on Mar 12, 2002 (gmt 0)

Download time: 10 seconds on a clean 56k, not bad at all! I would definitely take advantage of slicing the top navigation and present a more friendly link structure to the spiders and the browsers. I don't use image maps so I cannot give any educated responses on the differences.

By the way, nice clean site!

Hmmm, I didn't know you could assign individual alt tags on image maps. Thats a new one for me. Aw heck, I learn something new here every hour!

eeblet

7:57 pm on Mar 12, 2002 (gmt 0)

thanks for the tip & the compliment. you think it's clean now? wait til you see the CSS-ified version. so clean! i'm in love.

i plead ignorance when it comes to slicing; would i need a table?

jatar_k

8:06 pm on Mar 12, 2002 (gmt 0)

yes
it would probably be hard to do with out one.

eeblet

8:11 pm on Mar 12, 2002 (gmt 0)

I meant a table as opposed to CSS-P. I'm so psyched to be redesigning the site without tables, that I'd need serious convincing to put em back in. I have the CSS version looking fine in all 4.x browsers.

jatar_k

8:13 pm on Mar 12, 2002 (gmt 0)

if you can do it without tables its fine

nice site by the way, tight and clean

pageoneresults

8:15 pm on Mar 12, 2002 (gmt 0)

Hey eeblet, take a look at the site in my profile. Go to the site map and look for the link CSS and Absolute Positioning. View the source code of that page along with the external CSS and that will give you an idea of how to use the CSS to position your sliced images.

eeblet

8:28 pm on Mar 12, 2002 (gmt 0)

Thanks, I've actually done the same thing to our site (we'll launch it in a week or two) -- it's so great to have table-less code! However, given the bugginess of NN 4.x & CSS-P, I'm hesitant to break up our imagemap. Is this a valid concern, do you think?