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
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Schimbare imagine din select

Last accessed pages

  1. Conditional IF in Limba Engleza - Fraze Conditionale (45106)
  2. Animatie elemente HTML cu CSS (656)
  3. Instructiuni conditionale if, else, switch (8549)
  4. Poezii pentru copii, in engleza (10401)
  5. Curs si Tutoriale Ajax (3756)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2277)
  2. Curs HTML gratuit Tutoriale HTML5 (1636)
  3. Curs si Tutoriale JavaScript (1601)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1551)
  5. Curs CSS Online Tutoriale CSS3 (1436)