Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript][CSS] Podświetlenie menu na mapie.
binprogrammer
post 9.12.2011, 21:32:10
Post #1





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Witam. Mam tutaj taki kod z użyciem mapy.

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



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.
Go to the top of the page
+Quote Post
Kostek.88
post 9.12.2011, 22:07:44
Post #2





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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:
  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. }


I fragment HTML
  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')" />


Ten post edytował Kostek.88 10.12.2011, 12:26:49
Go to the top of the page
+Quote Post
binprogrammer
post 10.12.2011, 11:14:20
Post #3





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


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:

  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>




I wywala Parse error: syntax error, unexpected '=' in /home/qwert/public_html/mapa.php on line 16.

Ten post edytował binprogrammer 9.12.2011, 22:10:48
Go to the top of the page
+Quote Post
Kostek.88
post 10.12.2011, 12:25:05
Post #4





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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.

Ten post edytował Kostek.88 10.12.2011, 12:27:52
Go to the top of the page
+Quote Post
binprogrammer
post 10.12.2011, 13:18:57
Post #5





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Nadal nie działa.

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


Co robię źle ?

Ten post edytował binprogrammer 10.12.2011, 14:26:59
Go to the top of the page
+Quote Post
Kostek.88
post 10.12.2011, 13:30:38
Post #6





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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?

Ten post edytował Kostek.88 10.12.2011, 13:31:22
Go to the top of the page
+Quote Post
binprogrammer
post 10.12.2011, 14:30:58
Post #7





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


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

Ten post edytował binprogrammer 10.12.2011, 14:32:06
Go to the top of the page
+Quote Post
GoOx
post 10.12.2011, 15:33:25
Post #8





Grupa: Zarejestrowani
Postów: 329
Pomógł: 6
Dołączył: 23.11.2011
Skąd: Łódź

Ostrzeżenie: (0%)
-----


Nie lepiej użyć hovera?
Go to the top of the page
+Quote Post
Kostek.88
post 10.12.2011, 17:16:22
Post #9





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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

Go to the top of the page
+Quote Post
binprogrammer
post 10.12.2011, 21:18:27
Post #10





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Uncaught TypeError: Cannot set property 'src' of undefined
mapa.html:1Uncaught ReferenceError: imagemap_prev is not defined
Go to the top of the page
+Quote Post
Kostek.88
post 11.12.2011, 02:50:29
Post #11





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


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)

Ten post edytował Kostek.88 11.12.2011, 02:53:22
Go to the top of the page
+Quote Post
binprogrammer
post 11.12.2011, 21:26:50
Post #12





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Uncaught TypeError: Cannot set property 'src' of undefined

Nadal to wypluwa.

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



Co jest źle ?
Go to the top of the page
+Quote Post
Kostek.88
post 11.12.2011, 22:18:50
Post #13





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Do obrazka dodaj parametr name="imagemap" , poniewaz w funkcji JS odwolujesz sie tak:

  1. document.images[iName].src


gdzie iName to imagemap (zdefiniowane wyzej) i taka tez musi byc nazwa dla obrazka.
Go to the top of the page
+Quote Post
binprogrammer
post 11.12.2011, 23:16:06
Post #14





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Nie rozumiem, sad.gif

W której linijce to dodać? w 51 ?
Go to the top of the page
+Quote Post
Kostek.88
post 12.12.2011, 02:07:55
Post #15





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Tak.

  1. <img src="http://www.fotoload.pl/123aa4/86e9f42219c742eb84212bf71dce160f19351.jpg" width="763" style="text-align: center" height="64" border="0" usemap="#map" name="imagemap" />
Go to the top of the page
+Quote Post
binprogrammer
post 12.12.2011, 13:52:05
Post #16





Grupa: Zarejestrowani
Postów: 249
Pomógł: 8
Dołączył: 10.08.2011
Skąd: Bełchatów

Ostrzeżenie: (10%)
X----


Działa.

Dzięki za pomoc.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 3.08.2025 - 07:20