• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

image mapping - Hotspots

I am using Frontpage 98 (and i can't change software) and i am working on a page that shows the area around the school in map form. I have scanned in the map and pasted it into frontpage etc... but what i'd really like to do i make it an interactive map.

Basically i want to create several hotspots on the map itself (which are highlighted by transparent colours), from here, the user can hover or click on these and be presented with a dialog box which a small description of directions, and also a magnified view of that section.

I have played around with this, i know how to create hotspots but i do not know how to:

A. Make the hotspots more visible on the map, which some coloured highlighting and possibly numbered.
B. Make it so that when the user clicks the hotspot, it doesn't take them to another page (ideally i'd like a dialog box of some kind to show up when they hover over it. Alternatively, it will take them to the relevant section of a full description on the same page, but i don't know how i'd use bookmarks to do this as i've never used them before)


Like i said i am using frontpage 98, i can't use any other software.I have all the basic 98 era office stuff like photo editor. Any help appreciated. I have only 50 points to put on this question. thanks in advance
0
Taylor17
Asked:
Taylor17
  • 6
  • 3
1 Solution
 
northernchillCommented:
One method to provide visual cues to the hot spots is to modify the map in a graphics editor to add the visual aspects you want for the hot spots.  The shortcoming here is that now the image itself is modified and if you want to change the hot spots you will need to alter the image again.

As for the pop ups, add a title attribute in your image map for each link with the description you want:
< ... href... title="Your popup text here">

To use a bookmark:
Where you want to bookmark to link to add:
<a name=MyBookmark></a>
in your image map have the href=#MyBookmark.

So now your image map will have
< ... href=#MyBookmark title="Your popup text here">
for each entry (of course you will have a unique Bookmark name for each position in the page you wish to link to.
0
 
Taylor17Author Commented:
Hi, thanks for the help

I modified the image for the highlights so thats done.

But i don't know what you mean when you mention adding attributes to my image map. I don't know how to do it and i can't find where i should put them. I'm not really an IT expert and i'm new to web design :)

But what i did try and do was to create the bookmarks, but i found that in specifying to hotspots hyperlinks i could select a bookmark (in the image hotspots properties menu under 'Optional', the URL changes to #MAP BM 3 (the bookmark) when i choose). But when i try it out in preview mode, i click on the hotspots, and the screen centers on the map, but all the text (including the bookmarks) vanish's leaving only the map on screen. Any ideas why this happens?
0
 
northernchillCommented:
Can you post the tex of the image map?  To view the text, switch to HTML view in Frontpage. There you will find text
beginning with <map ...>
and ending with </map>

Copy all text in between and post to this thread.  Then you will get more detailed and informative responses.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Taylor17Author Commented:
i think this is what you're looking for. there was no map tag just this, i assume this is the map:

<p><!--webbot bot="ImageMap"
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text=" (287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
polygon=" (235,544) (195,684) (212,679) (236,680) (220,627) (242,551) (246,460) (268,461) (272,354) (298,360) (348,339) (353,328) (351,320) (273,345) (264,345) (252,365) (251,428) (262,440) (260,447) (248,448) (237,451) (231,505) (236,540) #MAP+BM+4"
polygon=" (592,247) (506,291) (450,300) (453,309) (461,313) (448,330) (398,310) (387,311) (388,318) (402,318) (441,337) (452,340) (468,316) (471,305) (559,297) (569,293) (579,285) (603,248) (602,251) #MAP+BM+3#_self"
polygon=" (544,52) (561,64) (574,87) (571,141) (598,205) (594,244) (602,250) (611,206) (579,144) (584,89) (576,66) (567,47) (552,39) #MAP+BM+2#_self"
polygon=" (140,68) (131,104) (217,110) (430,93) (484,113) (515,100) (521,41) (544,51) (552,39) (512,22) (508,59) (469,58) (429,75) (273,94) (231,78) #MAP+BM+1#_self"
src="map_ma1.gif" alt="wpe3.jpg (68958 bytes)" border="0"
style="background-color: rgb(0,255,255); color: rgb(255,0,255)"
u-originalsrc="map_ma1.gif" --></p>


0
 
northernchillCommented:
In the text properties add the text you want to popup when the mouse is hovered over the hotspot.

Now for the bookmarks:

Have you defined the bookmark locations in the document?  If so, the name you have given them should appear where it says #MAP+BM+...

0
 
Taylor17Author Commented:
Thanks again for the help :) i have one more problem:

I sorted out the bookmarks problem by setting the target frame (doh) and now i can click on my hotspots and it will take me to the relevant place, my problem now is when i click a hotspot, it works and everything but it disapeers, as in, when i scroll back up, the map has gone but is replaced with something like: [Microsoft Image Map Item] in bold. I cannot remember the exact thing it says, i am at home now but my web is on the school network so i can't access it until tomorrow.

btw: One thing that may have caused this was when i created a Printer Friendly version, i used the same image but deleted the hotspots. I saved it as a different image but i have only noticed this problem after that (maybe it was there before but i didn't notice. Any more help appreciated  
0
 
Taylor17Author Commented:
Also, i think the HTML has some kind of Microsoft generator stuff now, like ''Microsoft Image Map generator'' or something in green, the kind of stuff that appears in the HTMl behind bots and add-ins.
0
 
Taylor17Author Commented:
[FrontPage Image Map Component]

Thats what it says. Please, help me out here
0
 
Taylor17Author Commented:
[FrontPage Image Map Component]

Thats what it says after i use the hotspots, and here is the map HTMl currently:

<p><!--webbot bot="ImageMap"
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
text="(287,329) (341, 351) {} {Times New Roman} 10 B #000000 CT 0  "
polygon="(235,544) (195,684) (212,679) (236,680) (220,627) (242,551) (246,460) (268,461) (272,354) (298,360) (348,339) (353,328) (351,320) (273,345) (264,345) (252,365) (251,428) (262,440) (260,447) (248,448) (237,451) (231,505) (236,540) #MAP+BM+4"
polygon="(592,247) (506,291) (450,300) (453,309) (461,313) (448,330) (398,310) (387,311) (388,318) (402,318) (441,337) (452,340) (468,316) (471,305) (559,297) (569,293) (579,285) (603,248) (602,251) #MAP+BM+3#_self"
polygon="(544,52) (561,64) (574,87) (571,141) (598,205) (594,244) (602,250) (611,206) (579,144) (584,89) (576,66) (567,47) (552,39) #MAP+BM+2#_self"
polygon="(140,68) (131,104) (217,110) (430,93) (484,113) (515,100) (521,41) (544,51) (552,39) (512,22) (508,59) (469,58) (429,75) (273,94) (231,78) #MAP+BM+1#_self"
src="map_ma1.gif" alt="wpe3.jpg (68958 bytes)" border="0"
style="background-color: rgb(0,255,255); color: rgb(255,0,255)"
u-originalsrc="map_ma1.gif" width="629" height="681" --></p>

<p>&nbsp;</p>

<p><a name="MAP BM 1">1</a></p>


Please, any help massively appreciated. Sorry if i'm dragging this out
0
 
CetusMODCommented:
PAQed, with points refunded (50)

CetusMOD
Community Support Moderator
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now