Galeria + mapa bitowa Opcje

[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:

[HTML] pobierz, plaintext 
<script language="JavaScript" type="text/JavaScript">
var current_picture=0;
pictures = new Array(3);
pictures_big = new Array(3);
map_picture = new Array(3);
 
pictures[0]="Imale.jpg";
pictures[1]="IImale.jpg";
pictures[2]="IIImale.jpg";
 
pictures_big[0]="M1.jpg";
pictures_big[1]="M2.jpg";
pictures_big[2]="M3.jpg";
 
map_picture[0]="0";
map_picture[1]="1";
map_picture[2]="2";
 
function LoadMidPicture(picture_index)
{
current_picture=picture_index;
document.big_photo.src = pictures_big[picture_index];
return;
}
 
function LoadBigPicture(picture_index)
{
current_picture=picture_index;
return;
}
</script>
 
<table>
<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>
<td align="center">
<a href="javascript:LoadMidPicture(current_picture)" title="foto">
<img src="M1.jpg" alt="foto" name="big_photo" 
usemap="javascript:LoadMapPicture(current_picture)"
style="border: 1px solid #000000;" /></a>
 
<map name="0">
<area shape="poly" coords="39,39,127,38,127,236,40,235" href=http://www.costam.pl>
<area shape="poly" coords="211,39,211,232,128,233,126,40" href="#">
</map>
<map name="1">
<area shape="poly" coords="62,41,301,41,301,348,228,348,227,304,61,306" href="#">
<area shape="poly" coords="61,709,300,710,301,349,228,348,226,407,62,407" href="#">
</map>
<map name="2">
<area shape="poly" coords="57,26,295,25,296,333,224,333,223,291,56,290" href="#">
<area shape="poly" coords="297,695,58,694,57,392,223,391,223,333,296,334" href="#">
</map>
 
</a></td></tr>
 
<tr>
<td align="center"><table align="center" cellpadding="1" cellspacing="1">
<tr><td align="center" valign="middle">
<a href="javascript:LoadMidPicture(0);" title="foto" id="id0">
   <img src="Imale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a>
</td>
 
<td align="center" valign="middle">
<a href="javascript:LoadMidPicture(1);" title="foto" id="id1">
   <img src="IImale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a></td>
 
<td align="center" valign="middle">
<a href="javascript:LoadMidPicture(2);" title="foto" id="id2">
    <img src="IIImale.jpg" alt="foto" width="200" height="230" style="border: 1px solid #000000;"></a></td>
</tr><tr>
</tr>
 
<script language="JavaScript" type="text/JavaScript">
LoadBigPicture(0);
</script></table>
[HTML] pobierz, plaintext 

Powód edycji: dodałem bbcode (cysiaczek)

[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

[HTML] pobierz, plaintext 
<img id="id_big" ...  useMap="#mapa0" ... /></a>
[HTML] pobierz, plaintext 

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