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>
<div>- Efectuati modificarile necesare, conform cu imaginile folosite de dv.
<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>