Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Galeria + mapa bitowa
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
crio
Witam
Mam taki problem. Potrzebuje napisac skrypt ktory wykonuje nastepujace funkcje:
1. Wyswietla galerie.
2. Po wybraniu miniatury wyswietla ja jako duze foto
3. Na kazde duze foto nalozona jest mapa odsylaczy za pomoca ktorej odwoluje sie do konkretnych linkow
Galeryjke juz mam, ale nie wiem jak nalozyc odpowiednie mapy odsylaczy.
Prosze o pomoc w rozwiazaniu problemu
Na razie mam takie cos:
  1. <script language="JavaScript" type="text/JavaScript">
  2. var current_picture=0;
  3. pictures = new Array(3);
  4. pictures_big = new Array(3);
  5. map_picture = new Array(3);
  6.  
  7. pictures[0]="Imale.jpg";
  8. pictures[1]="IImale.jpg";
  9. pictures[2]="IIImale.jpg";
  10.  
  11. pictures_big[0]="M1.jpg";
  12. pictures_big[1]="M2.jpg";
  13. pictures_big[2]="M3.jpg";
  14.  
  15. map_picture[0]="0";
  16. map_picture[1]="1";
  17. map_picture[2]="2";
  18.  
  19. function LoadMidPicture(picture_index)
  20. {
  21. current_picture=picture_index;
  22. document.big_photo.src = pictures_big[picture_index];
  23. return;
  24. }
  25.  
  26. function LoadBigPicture(picture_index)
  27. {
  28. current_picture=picture_index;
  29. return;
  30. }
  31.  
  32. <tr><td width="100%" colspan=2><table cellpadding="4" cellspacing="4" width="100%"><tr><td class=darkn> Zdjęcia (kliknij zdjęcie, aby powiększyć)</td></tr><tr>
  33. <td align="center">
  34. <a href="javascript:LoadMidPicture(current_picture)" title="foto">
  35. <img src="M1.jpg" alt="foto" name="big_photo"
  36. usemap="javascript:LoadMapPicture(current_picture)"
  37. style="border: 1px solid #000000;" /></a>
  38.  
  39. <map name="0">
  40. <area shape="poly" coords="39,39,127,38,127,236,40,235" href=http://www.costam.pl>
  41. <area shape="poly" coords="211,39,211,232,128,233,126,40" href="#">
  42. </map>
  43. <map name="1">
  44. <area shape="poly" coords="62,41,301,41,301,348,228,348,227,304,61,306" href="#">
  45. <area shape="poly" coords="61,709,300,710,301,349,228,348,226,407,62,407" href="#">
  46. </map>
  47. <map name="2">
  48. <area shape="poly" coords="57,26,295,25,296,333,224,333,223,291,56,290" href="#">
  49. <area shape="poly" coords="297,695,58,694,57,392,223,391,223,333,296,334" href="#">
  50. </map>
  51.  
  52. </a></td></tr>
  53.  
  54. <tr>
  55. <td align="center"><table align="center" cellpadding="1" cellspacing="1">
  56. <tr><td align="center" valign="middle">
  57. <a href="javascript:LoadMidPicture(0);" title="foto" id="id0">
  58. <img src="Imale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a>
  59. </td>
  60.  
  61. <td align="center" valign="middle">
  62. <a href="javascript:LoadMidPicture(1);" title="foto" id="id1">
  63. <img src="IImale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a></td>
  64.  
  65. <td align="center" valign="middle">
  66. <a href="javascript:LoadMidPicture(2);" title="foto" id="id2">
  67. <img src="IIImale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a></td>
  68. </tr><tr>
  69. </tr>
  70.  
  71. <script language="JavaScript" type="text/JavaScript">
  72. LoadBigPicture(0);
lord_t
Popraw 1. z poniższych funkcji, a drugą dodaj
Kod
function LoadMidPicture(picture_index)
{
current_picture=picture_index;
document.big_photo.src = pictures_big[picture_index];
LoadMap(picture_index);
return;
}

function LoadMap(i)
{
document.getElementById('id_big').useMap="#mapa"+i;
}


name-y map zmień na mapaX gdzie X to numer mapy

nadaj id dużemu zdjęciu i zmień useMap
  1. <img id="id_big" ... useMap="#mapa0" ... /></a>


Chyba niczego nie zapomniałem:)


Uwaga: Nie wydaje mi się, żeby linijki
Kod
return;

były na coś potrzebne.

Testowalem na FF. Dla problemów z IE podpowiedź znaleziona na necie:
Kod
document.getElementById("elementID").useMap = value//FF
document.all.elementID.useMap = value // tylko IE
crio
Super, dzieki. Dziala
Pozdrawiam
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.