Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Linki pod image rotator
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
donveli16
CODE
<script language = "JavaScript">
zdjecia=['1.jpg','2.jpg','3.jpg'];
linki=['http://link1.pl','http://link2.pl','http://link3.pl'];
i=0; // zmienne bleble
document.write('<a href="" ><img src="1.jpg" name="ImgRotate" /></a>');
function ImgRotate(){
if(i>=zdjecia.length){ i=0; }// ustawia i na 0 gdy przekroszy rozmiar tablicy
document.images['ImgRotate'].src=zdjecia[i++]; //ustawia obrazek o name="ImgRotate"
setTimeout("ImgRotate()",1000); //zapetla sie
}
onload=ImgRotate; //przy urchomieniu okna
</script>


Mam taki kod nie wiem jak podpiąć linki pod zmieniający się obrazek stosując tylko javscript lub html.

trueblue
  1. document.images['ImgRotate'].src=zdjecia[i]; //ustawia obrazek o name="ImgRotate"
  2. document.images['ImgRotate'].parentNode.href=linki[i++];
donveli16
CODE
<script language = "JavaScript">
zdjecia=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
linki=['http://link1.com','http://link2.com','http://link3.com','http://link4.com','http://link5.com'];
i=0;
timer = 3000;
////////////////////////////////Bzdury//////////////////////////////////
document.write('<div style="width: 305px; height: 230px;">');
document.write('<a href="" ><img src="1.jpg" alt="" name="ImgRotate" style="border: 3px inset black; width: 300px; height: 225px;" /></a>');
document.write('</div>');
document.write('<div style=" width: 305px; height: 25px;">');
document.write('<table style="position: relative; left: 155px;background: black;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;"><tr><td id="tdNumber1">1</td><td id="tdNumber2">2</td><td id="tdNumber3">3</td><td id="tdNumber4">4</td><td id="tdNumber5">5</td></tr></table>');
document.write('<style type="text/css">#tdNumber1{width: 25px; height: 20px;text-align:center;color: white; cursor: default;}</style>');
document.write('<style type="text/css">#tdNumber2{width: 25px; height: 20px;text-align:center;color: white; cursor: default;}</style>');
document.write('<style type="text/css">#tdNumber3{width: 25px; height: 20px;text-align:center;color: white; cursor: default;}</style>');
document.write('<style type="text/css">#tdNumber4{width: 25px; height: 20px;text-align:center;color: white; cursor: default;}</style>');
document.write('<style type="text/css">#tdNumber5{width: 25px; height: 20px;text-align:center;color: white; cursor: default;}</style>');
document.write('<style type="text/css">#tdNumber1:hover{color: red;text-shadow: 0px 0px 8px #8A0886}</style>');
document.write('<style type="text/css">#tdNumber2:hover{color: red;text-shadow: 0px 0px 8px #8A0886}</style>');
document.write('<style type="text/css">#tdNumber3:hover{color: red;text-shadow: 0px 0px 8px #8A0886}</style>');
document.write('<style type="text/css">#tdNumber4:hover{color: red;text-shadow: 0px 0px 8px #8A0886}</style>');
document.write('<style type="text/css">#tdNumber5:hover{color: red;text-shadow: 0px 0px 8px #8A0886}</style>');
document.write('</div>');

function ImgRotate(){
if(i>=zdjecia.length){ i=0; }
document.images['ImgRotate'].src=zdjecia[i];
document.images['ImgRotate'].parentNode.href=linki[i++];
document.getElementById('tdNumber1').onclick=function() {document.images['ImgRotate'].src=zdjecia[0];
document.images['ImgRotate'].parentNode.href=linki[0];}
document.getElementById('tdNumber2').onclick=function() {document.images['ImgRotate'].src=zdjecia[1];
document.images['ImgRotate'].parentNode.href=linki[1];}
document.getElementById('tdNumber3').onclick=function() {document.images['ImgRotate'].src=zdjecia[2];
document.images['ImgRotate'].parentNode.href=linki[2];}
document.getElementById('tdNumber4').onclick=function() {document.images['ImgRotate'].src=zdjecia[3];
document.images['ImgRotate'].parentNode.href=linki[3];}
document.getElementById('tdNumber5').onclick=function() {document.images['ImgRotate'].src=zdjecia[4];
document.images['ImgRotate'].parentNode.href=linki[4];}
setTimeout("ImgRotate()",timer);
}
onload=ImgRotate;
</script>


Dzięki dobra robota. Skrypt się miewa jako o tak o . Chciałbym ,żeby po najechaniu na obszar, na obrazku, niedaleko bocznej krawędzi wyświetlała się strzałka, wśrodku obrazka. Kliknięcie w obszar po lewej obrazek w tyl, klikniecie w obszar po prawej ,obrazek w przód.
To jest Okno: (kreski(-) to obrazek,(=)nic wypełnienie)
-------------------------------------------------------
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
|strefa1|-----------------------------------|strefa2|
-------------------------------------------------------
===================|--1--2--3--4--5| //Tabelka zmian obrazków(zrobiona)

No to po najechaniu w strefa1 wyświetla się szczała z lewej ,a strefa2 szczała z prawej.
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.