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
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Auto schimbare imagini

Last accessed pages

  1. Data si Ora in engleza - Date and Time (23211)
  2. Gramatica limbii engleze - Prezentare Generala (210489)
  3. Caractere speciale - Entitati HTML (12909)
  4. Lucrul cu mai multe cadre (3373)
  5. Expresii regulate Regex (2646)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1065)
  2. Curs HTML gratuit Tutoriale HTML5 (879)
  3. Coduri pt culori (621)
  4. Creare si editare pagini HTML (495)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (466)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide