Curs Javascript

Scriptul prezentat in aceasta pagina afiseaza in acelasi loc cate o imagine cu link propriu spre o anumita pagina, care se poate schimba dintr-o caseta Select ce contine mai multe imagini.
Puteti testa scriptul in exemplul de mai jos.


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

// Functia pt. link-uri care sunt in aceeasi ordine cu imaginile
function linkuri(imagine) {
  var adrURL=new Array()
  // Aici adaugati adresele URL care vor fi deschise la
  // click pe fiecare imagine,
  // Pentru adaugarea mai multor adrese, respectati ordinea indicelui din matrice
  adrURL[0]="https://marplo.net/anime/naruto-a"
  adrURL[1]="https://marplo.net/anime/naruto-a"
  adrURL[2]="https://marplo.net/anime/naruto-a"
  adrURL[3]="https://marplo.net/anime/dragon_ball_z-a"

  // Deschide pagina cu URL-ul selectat
  window.location=adrURL[imagine]
}

// Functia care schimba imaginea
function showimage() {
  if (!document.images)
    return
  document.images.pozas.src=
  document.mypics.poza.options[document.mypics.poza.selectedIndex].value
}
//-->
</script>

2. Dupa tagul <body>, in locatia unde vreti sa apara caseta de selectare impreuna cu imaginile, adaugati urmatorul cod:
<div>
  <form name="mypics" style="margin:4px;">
    <select name="poza" size="1" onChange="showimage()">
      <option select="selected" value="imgs/img1.jpg">Naruto</option>
      <option value="imgs/img2.jpg">Sasuke</option>
      <option value="imgs/img3.jpg">Sakura</option>
      <option value="imgs/img4.jpg">Son Goku</option>
    </select>
  </form>
  <a href="javascript:linkuri(document.mypics.poza.selectedIndex)" onMouseover="window.status='';return true">
    <img src="imgs/img1.jpg" name="pozas" width="100" height="100" border="0">
  </a>
</div>
- Efectuati modificarile necesare, conform cu imaginile folosite de dv.
- Pentru ca fiecare link sa corespunda cu imaginea specifica lui, adaugati in script, in functia "linkuri()", adresele URL in aceasi ordine cu imaginile corespunzatoare adaugate in caseta de selectare.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Schimbare imagine din select

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (72073)
  2. Blog si Cugetari Personale (64511)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (44769)
  4. Pronumele ca obiect al prepozitiei (931)
  5. Limba spaniola curs online incepatori si avansati (18835)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2094)
  2. Curs HTML gratuit Tutoriale HTML5 (1792)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (1364)
  4. Curs si Tutoriale JavaScript (1343)
  5. Curs CSS Online Tutoriale CSS3 (1232)