This is what I meant about highlighting a section of a large map...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
This is just an example of the real site I'm working on, but this example
works the same way.

In this example site, index.htm represents one of several pages from the
real site. From it, you can click the map button which will display the
entire map and highlight the specific section on the map. The map is in
map.htm, it's only 500 x 500 pixels.

The real map is almost 2000x2000 pixels, but it's on our LAN so it takes no
time to load. Also, the computer screens are set to 1024x768 pixels, so I
can't display the entire map. Instead, I load the map in a scrollable div.
When highlighting a section of the map, I also have to ensure the div is
scrolled correctly so that the section is visible. In my case, I just try to
center everything.

Once the map is highlighted, you can click on the map to toggle the
highlight on and off.

I copied a lot from the Internet but I don't understand all the code.

I understand html tags and javascript 1.2, but have no clue what the
following is:

    var map=document.getElementById("map");

Is this the latest type of javascript, or is this part of html or what???

Thanks for any information and / or suggestions,

G. Doucet

Re: This is what I meant about highlighting a section of a large map...

Quoted text here. Click to load it

Excuse me for not dealing with this particular url (it is too crazy for
words on my browsers. A pop up window opens - for some unknown reason - that
is way too small and to make matters truly worse (and here is the real
craziness), it itself has a further sub window within it that has scollbars.
Surely this cannot be any kind of useful lead to any problem anyone has?).

I wonder again about your original query: how many links are there in fact
in the list that can be chosen by users? You have 50 "red squares"
representing offices. You have 100 cells representing each 1/100th of the
map. (See your original post). Why these relative figures for a start? Are
50 of the squares not to be highlighted because not containing offices? If
so, why have so many cells? OK, there may be reasons...

If the list is just to 50, 50 html pages each with a cell different is not
that bad (They are all nearly the very same following the scheme I suggested
earlier. It is rock solid for all browsers. No rollovers, no javascript, no
hanky panky like in this url.)


Re: This is what I meant about highlighting a section of a largemap...

Quoted text here. Click to load it

This is just an example of how it works. In this example, I made the popup
window bigger than the sub window making it easier for you -maybe- to access
the source code. With IE you right click on the page and click View Source.
But since the sub window is an image, when you right click on it you would
not get the option to View Source.

In the real site, the popup window and the sub window are the same size. The
map is approx 2000x2000 pixels, and the window is 650 x 1000 pixels which
fits on our monitors which are set to 1024 x 768 pixels. So it's not really
a small window.

I the example, I made the map and the window smaller to save bandwidth.

Quoted text here. Click to load it

I haben't finished yet. To be honest, I haven't counted all the offices yet
either. There are probably between 50 and 100. They will all be included.

Quoted text here. Click to load it

I will re-examine your earlier post.

Quoted text here. Click to load it

Re: This is what I meant about highlighting a section of a largemap...

Quoted text here. Click to load it
Quoted text here. Click to load it
why does it have to be a pop up?

Re: This is what I meant about highlighting a section of a largemap...

Quoted text here. Click to load it

This never occurred to me as your motive. I mostly key command source code
anyway...and I bet not much would stop others on this newsgroup ferreting
your code out. At least make the real thing user sizeable unlike in your
example, scroll bars are not enough.

Quoted text here. Click to load it

Not sure why these figures? Are the monitors portrait? Anyway, you need to
think about this business of the pop up. The pop up is ideal for situations
where you have a small amount of info, especially pictorial, that can be
referred to without losing one's place on the main site. To squeeze a 2000 x
2000 in it with scroll bars defeats the purpose somewhat. And how would you
have the relevant bit of the map showing at first? People would have to
scroll away till they saw something bright and backlit and all singing and
dancing. Nah...

Guy, I would not do this. I would either make the pop up with just a fixed
pic showing the office concerned and a bit of the surrounding context. Yes,
you have to prepare 50 or more pics. So work!  Where are you? Here in Sydney
it is very hard because the beach beckons but maybe you are in some place
where it is better to be distracted by image editing (eg in some nervous
making earthquake prone place)

Quoted text here. Click to load it

I am not sure why you splice the map into table cells. One possible reason
was that someone might look at one office, and then want to look at another
- in which case all the cells that are common to the two maps will load
instantly (because of the caching of many of the sub-images). But since you
said speed is no issue, it is in an office somewhere, in-house, what is the
point of table cells?

Look, why not keep it simple, honestly. Assume folk know their city and
prepare just small local maps for the offices (with a link to the big one
for those who might want to see the whole - no highlights) If you have the
pop up, you will need javascript I think. You can just use target _Blank in
the html instead. Or nothing. Just simple link to the relevant bit of the
map and they use their back buttons...


Re: This is what I meant about highlighting a section of alargemap...

Quoted text here. Click to load it

I know it's difficult to understand what I am trying to do.  I also know
that I am by no means a pro at this, it's not even part of my job, I am just
trying to set up an internal web site that would help new employees. Thanks
for your patience.

I'm on the Atlantic coast of Canada. The months of April and May have been
cold and very wet. Looks like June will be much better - the last few days
were nice and warm,  25 - 30 degree temperatures - Celcius that is!

As for the map, I originally thought that I had to divide it into smaller
grids, but now realise that I don't need to.

As far as the popup window, I would actually prefer that it was ~not~ a
popup. But how can I link to another webpage with a parameter, and how does
the linked html file retrieve that parameter?

Here is another way to explain what I have. I actually have 3 things:
- One HTML file containing the list of the approximnately 50 offices
- An HTML file for each office, displaying a picture and description of that
- One HTML file showing the map of all the office locations.

The first thing to appear is the list of offices by names. When the employee
clicks on an office from the list, it links them to the html file displaying
its picture and description. If the employee wants, there is also a map
button they can click on which will show the entire map with this office
location highlighted - (like you suggest, I would prefer this not to be a
popup).  If it wasn't a popup, they could then either click back to return
to the office picture, and back again to the original list, or if they
prefer, they could click on another office on the map which would take them
to the html file displaying ~its~ picture and description. So basically,
they could move around from the list, the office picture/description, and
the map.

Thanks again for your patience and all...

Re: This is what I meant about highlighting a section of alargemap...

Quoted text here. Click to load it

OK, no pop up. It may be that there is no need to "retrieve" anything.
Parameters and retrieval is programming stuff, have we established you need
any yet? Obviously you know that you can link to picture itself or another
page. It may or may not be useful here but you should know that you can also
link to a particular *part* of another page. It is done as follows. You name
some bit of the target page with the construction <a name="map">here is
map...</a> And you refer to this bit in the link like this: <a
href="somePage/#name">see this bit</a>. This may become relevant for you
depending on how you proceed.

Quoted text here. Click to load it

Yes, I thought it was a bit like this. Now I  know for sure you have a page
for each office, this is what you could do: put the relevant bit of the map
on each office page. Forget the 2000 * 2000 for this, just edit a chunk for
each page. The 2000*2000 can be somewhere that is linkable from each page
for reference if needed. Get cracking, your summer will be over and you will
be too cold and miserable and depressed if you have not done it by then.

If you absolutely have to have the whole map for context for users
everytime, then do this: put some coordinates (ABCDEF..., and 12345...) on
the map itself (top, bottom, left and right  as in street directories) -
easy to do in any image-editing software. And put in the map coordinates in
some html at the top of the map bold. Then thety can scroll to the bit
concerned quickly. This way you prepare one map only. It is repeated on
every office page and only the coordinates change. No need to do any
highlighting besides this. When I think about it, I would probably end up
doing this. BTW, you can refer to the map from the top of the office page,
or the original list link page, if you find it useful,  by the technique of
linking to a part of the page.

Quoted text here. Click to load it

It has gone beyond a matter of patience. I can't sleep nights until you are


Re: This is what I meant about highlighting a section ofalargemap...

Quoted text here. Click to load it

I know you were just kidding, but I wanted to let you know that I have
finally accomplished exactly what I wanted. The only thing left to do is to
build it.  No pop-up window either!

I found, in another newsgroup, how javascript can obtain the URL. So instead
of having a pop-up window and sending arguments to it, I link to a html file
and include the argument in the URL, such as . The
javascript code reads the value "5" and positions the map to the 5th office
based on its array of x/y coordinates.

That javascript command is:
    <script type="text/javascript">
        // ...


Thanks again for all your pointers, I am happy!
G Doucet

Site Timeline