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>- 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="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>
- 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.
<<-Efect zbor fluturi -- Colorare text->>