Need help on linking a map

HTML & CSS
1

in the link below there is a map of the united states where a user can click in any states and be directed to the selected state information. How can that be achived?
map of states link

Here i have extracted some html code from the source code in the mozzila browser. But don’t know how it actually been applied.

<map name="usmap" id="usmap">
<AREA SHAPE="rect" alt="Washington, DC" COORDS="376,124,398,139" HREF="/es/dc/es_dc_subj.html" ONMOUSEOVER="status='Washington, DC'; return true;">

<AREA SHAPE="rect" alt="Alaska" COORDS="6,188,126,280" HREF="/es/ak/es_ak_subj.html" ONMOUSEOVER="status='Alaska'; return true;">
<AREA SHAPE="rect" alt="Maryland" COORDS="381,111,396,120" HREF="/es/md/es_md_subj.html" ONMOUSEOVER="status='Maryland'; return true;">
<AREA SHAPE="rect" alt="Delaware" COORDS="384,99,399,108" HREF="/es/de/es_de_subj.html" ONMOUSEOVER="status='Delaware'; return true;">
<AREA SHAPE="rect" alt="New Jersey" COORDS="384,88,399,97" HREF="/es/nj/es_nj_subj.html" ONMOUSEOVER="status='New Jersey'; return true;">
<AREA SHAPE="rect" alt="Connecticut" COORDS="390,77,405,87" HREF="/es/ct/es_ct_subj.html" ONMOUSEOVER="status='Connecticut'; return true;">
<AREA SHAPE="rect" alt="Rhode Island" COORDS="405,66,420,76" HREF="/es/ri/es_ri_subj.html" ONMOUSEOVER="status='Rhode Island'; return true;">
<AREA SHAPE="rect" alt="Massachusetts" COORDS="402,49,420,62" HREF="/es/ma/es_ma_subj.html" ONMOUSEOVER="status='Massachusetts'; return true;">
<AREA SHAPE="rect" alt="South Carolina" COORDS="331,142,352,156" HREF="/es/sc/es_sc_subj.html" ONMOUSEOVER="status='South Carolina'; return true;">
<AREA SHAPE="rect" alt="North Carolina" COORDS="342,125,363,139" HREF="/es/nc/es_nc_subj.html" ONMOUSEOVER="status='North Carolina'; return true;">
<AREA SHAPE="rect" alt="Virginia" COORDS="341,107,362,121" HREF="/es/va/es_va_subj.html" ONMOUSEOVER="status='Virginia'; return true;">
<AREA SHAPE="rect" alt="Pennsylvania" COORDS="337,77,358,91" HREF="/es/pa/es_pa_subj.html" ONMOUSEOVER="status='Pennsylvania'; return true;">
<AREA SHAPE="RECT" alt="New York" COORDS="353,56,374,70" HREF="/es/ny/es_ny_subj.html" ONMOUSEOVER="status='New York'; return true;">
<AREA SHAPE="rect" alt="Maine" COORDS="390,25,411,39" HREF="/es/me/es_me_subj.html" ONMOUSEOVER="status='Maine'; return true;">
<AREA SHAPE="rect" alt="New Hampshire" COORDS="364,14,385,28" HREF="/es/nh/es_nh_subj.html" ONMOUSEOVER="status='New Hampshire'; return true;">
<AREA SHAPE="rect" alt="Vermont" COORDS="341,28,362,42" HREF="/es/vt/es_vt_subj.html" ONMOUSEOVER="status='Vermont'; return true;">
<AREA SHAPE="rect" alt="West Viriginia" COORDS="312,39,333,53" HREF="/es/wv/es_wv_subj.html" ONMOUSEOVER="status='West Viriginia'; return true;">
<AREA SHAPE="rect" alt="Tennessee" COORDS="272,131,304,141" HREF="/es/tn/es_tn_subj.html" ONMOUSEOVER="status='Tennessee'; return true;">

<AREA SHAPE="rect" alt="Kentucky" COORDS="292,114,312,122" HREF="/es/ky/es_ky_subj.html" ONMOUSEOVER="status='Kentucky'; return true;">
<AREA SHAPE="rect" alt="Indiana" COORDS="279,95,297,109" HREF="/es/in/es_in_subj.html" ONMOUSEOVER="status='Indiana'; return true;">
<AREA SHAPE="rect" alt="Ohio" COORDS="301,87,319,101" HREF="/es/oh/es_oh_subj.html" ONMOUSEOVER="status='Ohio'; return true;">
<AREA SHAPE="rect" alt="Michigan" COORDS="282,62,302,78" HREF="/es/mi/es_mi_subj.html" ONMOUSEOVER="status='Michigan'; return true;">
<AREA SHAPE="rect" alt="Illinois" COORDS="253,89,275,108" HREF="/es/il/es_il_subj.html" ONMOUSEOVER="status='Illinois'; return true;">
<AREA SHAPE="rect" alt="Wisconsin" COORDS="243,46,265,65" HREF="/es/wi/es_wi_subj.html" ONMOUSEOVER="status='Wisconsin'; return true;">
<AREA SHAPE="rect" alt="Florida" COORDS="332,194,354,213" HREF="/es/fl/es_fl_subj.html" ONMOUSEOVER="status='Florida'; return true;">
<AREA SHAPE="rect" alt="Georgia" COORDS="307,157,329,176" HREF="/es/ga/es_ga_subj.html" ONMOUSEOVER="status='Georgia'; return true;">
<AREA SHAPE="rect" alt="Alabama" COORDS="280,156,302,175" HREF="/es/al/es_al_subj.html" ONMOUSEOVER="status='Alabama'; return true;">
<AREA SHAPE="rect" alt="Mississippi" COORDS="255,154,277,173" HREF="/es/ms/es_ms_subj.html" ONMOUSEOVER="status='Mississippi'; return true;">
<AREA SHAPE="rect" alt="Louisiana" COORDS="235,178,257,197" HREF="/es/la/es_la_subj.html" ONMOUSEOVER="status='Louisiana'; return true;">
<AREA SHAPE="rect" alt="Arkansas" COORDS="229,141,251,160" HREF="/es/ar/es_ar_subj.html" ONMOUSEOVER="status='Arkansas'; return true;">
<AREA SHAPE="rect" alt="Missouri" COORDS="230,109,252,128" HREF="/es/mo/es_mo_subj.html" ONMOUSEOVER="status='Missouri'; return true;">
<AREA SHAPE="rect" alt="Iowa" COORDS="215,74,237,93" HREF="/es/ia/es_ia_subj.html" ONMOUSEOVER="status='Iowa'; return true;">
<AREA SHAPE="rect" alt="Minnesota" COORDS="214,37,236,56" HREF="/es/mn/es_mn_subj.html" ONMOUSEOVER="status='Minnesota'; return true;">
<AREA SHAPE="rect" alt="Kansas" COORDS="181,108,203,127" HREF="/es/ks/es_ks_subj.html" ONMOUSEOVER="status='Kansas'; return true;">
<AREA SHAPE="rect" alt="Oklahoma" COORDS="192,134,214,153" HREF="/es/ok/es_ok_subj.html" ONMOUSEOVER="status='Oklahoma'; return true;">

<AREA SHAPE="rect" alt="Texas" COORDS="175,171,197,190" HREF="/es/tx/es_tx_subj.html" ONMOUSEOVER="status='Texas'; return true;">
<AREA SHAPE="rect" alt="New Mexico" COORDS="120,140,142,159" HREF="/es/nm/es_nm_subj.html" ONMOUSEOVER="status='New Mexico'; return true;">
<AREA SHAPE="rect" alt="Colorado" COORDS="126,100,148,119" HREF="/es/co/es_co_subj.html" ONMOUSEOVER="status='Colorado'; return true;">
<AREA SHAPE="rect" alt="Nebraska" COORDS="169,81,191,100" HREF="/es/ne/es_ne_subj.html" ONMOUSEOVER="status='Nebraska'; return true;">
<AREA SHAPE="rect" alt="South Dakota" COORDS="168,53,190,72" HREF="/es/sd/es_sd_subj.html" ONMOUSEOVER="status='South Dakota'; return true;">
<AREA SHAPE="rect" alt="North Dakota" COORDS="168,26,190,45" HREF="/es/nd/es_nd_subj.html" ONMOUSEOVER="status='North Dakota'; return true;">
<AREA SHAPE="rect" alt="Montana" COORDS="106,25,128,44" HREF="/es/mt/es_mt_subj.html" ONMOUSEOVER="status='Montana'; return true;">
<AREA SHAPE="rect" alt="Wyoming" COORDS="119,62,141,81" HREF="/es/wy/es_wy_subj.html" ONMOUSEOVER="status='Wyoming'; return true;">
<AREA SHAPE="rect" alt="Utah" COORDS="82,94,104,113" HREF="/es/ut/es_ut_subj.html" ONMOUSEOVER="status='Utah'; return true;">
<AREA SHAPE="rect" alt="Idaho" COORDS="68,55,89,70" HREF="/es/id/es_id_subj.html" ONMOUSEOVER="status='Idaho'; return true;">
<AREA SHAPE="rect" alt="Nevada" COORDS="44,87,64,103" HREF="/es/nv/es_nv_subj.html" ONMOUSEOVER="status='Nevada'; return true;">
<AREA SHAPE="rect" alt="Arizona" COORDS="76,134,99,155" HREF="/es/az/es_az_subj.html" ONMOUSEOVER="status='Arizona'; return true;">
<AREA SHAPE="rect" alt="California" COORDS="20,106,42,122" HREF="/es/ca/es_ca_subj.html" ONMOUSEOVER="status='California'; return true;">
<AREA SHAPE="rect" alt="Oregon" COORDS="29,42,52,56" HREF="/es/or/es_or_subj.html" ONMOUSEOVER="status='Oregon'; return true;">
<AREA SHAPE="rect" alt="Washington" COORDS="41,17,61,30" HREF="/es/wa/es_wa_subj.html" ONMOUSEOVER="status='Washington'; return true;">
<!--<area alt="Treasure Hunt" coords="246,234,399,288" href="/cgi-bin/hunt.cgi/es">-->
</map>
2

If I am reading your query right -

Each state represents by it’s boundaries certain coordinates specific to the whole image. When the “map” approach is set up - it is usual to use the mouse to drop points all around the shape wanted - often 4 datum points suffice but with, say - IL or WV which are not simple “Boxes” then there may be more than four coordinate figures. Usually however even an approximate four sided ‘‘box’’ is adequate as folks will usually click close to an area center

Those figures for any one state then represent effectively the pixel boundaries which ‘contain’ then the link relevant to that state and the desired target page. You example includes onmouseover commands but this is optional.

So - each state thus requires and here gets, a coordinate set, which tells the pointer when hovered what link to follow. The “map” tag is just a container for the selection of coordinate designated shapes within an image. Hope this helps.

3

I have copied that code from the source code of the link in the first post. I have pasted but don’t necessarily understand it.

those coordinates are taken from a table or an x amount of coordinates numbers?

4

When a ‘‘map’’ facility is set up - usually something like a WYSIWYG editor (Dreamweaver for example) will have an option for mapping the coordinates.

Thus - let’s say we ‘do’ West Viriginia - placing mouse cursor at each corner of an approximate box and clicking, we’ll get - COORDS=“312,39,333,53”. I forget the exact mapping method but as far as the software interpretation goes, the image will have an imaginary grid of points and it is these that are registered for later use.

Notice - Pennsylvania COORDS=“337,77,358,91” - as PA is contiguous with WV at its lower left (SW) corner, you may notice that the coordinate set is not too far removed from the WV set in some respects. The figures 333 and 337 are very near and probably represent points very close where the states share an almost common point.

Someone else may remember the exact grid structure.

5

Thanks for the explanation I have some idea on what you saying. Thus I have to check that option for maps in dreamweaver what I am using as a editor.

I will get some updates on this little map grid journey.

J.

6

If you select an image in Dreamweaver and have the properties display at bottom - you should see lower left a ‘‘map’’ area - there is an option for square, circular or polygonal hotspot generation. Play with that a bit and I think you’ll soon get the idea.