?
Solved

image mapping - Hotspots

Posted on 2003-03-18
11
Medium Priority
?
519 Views
Last Modified: 2008-02-26
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
Comment
Question by:Taylor17
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
11 Comments
 
LVL 2

Expert Comment

by:northernchill
ID: 8159391
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
 

Author Comment

by:Taylor17
ID: 8173099
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
 
LVL 2

Expert Comment

by:northernchill
ID: 8173804
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:Taylor17
ID: 8179776
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
 
LVL 2

Expert Comment

by:northernchill
ID: 8181121
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
 

Author Comment

by:Taylor17
ID: 8195909
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
 

Author Comment

by:Taylor17
ID: 8195929
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
 

Author Comment

by:Taylor17
ID: 8208684
[FrontPage Image Map Component]

Thats what it says. Please, help me out here
0
 

Author Comment

by:Taylor17
ID: 8208693
[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
 

Accepted Solution

by:
CetusMOD earned 0 total points
ID: 10742915
PAQed, with points refunded (50)

CetusMOD
Community Support Moderator
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question