Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Linki pod image rotator
donveli16
post
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 8.07.2014

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


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.

Go to the top of the page
+Quote Post
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

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


  1. document.images['ImgRotate'].src=zdjecia[i]; //ustawia obrazek o name="ImgRotate"
  2. document.images['ImgRotate'].parentNode.href=linki[i++];


Ten post edytował trueblue 8.07.2014, 11:30:27
Go to the top of the page
+Quote Post
donveli16
post
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 8.07.2014

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


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.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 15.09.2025 - 03:01