Prosím vás ak môžte pozrite sa mi na toto!
Je to úplne jednoduchý skriptík.
Mám tu takú mini fotogalériu na kt. robím pokusy.
Je tam obrazovka so zväčšenou fotografiou a pod ňou mám tlačítka pre ktoré píšem funkciu P().
Po nájazde myšou nad šípku vľavo(ostatné ešte nefungujú) by sa mala fotka zmeniť pomocou x-1 v indexe fotky z poľa img(pole s fotkami).
Samozrejme mi to nefunguje a hlási mi chybu ,,img[...].src' is null or not an object,,
Neviem či to správne chápem, že funkcia nepozná pole img, ale neviem, ako jej ho predať.
Vďaka!
link:
http://camo.tym.sk/
Kód:
<body style="background-color:#d5d6d5; text-align:center;"
onload="document.getElementById('foto').src=img[2].src">
<script type="text/javascript">
var img = [];
img[0] = new Image();
img[0].src = "ema43.png ";
img[1] = new Image();
img[1].src = "dlazba43.png ";
img[2] = new Image();
img[2].src = "ceresne243.png ";
img[3] = new Image();
img[3].src = "vandali43.png ";
img[4] = new Image();
img[4].src = "ceresne43.png ";
function F(x)
{document.getElementById('foto').src=x};
function P(z)
{
var x=0;
while (img[x].src == document.getElementById('foto').src)
{ x++; }
switch(z) {
case 1 : document.getElementById('foto').src=img[x-1].src;
document.getElementById('T1').style.visibility="visible";
break;
case 2 : document.getElementById('foto').src=img[x+1].src;
document.getElementById('T4').style.visibility="visible";
break;
}
}
</script>
<div style="margin:100px auto;
width:710px; height:562px;
background-image:url('litebox.png');
text-align:left">
<img src=" " id="foto"
style="width:600px; height:450px; margin:25px 20px 0px 87px ">
<a href="" class="block" style="margin:17px 2px 0px 151px; width:70px; height:50px;"
onmouseover="P(1)" ><img id="T1" src="T1.png" style="visibility:hidden"
onmouseout="this.style.visibility='hidden'"></a>
<a href="" style="margin:0px 2px 0px 0px; background-color:red;width:54px; height:45px"></a>
<a href="" style="margin:0px 2px 0px 0px; background-color:red;width:58px; height:45px"></a>
<a href="" style="margin:0px 0px 0px; background-color:red;width:67px; height:45px"></a>
</div>
<div id="nahlad" style="margin-top:0px;
height:150px; width:100%;
overflow:auto;
background-color:#d5d6d5" >
<img src="emaM.png" alt="" onmouseover="F(img[0].src)">
<img src="dlazbaM.png" alt="" onmouseover="F(img[1].src)">
<img src="ceresne2M.png" alt="" onmouseover="F(img[2].src)">
<img src="vandaliM.png" alt="" onmouseover="F(img[3].src)">
<img src="ceresneM.png" alt="" onmouseover="F(img[4].src)">
</div>
</body>