Image mapping?

Topic

New Reply

How can (should?) I do an image map?

I can do it in something like HTML Robohelp but I don’t have that at home… and this isn’t for a help project.

I have a graphic that I’d like the user to click on and have each different section of the graphic display a different page.

Once I get that, I’d like to put a mouse over for each of the different sections of the graphic.
Can I do this?? Do I need a program to do it? Is there an easier way to accomplish what I want to do?

have fun

Reply | Quote

Replies

It just so happened that I just created my first page with an image map and mouse-overs. The image map was created in FrontPage and it was very easy, just point and click. The JavaScript for doing the mouse-over was put in by hand.
As this is the first time I’ve ever done this, I’m no expert but here’s the page, maybe it can help as an example of one way to do it.

By the way, the animation is just an animated gif and has nothing to do with the image-map & javascript.

BTW, sometimes IE doesn’t work right with this page the first time and it has to be reloaded or IE has to be restarted. It seems to happen when a mouse-over happens before the page is fully loaded. If anybody has any idea how to fix this, I’d appreciate it.

Reply | Quote

You SO rock!!!
That is a very cool page you have there… and no error messages for me on IE…

What is it called in FrontPage? Is there a quick and dirty tutorial for it? I hate Front Page but I’ll use it for something as complicated as this!! (I use it for complex tables too) it just adds too much of it’s own junk for my liking.

thanks a whole lot!!
have fun

Reply | Quote

Thanks for the compliments!

FrontPage isn’t too bad once you tame it (set your compatibility settings to NS/IE 3.0) so that it doesn’t put in all the extra CSS and Style [censored].

The image map is pretty straight forward. In FP, it’s called a “hot spot.” In FrontPage, click on your image and make sure your Pictures toolbar is visible (View->Toolbars->Pictures). The toolbar will probably be at the bottom of your screen. The three buttons depicting a Rectangle, Circle and Polygon are all for making “hot spots.” It should be fairly self-explanatory at that point. After you’ve made your map, you can always go to HTML view and grab the HTML and take it back to your usual html-editor (though most likely it would have a way to do this as well).
Good luck.

—
Wow, the word c r a p was automatically censored above — talk about being politically correct?!

Reply | Quote

Hey there… I could just you!!
I can’t wait to get home and try it… alas, I have a concert to go to tonight and will be collecting more pics for this page I’m creating. I’ll post the url here when I finish so you can say “Hey, I helped her do that!”
Thank you SO much!!

have fun

Reply | Quote

Watch it don’t get me too excited!
You’re very welcome.
Yes, please post the URL when you’re ready & have fun at the concert.

Reply | Quote

then maybe I WON’T post the page…

I’m going to a concert for a band my friends are in – Sharkys Machine – here in Jersey. I did their website and have been procrastinating on adding a Sharkettes page (of which I am one) I’m finally getting around to it and want to make it look REALLY cool. I’ll post the url when it’s done… in the mean time here’s the band’s page as it is now…
http://www.sharkysmachineonline.com

You’ll notice I have to go to the concert tonight to get a new photo of the band too… Halloween just doesn’t cut it anymore…
have fun

Reply | Quote

I’m in the process of creating the whole navigation thing… your suggestions and instructions are working like a charm!! Thanks again… I’ll post the link when it’s completed
have fun

Reply | Quote

BTW, I found out this week that the image maps are generated using the key word “POLYGON” which is not compatible with the HTML specification (even though IE and NS understand it).
I would do a search and replace in HTML mode and change
all POLYGON to POLY when you’re done defining your map.
Of course it’s also a good idea to validate your HTML at http://www.w3c.org.

mc

p.s. Leif, thanks for the javascript source pointer.

Reply | Quote

Re: If anybody has any idea how to fix this, I’d appreciate it

The javascript source has this example to load an image before showing it. Might be of help.

Reply | Quote