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 tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Schimbare imagine din select

Last accessed pages

  1. Poezii pentru copii, in engleza (11486)
  2. Laravel - Instalare (1011)
  3. PHP PDO Introducere Conectari la Baze de Date (893)
  4. Pronumele in limba engleza - Pronouns (22109)
  5. Coduri pt culori (29048)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4473)
  2. Curs HTML gratuit Tutoriale HTML5 (3703)
  3. Curs si Tutoriale JavaScript (3404)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3277)
  5. Curs CSS Online Tutoriale CSS3 (3195)