Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][CSS] Podświetlenie menu na mapie.
Forum PHP.pl > Forum > Przedszkole
binprogrammer
9.12.2011, 21:32:10
Witam. Mam tutaj taki kod z użyciem mapy.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Mapa</title>
  4. <style type=text/css> 
  5. body{
  6. position: fixed;
  7. bottom: 50%;
  8. left: 22%;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" />
  14.  
  15. <map name="map">
  16. <area shape="rect" coords="0,2,198,36" target="Wnętrza prywatne" href="wnetrza-prywatne.html"/>
  17. <area shape="rect" coords="221,2,384,32" target="Wnętrza komercyjne" href="wnetrza-komercyjne.html" />
  18. <area shape="rect" coords="399,1,489,33" target="design" href="design.html" />
  19. <area shape="rect" coords="507,2,762,32" target="Obiekty Użyteczności Publicznej" href="obiekty.uzytecznosci.publicznej.html" />
  20. <area shape="rect" coords="695,34,773,72" href="contact.html" />
  21. <area shape="rect" coords="498,34,575,75" href="studio.html" />
  22. <area shape="rect" coords="213,35,470,76" href="domy-jednorodzinne.html" />
  23. <area shape="rect" coords="2,38,188,71" href="budynki-wielorodzinne.html" />
  24. </map>
  25. </body>
  26. </html>
[HTML] pobierz, plaintext



Chciałbym zrobić tak, aby po najechaniu na część obrazka zmieniał się obrazek. Ważne jest to, aby to było po najechaniu na część obrazka, bo chciałbym uzyskać efekt podświetlenia linka na który się najeżdża.

Proszę o jakieś podpowiedzi, próbowałem z onMouseOut, ale nie wiedziałem zbytnio gdzie to wklikać.
Pozdrawiam.
Kostek.88
9.12.2011, 22:07:44
Kiedys cos podobnego robilem. To byla mapa wojewodztw. W skrocie: mialem 17 grafik: kazda byla osobnym obrazkiem calej mapy PL z podswietlonym wojewodztwem. 17. mapa byla bez podswietlenia zadnego wojewodztwa - grafika wyjsciowa. Na poczatku bylo cache'owanie obrazkow, co by nie bylo opoznien przy ladowaniu grafik po najechaniu na wojewodztwo. A zdarzenia odpowiedzialne za to to oczywiscie onmouseover i onmouseout. Osobiscie uwazam, ze sa lepsze sposoby, ale ten nie jest zly i przede wszystkim dzialal mi dobrze smile.gif

Oto kod:

java script:
[HTML] pobierz, plaintext 
  1. if(document.images) {
  2.  
  3.    imagemap_default = new Image();
  4.    imagemap_default.src = 'gfx/mapka_all.gif';
  5.  
  6.    imagemap_1 = new Image();
  7.    imagemap_1.src = 'gfx/mapka_dolnoslaskie.gif';
  8.  
  9.    imagemap_2 = new Image();
  10.    imagemap_2.src = 'gfx/mapka_kujawskopomorskie.gif';
  11.  
  12.    imagemap_3 = new Image();
  13.    imagemap_3.src = 'gfx/mapka_lodzkie.gif';
  14.  
  15.    imagemap_4 = new Image();
  16.    imagemap_4.src = 'gfx/mapka_lubelskie.gif';
  17.  
  18.    imagemap_5 = new Image();
  19.    imagemap_5.src = 'gfx/mapka_lubuskie.gif';
  20.  
  21.    imagemap_6 = new Image();
  22.    imagemap_6.src = 'gfx/mapka_malopolskie.gif';
  23.  
  24.    imagemap_7 = new Image();
  25.    imagemap_7.src = 'gfx/mapka_mazowieckie.gif';
  26.  
  27.    imagemap_8 = new Image();
  28.    imagemap_8.src = 'gfx/mapka_opolskie.gif';
  29.  
  30.    imagemap_9 = new Image();
  31.    imagemap_9.src = 'gfx/mapka_podkarpackie.gif';
  32.  
  33.    imagemap_10 = new Image();
  34.    imagemap_10.src = 'gfx/mapka_podlaskie.gif';
  35.  
  36.    imagemap_11 = new Image();
  37.    imagemap_11.src = 'gfx/mapka_pomorskie.gif';
  38.  
  39.    imagemap_12 = new Image();
  40.    imagemap_12.src = 'gfx/mapka_slaskie.gif';
  41.  
  42.    imagemap_13 = new Image();
  43.    imagemap_13.src = 'gfx/mapka_swietokrzyskie.gif';
  44.  
  45.    imagemap_14 = new Image();
  46.    imagemap_14.src = 'gfx/mapka_warminskomazurskie.gif';
  47.  
  48.    imagemap_15 = new Image();
  49.    imagemap_15.src = 'gfx/mapka_wielkopolskie.gif';
  50.  
  51.    imagemap_16 = new Image();
  52.    imagemap_16.src = 'gfx/mapka_zachodniopomorskie.gif';
  53. }
  54.  
  55. function rollOver(iName,iState) {
  56.    if(document.images) {
  57.       document.images[iName].src = eval(iName + '_' + iState + '.src');
  58.    }
  59. }
[HTML] pobierz, plaintext


I fragment HTML
[HTML] pobierz, plaintext 
  1. <area shape="poly" coords="383,154,378,158,375,163,372,168,370,172,368,175,365,174,361,171,358,170,350
    ,169,344,168,341,166,341,163,341,161,339,159,337,156,335,154,336,153,337,150,337,
    147,337,143,334,141,332,144,329,142,329,140,330,140,329,138,328,136,326,137,323,1
    39,320,139,320,137,318,134,317,131,315,130,314,128,315,126,314,124,311,123,308,12
    2,307,120,305,116,303,113,303,111,306,109,304,106,303,103,302,101,302,98,306,98,3
    09,98,312,98,313,96,316,96,320,96,324,91,331,86,336,83,342,79,344,73,346,69,346,6
    7,342,62,341,60,339,58,340,55,338,53,336,51,335,49,337,46,341,44,345,41,347,38,34
    6,36,349,34,353,35,356,38,363,41,367,44,372,49,375,55,376,66,378,74,381,85,386,98
    ,390,108,394,114,393,118,394,121,397,128,397,136,397,145,394,149,390,152,383,154"     href="link.html" onMouseOut="rollOver('imagemap','prev')" onMouseOver="rollOver('imagemap','10')" />
[HTML] pobierz, plaintext
binprogrammer
10.12.2011, 11:14:20
Mógłbyś dopasować to do chociaż jednego kawałka mojego kodu? Bo nie mogę się połapać trochę :/

I czy te obrazki gfx/mapka_wielkopolskie.gif to są wielkości normalnej mapki, czy pojedyncze ikonki ?

Mam problem z połączeniem tego, zrobiłem to tak:

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Mapa</title>
  4. <style type=text/css> 
  5. body{
  6. position: fixed;
  7. bottom: 50%;
  8. left: 22%;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <?php
  14. if(document.images) {
  15.  
  16.    imagemap_default = new Image();
  17.    imagemap_default.src = 'mapa.jpg';
  18.  
  19.    imagemap_1 = new Image();
  20.    imagemap_1.src = 'mapa1.jpg';
  21.  
  22.    imagemap_2 = new Image();
  23.    imagemap_2.src = 'mapa1.jpg';
  24.  
  25.    imagemap_3 = new Image();
  26.    imagemap_3.src = 'mapa1.jpg';
  27.  
  28.    imagemap_4 = new Image();
  29.    imagemap_4.src = 'mapa1.jpg';
  30.  
  31.    imagemap_5 = new Image();
  32.    imagemap_5.src = 'mapa1.jpg';
  33.  
  34.    imagemap_6 = new Image();
  35.    imagemap_6.src = 'mapa1.jpg';
  36.  
  37.    imagemap_7 = new Image();
  38.    imagemap_7.src = 'mapa1.jpg';
  39.  
  40.    imagemap_8 = new Image();
  41.    imagemap_8.src = 'mapa1.jpg';
  42.  
  43.    imagemap_9 = new Image();
  44.    imagemap_9.src = 'mapa1.jpg';
  45.  
  46.    imagemap_10 = new Image();
  47.    imagemap_10.src = 'mapa1.jpg';
  48.  
  49.    imagemap_11 = new Image();
  50.    imagemap_11.src = 'mapa1.jpg';
  51.  
  52.    imagemap_12 = new Image();
  53.    imagemap_12.src = 'mapa1.jpg';
  54.  
  55.    imagemap_13 = new Image();
  56.    imagemap_13.src = 'mapa1.jpg';
  57.  
  58.    imagemap_14 = new Image();
  59.    imagemap_14.src = 'mapa1.jpg';
  60.  
  61.    imagemap_15 = new Image();
  62.    imagemap_15.src = 'mapa1.jpg';
  63.  
  64.    imagemap_16 = new Image();
  65.    imagemap_16.src = 'mapa1.jpg';
  66. }
  67.  
  68. function rollOver(iName,iState) {
  69.    if(document.images) {
  70.       document.images[iName].src = eval(iName + '_' + iState + '.src');
  71.    }
  72. }
  73. ?>
  74. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" />
  75.  
  76. <map name="map">
  77. <area shape="rect" coords="0,2,198,36" target="Wnętrza prywatne" href="wnetrza-prywatne.html" onMouseOut="rollOver('imagemap','prev')" onMouseOver="rollOver('imagemap','10')"/>
  78. <area shape="rect" coords="221,2,384,32" target="Wnętrza komercyjne" href="wnetrza-komercyjne.html" />
  79. <area shape="rect" coords="399,1,489,33" target="design" href="design.html" />
  80. <area shape="rect" coords="507,2,762,32" target="Obiekty Użyteczności Publicznej" href="obiekty.uzytecznosci.publicznej.html" />
  81. <area shape="rect" coords="695,34,773,72" href="contact.html" />
  82. <area shape="rect" coords="498,34,575,75" href="studio.html" />
  83. <area shape="rect" coords="213,35,470,76" href="domy-jednorodzinne.html" />
  84. <area shape="rect" coords="2,38,188,71" href="budynki-wielorodzinne.html" />
  85. </map>
  86. </body>
  87. </html>
[PHP] pobierz, plaintext




I wywala Parse error: syntax error, unexpected '=' in /home/qwert/public_html/mapa.php on line 16.
Kostek.88
10.12.2011, 12:25:05
Cytat
W skrocie: mialem 17 grafik: kazda byla osobnym obrazkiem calej mapy PL z podswietlonym wojewodztwem


Tak, to byly wielkosci normalnej mapki. Aaaaaah, rozumiem :-) Wkleilem ten kod wyzej jako PHP, zeby ladniej pokolorowalo, a to jest JavaScript smile.gif Zatem wrzuc ten kod jako JS do HEAD smile.gif Sorki za zamieszanie.

PS. Poza tym laczenie stringow ze zmiennymi w PHP to . (kropa) natomiast w JS wlasnie + (plus), jak bylo w moim przykladzie.
binprogrammer
10.12.2011, 13:18:57
Nadal nie działa.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Mapa</title>
  4. <style type=text/css> 
  5. body{
  6. position: fixed;
  7. bottom: 50%;
  8. left: 22%;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. if(document.images) {
  13.  
  14.    imagemap_default = new Image();
  15.    imagemap_default.src = 'mapa.jpg';
  16.  
  17.    imagemap_1 = new Image();
  18.    imagemap_1.src = 'mapa1.jpg';
  19.  
  20.    imagemap_2 = new Image();
  21.    imagemap_2.src = 'mapa1.jpg';
  22.  
  23.    imagemap_3 = new Image();
  24.    imagemap_3.src = 'mapa1.jpg';
  25.  
  26.    imagemap_4 = new Image();
  27.    imagemap_4.src = 'mapa1.jpg';
  28.  
  29.    imagemap_5 = new Image();
  30.    imagemap_5.src = 'mapa1.jpg';
  31.  
  32.    imagemap_6 = new Image();
  33.    imagemap_6.src = 'mapa1.jpg';
  34.  
  35.    imagemap_7 = new Image();
  36.    imagemap_7.src = 'mapa1.jpg';
  37.  
  38.    imagemap_8 = new Image();
  39.    imagemap_8.src = 'mapa1.jpg';
  40.  
  41. function rollOver(iName,iState) {
  42.    if(document.images) {
  43.       document.images[iName].src = eval(iName + '_' + iState + '.src');
  44.    }
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" />
  50.  
  51. <map name="map">
  52. <area shape="rect" coords="0,2,198,36" target="Wnętrza prywatne" href="wnetrza-prywatne.html" onMouseOut="rollOver('imagemap','prev')" onMouseOver="rollOver('imagemap','10')"/>
  53. <area shape="rect" coords="221,2,384,32" target="Wnętrza komercyjne" href="wnetrza-komercyjne.html" />
  54. <area shape="rect" coords="399,1,489,33" target="design" href="design.html" />
  55. <area shape="rect" coords="507,2,762,32" target="Obiekty Użyteczności Publicznej" href="obiekty.uzytecznosci.publicznej.html" />
  56. <area shape="rect" coords="695,34,773,72" href="contact.html" />
  57. <area shape="rect" coords="498,34,575,75" href="studio.html" />
  58. <area shape="rect" coords="213,35,470,76" href="domy-jednorodzinne.html" />
  59. <area shape="rect" coords="2,38,188,71" href="budynki-wielorodzinne.html" />
  60. </map>
  61. </body>
  62. </html>
[HTML] pobierz, plaintext


Co robię źle ?
Kostek.88
10.12.2011, 13:30:38
1) Dlaczego masz w JS zdefiniowane 16 obrazkow, skoro masz... chyba 8 linkow?
2) Dlaczego wszedzie masz wstawiony ten sam obrazek "mapa 1"?
3) Czy na pewno podales dobre sciezki do obrazka? Bo na razie widze, ze masz podana sciezke do serwera, a kazdy osobny plik to mapa1, mapa1, mapa1 itd.
4) Co Ci nie dziala? Jakie sa objawy? Nie mam magicznej kuli, zeby ocenic.
5) Co Ci wyrzuca FieBug w konsoli?
binprogrammer
10.12.2011, 14:30:58
Jak skróciłem do 8 obrazków to nadal nie działa, wszędzie są takie same, ponieważ chciałem tylko zobaczyć czy działa - a nie działa, adres obrazka jest dobry.

Objawy? Nie wiem, po prostu nie działa, najeżdzam na linki i nic mi się nie zmienia, a obrazek ten drugi mapa1.jpg jest inny od delfaut.

Nie wiem o co chodzi sad.gif
GoOx
10.12.2011, 15:33:25
Nie lepiej użyć hovera?
Kostek.88
10.12.2011, 17:16:22
Zainstaluj FireBug dla FF lub Chrome i zobacz bledy w konsoli

Cytat
Osobiscie uwazam, ze sa lepsze sposoby, ale ten nie jest zly i przede wszystkim dzialal mi dobrze


Pewnie tak... ale mialem w zasobach gotowca smile.gif

binprogrammer
10.12.2011, 21:18:27
Uncaught TypeError: Cannot set property 'src' of undefined
mapa.html:1Uncaught ReferenceError: imagemap_prev is not defined
Kostek.88
11.12.2011, 02:50:29
Przy onMouseOut zamiast prev daj default tongue.gif Nie wiem skad mialem prev w skrypcie (robilem to 3 lata temu), ale to przy jednym linku tylko. Wkleilem Ci pierwszy link, ktory akurat byl zly wink.gif

Aha, i zeby wyjasnic Ci czemu default... odwolujesz sie do imagemap_default w JS... co jest obrazkiem wyjsciowym, czyli jak zjedziesz mysza z obrazka, powinien wrocic do punktu wyjsciowego. Jak odwolales sie do zmiennej prev, ktora nie istnieje (stad imagemap_prev is not defined), JS interpretuje to jako "undefined" (stad Cannot set property 'src' of undefined)
binprogrammer
11.12.2011, 21:26:50
Uncaught TypeError: Cannot set property 'src' of undefined

Nadal to wypluwa.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Mapa</title>
  4. <style type=text/css> 
  5. body{
  6. position: fixed;
  7. bottom: 50%;
  8. left: 22%;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. if(document.images) {
  13.  
  14.    imagemap_default = new Image();
  15.    imagemap_default.src = 'mapa.jpg';
  16.  
  17.    imagemap_1 = new Image();
  18.    imagemap_1.src = 'mapa1.jpg';
  19.  
  20.    imagemap_2 = new Image();
  21.    imagemap_2.src = 'mapa1.jpg';
  22.  
  23.    imagemap_3 = new Image();
  24.    imagemap_3.src = 'mapa1.jpg';
  25.  
  26.    imagemap_4 = new Image();
  27.    imagemap_4.src = 'mapa1.jpg';
  28.  
  29.    imagemap_5 = new Image();
  30.    imagemap_5.src = 'mapa1.jpg';
  31.  
  32.    imagemap_6 = new Image();
  33.    imagemap_6.src = 'mapa1.jpg';
  34.  
  35.    imagemap_7 = new Image();
  36.    imagemap_7.src = 'mapa1.jpg';
  37.  
  38.    imagemap_8 = new Image();
  39.    imagemap_8.src = 'mapa1.jpg';
  40.  
  41. }
  42.  
  43. function rollOver(iName,iState) {
  44.    if(document.images) {
  45.       document.images[iName].src = eval(iName + '_' + iState + '.src');
  46.    }
  47. }
  48. </script>
  49. </head>
  50. <body>
  51. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" />
  52.  
  53. <map name="map">
  54. <area shape="rect" coords="0,2,198,36" target="Wnętrza prywatne" href="wnetrza-prywatne.html" onMouseOut="rollOver('imagemap','default')" onMouseOver="rollOver('imagemap','1')"/>
  55. <area shape="rect" coords="221,2,384,32" target="Wnętrza komercyjne" href="wnetrza-komercyjne.html" />
  56. <area shape="rect" coords="399,1,489,33" target="design" href="design.html" />
  57. <area shape="rect" coords="507,2,762,32" target="Obiekty Użyteczności Publicznej" href="obiekty.uzytecznosci.publicznej.html" />
  58. <area shape="rect" coords="695,34,773,72" href="contact.html" />
  59. <area shape="rect" coords="498,34,575,75" href="studio.html" />
  60. <area shape="rect" coords="213,35,470,76" href="domy-jednorodzinne.html" />
  61. <area shape="rect" coords="2,38,188,71" href="budynki-wielorodzinne.html" />
  62. </map>
  63. </body>
  64. </html>
[HTML] pobierz, plaintext



Co jest źle ?
Kostek.88
11.12.2011, 22:18:50
Do obrazka dodaj parametr name="imagemap" , poniewaz w funkcji JS odwolujesz sie tak:

[HTML] pobierz, plaintext 
  1.  document.images[iName].src
[HTML] pobierz, plaintext


gdzie iName to imagemap (zdefiniowane wyzej) i taka tez musi byc nazwa dla obrazka.
binprogrammer
11.12.2011, 23:16:06
Nie rozumiem, sad.gif

W której linijce to dodać? w 51 ?
Kostek.88
12.12.2011, 02:07:55
Tak.

[HTML] pobierz, plaintext 
  1. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" name="imagemap" />
[HTML] pobierz, plaintext
binprogrammer
12.12.2011, 13:52:05
Działa.

Dzięki za pomoc.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.