Curs Javascript

Scriptul prezentat in aceasta pagina afiseaza in acelasi loc cate o imagine cu link propriu care se schimba la un anumit interval de timp.
Efectul acestui script il puteti vedea in exemplul de mai jos, fiecare imagine care se schimba automat la interval de 4 secunde contine si un link spre o pagina specifica.
Acest script poate fi util pentru bannere multiple afisate in acelasi loc.


Pentru a adauga acest script intr-o pagina web:
1. Introduceti in sectiunea HEAD a documentul HTML, urmatorul script:
<script type="text/javascript">
<!--
// https://marplo.net
// Matricea care contine calea pt. imagini
// Schimbati cu imaginile folosite de dv.
src = ["imgs/img1.jpg", "imgs/img2.jpg", "imgs/img3.jpg", "imgs/img4.jpg"]

// Matricea care contine adresele URL spre care va redirectiona imaginile
// Schimbati cu adresele URL folosite de dv.
url = ["https://marplo.net/anime/naruto-a",
"https://marplo.net/anime/naruto-a",
"https://marplo.net/anime/naruto-a",
"https://marplo.net/anime/dragon_ball_z-a"]

// Aici setati durata, in secunde pt. fiecare imagine
durata = 4;

// Codul umator prelucreaza matricele
// Schimba imagine la nr. de secunde stabilite
// Atribue fiecarei imagini URL-ul corespunator
var ex_ads=[]; var ex_ct=0;
function schimbaAd() {
  var ex_nc=(ex_ct+1)%src.length;
  if (ex_ads[ex_nc] && (ex_ads[ex_nc].complete || ex_ads[ex_nc].complete==null)) {
    document["Imagine"].src = ex_ads[ex_ct=ex_nc].src;
  }
  ex_ads[ex_nc=(ex_ct+1)%src.length] = new Image;
  ex_ads[ex_nc].src = src[ex_nc];
  setTimeout("schimbaAd()",durata*1000);
}
function adLink() {
  location.href = url[ex_ct];
}

// Apeleaza functia la incarcarea paginii
onload = function() {
  if (document.images)
    schimbaAd();
}
//-->
</script>

2. Dupa tagul <body>, in locatia unde vreti sa apara imaginile, adaugati urmatorul cod:
<a href="javascript:adLink();" onMouseOver="status=url[ex_ct]; return true;" onMouseOut="status=''">
  <img name="Imagine" src="imgs/img1.jpg" border="0">
</a>
- "img1.jpg" este prima imagine ca va apare, dupa care va incepe afisarea celorlalte. (puteti folosi si alte tipuri de imagini: ".gif", ".png")

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenísimo"
mai bun mai putin bun extrem de bun
Este fruto es buenísimo.
- Acest fruct este extrem /nemaipomenit de bun.
Auto schimbare imagini

Last accessed pages

  1. Prezentul simplu - Exercitii si teste incepatori (70314)
  2. Proverbe, expresii si zicatori (24683)
  3. Exercitii engleza - English Tests and exercises - Grammar (116286)
  4. Mini vocabular Englez-Roman (6506)
  5. Verbe - Exercitii si teste engleza incepatori (27091)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (486)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (418)
  3. Coduri pt culori (270)
  4. Formatare text in pagina html (160)
  5. Creare si editare pagini HTML (155)