Mercurial > dive4elements > river
comparison gwt-client/src/main/webapp/images/FLYS_Karte_interactive.html @ 6119:0b9f0d37fe6e
We have a much faster interactive image map!
* Image for highlighting rivers in link list instead of CSS manipulation.
* Better event handling.
* No more hover delay.
Some problems still exist:
* Sometime when switching the module to 'MINFO' the highlighted river on the
image map is not unhighlighted.
* The loop to unhighlight rivers when switching modules is called for every
river.
author | Raimund Renkert <rrenkert@intevation.de> |
---|---|
date | Tue, 28 May 2013 15:57:10 +0200 |
parents | f0550bac4468 |
children | 69f95a016308 |
comparison
equal
deleted
inserted
replaced
6118:97d055c24ad4 | 6119:0b9f0d37fe6e |
---|---|
4 var highlighted = ""; | 4 var highlighted = ""; |
5 function highlight(name){ | 5 function highlight(name){ |
6 unHighlight(highlighted); | 6 unHighlight(highlighted); |
7 var river; | 7 var river; |
8 if (availableRiver(name)) { | 8 if (availableRiver(name)) { |
9 console.log('highlighting ' + name); | |
10 river = document.getElementById(name); | 9 river = document.getElementById(name); |
11 } | 10 } |
12 else { | 11 else { |
13 console.log('not available' + name); | |
14 river = document.getElementById(name + "_inactive"); | 12 river = document.getElementById(name + "_inactive"); |
15 } | 13 } |
16 if (river) { | 14 if (river) { |
17 highlighted = name; | 15 highlighted = name; |
18 highlightRiver(name); | |
19 river.style.visibility="visible"; | 16 river.style.visibility="visible"; |
20 } | 17 } |
18 } | |
19 function highlightList(name) { | |
20 highlightRiver(name); | |
21 } | 21 } |
22 function unHighlight(name) { | 22 function unHighlight(name) { |
23 var river; | 23 var river; |
24 if (availableRiver(name)) { | 24 if (availableRiver(name)) { |
25 river = document.getElementById(name); | 25 river = document.getElementById(name); |
29 } | 29 } |
30 if (river) { | 30 if (river) { |
31 river.style.visibility="hidden"; | 31 river.style.visibility="hidden"; |
32 } | 32 } |
33 } | 33 } |
34 function unHighlightList(name) { | |
35 unHighlightRiver(name); | |
36 } | |
34 </script> | 37 </script> |
35 </head> | 38 </head> |
36 <body> | 39 <body> |
37 <!-- Create Mappings --> | 40 <!-- Create Mappings --> |
38 <div id="riverContainer"> | 41 <div id="riverContainer"> |
39 <img src="images/FLYS_transp.png" usemap="#river" style="position: absolute;z-index: 100;"> | 42 <img src="images/FLYS_transp.png" usemap="#river" style="position: absolute;z-index: 100;"> |
40 <map name="river"> | 43 <map name="river"> |
41 | 44 |
42 <!--FLYS_Karte.map--> | 45 <!--FLYS_Karte.map--> |
43 <!-- mit daten --> | 46 <!-- mit daten --> |
44 <area id="donau_area" shape="poly" onmouseover="highlight('Donau')" onmouseout="unHighlight('Donau')" onclick="selectRiver('Donau')" coords="226,668,276,668,277,646,385,578,433,576,431,587,458,604,429,620,396,634,363,658,305,681,230,691" /> | 47 <area id="donau_area" shape="poly" onmouseover="highlight('Donau'); highlightList('Donau')" onmouseout="unHighlight('Donau'); unHighlightList('Donau')" onclick="selectRiver('Donau')" coords="226,668,276,668,277,646,385,578,433,576,431,587,458,604,429,620,396,634,363,658,305,681,230,691" /> |
45 <area id="donau_Ende_area" shape="poly" onmouseover="highlight('Donau')" onmouseout="unHighlight('Donau')" onclick="selectRiver('Donau')" coords="482,551,505,534,559,530,560,574,639,621,639,659,562,646,561,631,589,595,557,579,525,589,490,573" /> | 48 <area id="donau_Ende_area" shape="poly" onmouseover="highlight('Donau'); highlightList('Donau')" onmouseout="unHighlight('Donau'); unHighlightList('Donau')" onclick="selectRiver('Donau')" coords="482,551,505,534,559,530,560,574,639,621,639,659,562,646,561,631,589,595,557,579,525,589,490,573" /> |
46 <area id="donau_nordarm_area" shape="poly" onmouseover="highlight('Donau (Regensburg Nordarm)')" onmouseout="unHighlight('Donau (Regensburg Nordarm)')" onclick="selectRiver('Donau (Regensburg Nordarm)')" coords="437,567,432,587,454,600,478,596,467,570,491,542,443,534,441,556" /> | 49 <area id="donau_nordarm_area" shape="poly" onmouseover="highlight('Donau (Regensburg Nordarm)'); highlightList('Donau (Regensburg Nordarm)')" onmouseout="unHighlight('Donau (Regensburg Nordarm)'); unHighlightList('Donau (Regensburg Nordarm)')" onclick="selectRiver('Donau (Regensburg Nordarm)')" coords="437,567,432,587,454,600,478,596,467,570,491,542,443,534,441,556" /> |
47 <area id="donau_schleusen_area" shape="poly" onmouseover="highlight('Donau (Schleusenkanäle)')" onmouseout="unHighlight('Donau (Schleusenkanäle)')" onclick="selectRiver('Donau (Schleusenkanäle)')" coords="467,569,482,552,490,573,526,589,559,579,589,596,561,631,557,614,522,618,504,600,477,594" /> | 50 <area id="donau_schleusen_area" shape="poly" onmouseover="highlight('Donau (Schleusenkanäle)'); highlightList('Donau (Schleusenkanäle)')" onmouseout="unHighlight('Donau (Schleusenkanäle)'); unHighlightList('Donau (Schleusenkanäle)')" onclick="selectRiver('Donau (Schleusenkanäle)')" coords="467,569,482,552,490,573,526,589,559,579,589,596,561,631,557,614,522,618,504,600,477,594" /> |
48 <area id="elbe_area" shape="poly" onmouseover="highlight('Elbe')" onmouseout="unHighlight('Elbe')" onclick="selectRiver('Elbe')" coords="271,131,261,147,345,191,337,243,388,243,418,238,395,284,412,310,446,315,454,329,514,397,550,447,580,451,593,461,593,466,629,489,643,470,639,444,596,392,575,360,573,327,509,293,462,289,444,229,448,219,298,131" /> | 51 <area id="elbe_area" shape="poly" onmouseover="highlight('Elbe'); highlightList('Elbe')" onmouseout="unHighlight('Elbe'); unHighlightList('Elbe')" onclick="selectRiver('Elbe')" coords="271,131,261,147,345,191,337,243,388,243,418,238,395,284,412,310,446,315,454,329,514,397,550,447,580,451,593,461,593,466,629,489,643,470,639,444,596,392,575,360,573,327,509,293,462,289,444,229,448,219,298,131" /> |
49 <area id="fulda_sommer_area" shape="poly" onmouseover="highlight('Fulda (Sommer)')" onmouseout="unHighlight('Fulda (Sommer)')" onclick="selectRiver('Fulda (Sommer)')" coords="315,363,307,371,307,381,313,386,310,393,322,402,322,414,312,425,305,437,338,436,350,410,334,399,326,389" /> | 52 <area id="fulda_sommer_area" shape="poly" onmouseover="highlight('Fulda (Sommer)'); highlightList('Fulda (Sommer)')" onmouseout="unHighlight('Fulda (Sommer)'); unHighlightList('Fulda (Sommer)')" onclick="selectRiver('Fulda (Sommer)')" coords="315,363,307,371,307,381,313,386,310,393,322,402,322,414,312,425,305,437,338,436,350,410,334,399,326,389" /> |
50 <area id="fulda_winter_area" shape="poly" onmouseover="highlight('Fulda (Winter)')" onmouseout="unHighlight('Fulda (Winter)')" onclick="selectRiver('Fulda (Winter)')" coords="315,362,307,370,307,380,313,385,310,392,315,397,322,401,322,413,313,423,305,436,279,434,262,411,260,395,275,375,299,357" /> | 53 <area id="fulda_winter_area" shape="poly" onmouseover="highlight('Fulda (Winter)'); highlightList('Fulda (Winter)')" onmouseout="unHighlight('Fulda (Winter)'); unHighlightList('Fulda (Winter)')" onclick="selectRiver('Fulda (Winter)')" coords="315,362,307,370,307,380,313,385,310,392,315,397,322,401,322,413,313,423,305,436,279,434,262,411,260,395,275,375,299,357" /> |
51 <area id="havel_area" shape="poly" onmouseover="highlight('Havel')" onmouseout="unHighlight('Havel')" onclick="selectRiver('Havel')" coords="444,230,462,288,519,270,533,217,519,177,491,189,458,202" /> | 54 <area id="havel_area" shape="poly" onmouseover="highlight('Havel'); highlightList('Havel')" onmouseout="unHighlight('Havel'); unHighlightList('Havel')" onclick="selectRiver('Havel')" coords="444,230,462,288,519,270,533,217,519,177,491,189,458,202" /> |
52 <area id="lahn_area" shape="poly" onmouseover="highlight('Lahn')" onmouseout="unHighlight('Lahn')" onclick="selectRiver('Lahn')" coords="195,464,197,450,186,413,262,411,285,442,270,459,217,472" /> | 55 <area id="lahn_area" shape="poly" onmouseover="highlight('Lahn'); highlightList('Lahn')" onmouseout="unHighlight('Lahn'); unHighlightList('Lahn')" onclick="selectRiver('Lahn')" coords="195,464,197,450,186,413,262,411,285,442,270,459,217,472" /> |
53 <area id="main_area" shape="poly" onmouseover="highlight('Main')" onmouseout="unHighlight('Main')" onclick="selectRiver('Main')" coords="240,492,240,466,303,462,335,445,375,444,454,469,468,501,394,500,381,480,350,480,337,493,344,541,308,529,272,524,269,504" /> | 56 <area id="main_area" shape="poly" onmouseover="highlight('Main'); highlightList('Main')" onmouseout="unHighlight('Main'); unHighlightList('Main')" onclick="selectRiver('Main')" coords="240,492,240,466,303,462,335,445,375,444,454,469,468,501,394,500,381,480,350,480,337,493,344,541,308,529,272,524,269,504" /> |
54 <area id="main_limbach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Limbach)')" onmouseout="unHighlight('Main (Wehrarm Limbach)')" onclick="selectRiver('Main (Wehrarm Limbach)')" coords="360,480,381,480,393,500,383,519,368,520" /> | 57 <area id="main_limbach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Limbach)'); highlightList('Main (Wehrarm Limbach)')" onmouseout="unHighlight('Main (Wehrarm Limbach)'); unHighlightList('Main (Wehrarm Limbach)')" onclick="selectRiver('Main (Wehrarm Limbach)')" coords="360,480,381,480,393,500,383,519,368,520" /> |
55 <area id="main_volkach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Volkach)')" onmouseout="unHighlight('Main (Wehrarm Volkach)')" onclick="selectRiver('Main (Wehrarm Volkach)')" coords="350,480,360,480,368,522,343,541,337,493" /> | 58 <area id="main_volkach_area" shape="poly" onmouseover="highlight('Main (Wehrarm Volkach)'); highlightList('Main (Wehrarm Volkach)')" onmouseout="unHighlight('Main (Wehrarm Volkach)'); unHighlightList('Main (Wehrarm Volkach)')" onclick="selectRiver('Main (Wehrarm Volkach)')" coords="350,480,360,480,368,522,343,541,337,493" /> |
56 <area id="mosel_area" shape="poly" onmouseover="highlight('Mosel')" onmouseout="unHighlight('Mosel')" onclick="selectRiver('Mosel')" coords="190,467,170,461,138,453,102,466,103,494,98,537,86,600,125,604,149,583,130,543,140,518,162,515,194,511" /> | 59 <area id="mosel_area" shape="poly" onmouseover="highlight('Mosel'); highlightList('Mosel')" onmouseout="unHighlight('Mosel'); unHighlightList('Mosel')" onclick="selectRiver('Mosel')" coords="190,467,170,461,138,453,102,466,103,494,98,537,86,600,125,604,149,583,130,543,140,518,162,515,194,511" /> |
57 <area id="neckar_area" shape="poly" onmouseover="highlight('Neckar')" onmouseout="unHighlight('Neckar')" onclick="selectRiver('Neckar')" coords="231,641,253,653,288,640,386,577,357,559,342,541,319,540,292,547,290,583,308,590,306,615,250,604,226,630" /> | 60 <area id="neckar_area" shape="poly" onmouseover="highlight('Neckar'); highlightList('Neckar')" onmouseout="unHighlight('Neckar'); unHighlightList('Neckar')" onclick="selectRiver('Neckar')" coords="231,641,253,653,288,640,386,577,357,559,342,541,319,540,292,547,290,583,308,590,306,615,250,604,226,630" /> |
58 <area id="neckar_wehrarm_area" shape="poly" onmouseover="highlight('Neckar (über Wehrarme)')" onmouseout="unHighlight('Neckar (über Wehrarme)')" onclick="selectRiver('Neckar (über Wehrarme)')" coords="272,524,248,540,253,561,259,570,254,605,306,615,308,590,290,583,292,546,320,540,309,529" /> | 61 <area id="neckar_wehrarm_area" shape="poly" onmouseover="highlight('Neckar (über Wehrarme)'); highlightList('Neckar (über Wehrarme)')" onmouseout="unHighlight('Neckar (über Wehrarme)'); unHighlightList('Neckar (über Wehrarme)')" onclick="selectRiver('Neckar (über Wehrarme)')" coords="272,524,248,540,253,561,259,570,254,605,306,615,308,590,290,583,292,546,320,540,309,529" /> |
59 <area id="oder_area" shape="poly" onmouseover="highlight('Oder')" onmouseout="unHighlight('Oder')" onclick="selectRiver('Oder')" coords="572,143,542,155,542,178,529,203,541,238,565,252,583,273,570,307,603,327,641,320,639,286,633,275,614,269,619,246,635,236,637,195,606,160" /> | 62 <area id="oder_area" shape="poly" onmouseover="highlight('Oder'); highlightList('Oder')" onmouseout="unHighlight('Oder'); unHighlightList('Oder')" onclick="selectRiver('Oder')" coords="572,143,542,155,542,178,529,203,541,238,565,252,583,273,570,307,603,327,641,320,639,286,633,275,614,269,619,246,635,236,637,195,606,160" /> |
60 <area id="rhein_area" shape="poly" onmouseover="highlight('Rhein')" onmouseout="unHighlight('Rhein')" onclick="selectRiver('Rhein')" coords="86,301,138,317,157,334,153,355,177,381,185,407,198,450,197,464,219,471,224,478,240,473,241,492,269,502,273,523,249,539,254,561,260,570,256,597,227,628,229,639,252,653,277,644,279,668,236,670,237,690,265,687,281,696,283,717,248,728,188,737,170,718,167,669,203,569,222,545,213,521,195,521,193,467,171,459,145,444,122,403,49,391,52,352,23,344,4,304" /> | 63 <area id="rhein_area" shape="poly" onmouseover="highlight('Rhein'); highlightList('Rhein')" onmouseout="unHighlight('Rhein'); unHighlightList('Rhein')" onclick="selectRiver('Rhein')" coords="86,301,138,317,157,334,153,355,177,381,185,407,198,450,197,464,219,471,224,478,240,473,241,492,269,502,273,523,249,539,254,561,260,570,256,597,227,628,229,639,252,653,277,644,279,668,236,670,237,690,265,687,281,696,283,717,248,728,188,737,170,718,167,669,203,569,222,545,213,521,195,521,193,467,171,459,145,444,122,403,49,391,52,352,23,344,4,304" /> |
61 <area id="saale_area" shape="poly" onmouseover="highlight('Saale')" onmouseout="unHighlight('Saale')" onclick="selectRiver('Saale')" coords="445,314,414,311,366,299,366,342,395,346,404,356,424,358,477,354,463,341" /> | 64 <area id="saale_area" shape="poly" onmouseover="highlight('Saale'); highlightList('Saale')" onmouseout="unHighlight('Saale'); unHighlightList('Saale')" onclick="selectRiver('Saale')" coords="445,314,414,311,366,299,366,342,395,346,404,356,424,358,477,354,463,341" /> |
62 <area id="saale_thüringen_area" shape="poly" onmouseover="highlight('Saale-Thüringen')" onmouseout="unHighlight('Saale-Thüringen')" onclick="selectRiver('Saale-Thüringen')" coords="424,358,476,354,490,384,430,461,375,444,387,415,402,408,420,387,435,383" /> | 65 <area id="saale_thüringen_area" shape="poly" onmouseover="highlight('Saale-Thüringen'); highlightList('Saale-Thüringen')" onmouseout="unHighlight('Saale-Thüringen'); unHighlightList('Saale-Thüringen')" onclick="selectRiver('Saale-Thüringen')" coords="424,358,476,354,490,384,430,461,375,444,387,415,402,408,420,387,435,383" /> |
63 <area id="saar_area" shape="poly" onmouseover="highlight('Saar')" onmouseout="unHighlight('Saar')" onclick="selectRiver('Saar')" coords="150,539,129,544,139,564,155,588,181,593,187,565,201,536,195,526,195,512,154,516" /> | 66 <area id="saar_area" shape="poly" onmouseover="highlight('Saar'); highlightList('Saar')" onmouseout="unHighlight('Saar'); unHighlightList('Saar')" onclick="selectRiver('Saar')" coords="150,539,129,544,139,564,155,588,181,593,187,565,201,536,195,526,195,512,154,516" /> |
64 <area id="saar_wittingerbogen_area" shape="poly" onmouseover="highlight('Saar (Wiltinger Bogen)')" onmouseout="unHighlight('Saar (Wiltinger Bogen)')" onclick="selectRiver('Saar (Wiltinger Bogen)')" coords="139,518,155,516,149,540,130,542" /> | 67 <area id="saar_wittingerbogen_area" shape="poly" onmouseover="highlight('Saar (Wiltinger Bogen)'); highlightList('Saar (Wiltinger Bogen)')" onmouseout="unHighlight('Saar (Wiltinger Bogen)'); unHighlightList('Saar (Wiltinger Bogen)')" onclick="selectRiver('Saar (Wiltinger Bogen)')" coords="139,518,155,516,149,540,130,542" /> |
65 <area id="werra_sommer_area" shape="poly" onmouseover="highlight('Werra (Sommer)')" onmouseout="unHighlight('Werra (Sommer)')" onclick="selectRiver('Werra (Sommer)')" coords="316,361,334,351,360,342,387,345,398,354,384,372,381,389,371,400,350,390,345,382,336,378,334,372,329,368" /> | 68 <area id="werra_sommer_area" shape="poly" onmouseover="highlight('Werra (Sommer)'); highlightList('Werra (Sommer)')" onmouseout="unHighlight('Werra (Sommer)'); unHighlightList('Werra (Sommer)')" onclick="selectRiver('Werra (Sommer)')" coords="316,361,334,351,360,342,387,345,398,354,384,372,381,389,371,400,350,390,345,382,336,378,334,372,329,368" /> |
66 <area id="werra_winter_area" shape="poly" onmouseover="highlight('Werra (Winter)')" onmouseout="unHighlight('Werra (Winter)')" onclick="selectRiver('Werra (Winter)')" coords="315,362,326,388,334,398,350,409,370,400,353,391,347,388,346,385,344,382,335,378,333,372,329,368" /> | 69 <area id="werra_winter_area" shape="poly" onmouseover="highlight('Werra (Winter)'); highlightList('Werra (Winter)')" onmouseout="unHighlight('Werra (Winter)'); unHighlightList('Werra (Winter)')" onclick="selectRiver('Werra (Winter)')" coords="315,362,326,388,334,398,350,409,370,400,353,391,347,388,346,385,344,382,335,378,333,372,329,368" /> |
67 <area id="weser_area" shape="poly" onmouseover="highlight('Weser')" onmouseout="unHighlight('Weser')" onclick="selectRiver('Weser')" coords="255,166,227,172,232,227,268,237,241,279,246,298,247,313,275,313,282,330,289,353,314,363,332,351,318,328,316,308,299,280,303,255,300,217,263,203,273,176" /> | 70 <area id="weser_area" shape="poly" onmouseover="highlight('Weser'); highlightList('Weser')" onmouseout="unHighlight('Weser'); unHighlightList('Weser')" onclick="selectRiver('Weser')" coords="255,166,227,172,232,227,268,237,241,279,246,298,247,313,275,313,282,330,289,353,314,363,332,351,318,328,316,308,299,280,303,255,300,217,263,203,273,176" /> |
68 <!-- ohne daten --> | 71 <!-- ohne daten --> |
69 <area id="donau_1_area" shape="poly" onmouseover="highlight('Donau_1')" onmouseout="unHighlight('Donau_1')" onclick="selectRiver('Donau_1')" coords="346,639,316,672,334,750,379,750,374,735,369,715,370,696,372,664,365,648" /> | 72 <area id="donau_1_area" shape="poly" onmouseover="highlight('Donau_1')" onmouseout="unHighlight('Donau_1')" onclick="selectRiver('Donau_1')" coords="346,639,316,672,334,750,379,750,374,735,369,715,370,696,372,664,365,648" /> |
70 <area id="donau_2_area" shape="poly" onmouseover="highlight('Donau_2')" onmouseout="unHighlight('Donau_2')" onclick="selectRiver('Donau_2')" coords="394,615,370,655,373,670,370,721,380,749,409,741,403,706,413,682,412,644,416,623" /> | 73 <area id="donau_2_area" shape="poly" onmouseover="highlight('Donau_2')" onmouseout="unHighlight('Donau_2')" onclick="selectRiver('Donau_2')" coords="394,615,370,655,373,670,370,721,380,749,409,741,403,706,413,682,412,644,416,623" /> |
71 <area id="donau_3_area" shape="poly" onmouseover="highlight('Donau_3')" onmouseout="unHighlight('Donau_3')" onclick="selectRiver('Donau_3')" coords="503,600,477,596,459,603,427,622,413,644,414,682,404,707,416,748,448,717,456,705,456,682,450,659,464,634,518,617" /> | 74 <area id="donau_3_area" shape="poly" onmouseover="highlight('Donau_3')" onmouseout="unHighlight('Donau_3')" onclick="selectRiver('Donau_3')" coords="503,600,477,596,459,603,427,622,413,644,414,682,404,707,416,748,448,717,456,705,456,682,450,659,464,634,518,617" /> |
72 <area id="donau_4_area" shape="poly" onmouseover="highlight('Donau_4')" onmouseout="unHighlight('Donau_4')" onclick="selectRiver('Donau_4')" coords="556,614,507,621,466,635,451,660,456,679,457,706,434,732,419,747,482,745,510,696,506,669,562,645" /> | 75 <area id="donau_4_area" shape="poly" onmouseover="highlight('Donau_4')" onmouseout="unHighlight('Donau_4')" onclick="selectRiver('Donau_4')" coords="556,614,507,621,466,635,451,660,456,679,457,706,434,732,419,747,482,745,510,696,506,669,562,645" /> |