Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide

Interactive Map in HTML

Question posted by: vunet (Guest) on June 27th, 2008 07:16 PM
How to make an interactive map without Flash? I want to move mouse
over each continent and see it changing its color but when clicked it
would send some action to the DOM.

Someone offered me to make a few images with each continent
highlighted and when user moves mouse over a different continent, a
new image is replacing older one (with another continent highlighted).
The map would have coordinates linked in <AREAtag.

To me this does not seem to be a great solution. Though I do not know
of any alternatives yet. Did anyone have an experience with it? Can
you recommend a method of implementing continent interactive map as
described above or feedback above solution?

Thanks.
Jeremy J Starcher's Avatar
Jeremy J Starcher
Guest
n/a Posts
June 27th, 2008
07:16 PM
#2

Re: Interactive Map in HTML
On Fri, 06 Jun 2008 06:39:26 -0700, vunet wrote:
Quote:
How to make an interactive map without Flash? I want to move mouse over
each continent and see it changing its color but when clicked it would
send some action to the DOM.
>
Someone offered me to make a few images with each continent highlighted
and when user moves mouse over a different continent, a new image is
replacing older one (with another continent highlighted). The map would
have coordinates linked in <AREAtag.
>
To me this does not seem to be a great solution. Though I do not know of
any alternatives yet. Did anyone have an experience with it? Can you
recommend a method of implementing continent interactive map as
described above or feedback above solution?
>
Thanks.


Google for the phrase "HTML image map" and that will get you started.

Though image maps CAN be made by hand, most prefer some sort of map-
editing software. Don't have any I can recommend though -- I use custom
software because I had some very specific needs.

vunet's Avatar
vunet
Guest
n/a Posts
June 27th, 2008
07:16 PM
#3

Re: Interactive Map in HTML
On Jun 6, 10:06 am, Jeremy J Starcher <r3...@yahoo.comwrote:
Quote:
On Fri, 06 Jun 2008 06:39:26 -0700, vunet wrote:
Quote:
How to make an interactive map without Flash? I want to move mouse over
each continent and see it changing its color but when clicked it would
send some action to the DOM.

>
Quote:
Someone offered me to make a few images with each continent highlighted
and when user moves mouse over a different continent, a new image is
replacing older one (with another continent highlighted). The map would
have coordinates linked in <AREAtag.

>
Quote:
To me this does not seem to be a great solution. Though I do not know of
any alternatives yet. Did anyone have an experience with it? Can you
recommend a method of implementing continent interactive map as
described above or feedback above solution?

>
Quote:
Thanks.

>
Google for the phrase "HTML image map" and that will get you started.
>
Though image maps CAN be made by hand, most prefer some sort of map-
editing software. Don't have any I can recommend though -- I use custom
software because I had some very specific needs.


Thanks. I understand the solution I described is a part of your
suggested Google search for "HTML image map".
I am considering...

Jukka K. Korpela's Avatar
Jukka K. Korpela
Guest
n/a Posts
June 27th, 2008
07:16 PM
#4

Re: Interactive Map in HTML
Scripsit vunet:
Quote:
How to make an interactive map without Flash?


In pure HTML, you can set up a client-side image map, which apparently
has been suggested to you. Using HTML and server-side scripting, you can
set up a server-side image map, though it's usually an inferior solution
for selecting between areas (opposite to selecting an arbitrary point).
Quote:
I want to move mouse
over each continent and see it changing its color but when clicked it
would send some action to the DOM.


The first part is difficult. The second part ("when clicked - -") is
basic functionality of client-side image maps, except that a click
primarily sends the browser to a specific URL, but you can add to this,
or override this, by an onclick="..." attribute on an <areaelement.
Quote:
Someone offered me to make a few images with each continent
highlighted and when user moves mouse over a different continent, a
new image is replacing older one (with another continent highlighted).


That's possible. You could have an onmouseover="..." attribute in an
<areaelement, and the script invoked could e.g. change the image.
Unfortunately, it is no possible to change just the area; you would
indeed need to change the entire image to a variant that has the area
highlighted.
Quote:
The map would have coordinates linked in <AREAtag.


Yes, and technically the area would be described as a polygon, coarsely
or smoothly, depending on how many points you care to include there.
Quote:
To me this does not seem to be a great solution.


It's not, but it works, with some caveats, and it's used on many pages.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


vunet's Avatar
vunet
Guest
n/a Posts
June 27th, 2008
07:16 PM
#5

Re: Interactive Map in HTML
On Jun 6, 12:44 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Quote:
Scripsit vunet:
>
Quote:
How to make an interactive map without Flash?

>
In pure HTML, you can set up a client-side image map, which apparently
has been suggested to you. Using HTML and server-side scripting, you can
set up a server-side image map, though it's usually an inferior solution
for selecting between areas (opposite to selecting an arbitrary point).
>
Quote:
I want to move mouse
over each continent and see it changing its color but when clicked it
would send some action to the DOM.

>
The first part is difficult. The second part ("when clicked - -") is
basic functionality of client-side image maps, except that a click
primarily sends the browser to a specific URL, but you can add to this,
or override this, by an onclick="..." attribute on an <areaelement.
>
Quote:
Someone offered me to make a few images with each continent
highlighted and when user moves mouse over a different continent, a
new image is replacing older one (with another continent highlighted).

>
That's possible. You could have an onmouseover="..." attribute in an
<areaelement, and the script invoked could e.g. change the image.
Unfortunately, it is no possible to change just the area; you would
indeed need to change the entire image to a variant that has the area
highlighted.
>
Quote:
The map would have coordinates linked in <AREAtag.

>
Yes, and technically the area would be described as a polygon, coarsely
or smoothly, depending on how many points you care to include there.
>
Quote:
To me this does not seem to be a great solution.

>
It's not, but it works, with some caveats, and it's used on many pages.
>
--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


thank you.

 
Not the answer you were looking for? Post your question . . .
190,071 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors