online: 1; azi: 305; total: 52311 Webdesign - Scripturi - 20

Schimbare imagine din select


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">
<!--
// http://www.discant.ro

// 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]="http://www.discant.ro/anime/naruto-4-i.html"
  adrURL[1]="http://www.discant.ro/anime/naruto-7-i.html"
  adrURL[2]="http://www.discant.ro/anime/naruto-8-i.html"
  adrURL[3]="http://www.discant.ro/anime/dragon_ball_z-9-i.html"

  // 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="_cursuri-online/web-design/scripturi/_imgs/img1.jpg">Naruto</option>
      <option value="_cursuri-online/web-design/scripturi/_imgs/img2.jpg">Sasuke</option>
      <option value="_cursuri-online/web-design/scripturi/_imgs/img3.jpg">Sakura</option>
      <option value="_cursuri-online/web-design/scripturi/_imgs/img4.jpg">Son Goku</option>
    </select>
  </form>
  <a href="javascript:linkuri(document.mypics.poza.selectedIndex)" onMouseover="window.status='';return true">
    <img src="_cursuri-online/web-design/scripturi/_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.