Crearea unui banner alternant
Pentru a crea un banner alternant, avem nevoie, in primul rand, de cateva imagini.
Asadar, sa cream un folder pe care o sa-l numim Project in care vom stoca imaginile si un document html.
Ideal ar fi ca imaginile sa aiba aceleasi dimensiuni, deoarece nu dorim sa redimensionam continutul paginii in cazul in care una din imagini este mai mare sau mai mica decat celelalte.
Bun. Acum ca avem imaginile si documentul la locul lor in folder, deshidem pagina html intr-unul din programele de editare a paginilor web, cum ar fi FrontPage sau Dreamweaver.
De notat ca puteti folosi, in lipsa programelor mentionate anterior, si Notepad sau Wordpad din Windows.
Mai intai, vom crea scriptul de care avem nevoie pentru a face rotatia intre imagini.
Acesta va fi introdus in tag-ul <head> al paginii si arata astfel:
<script type="text/javascript" language="javascript">
<!--
var imagesList= new Array("image1.gif", "image2.jpg", "image3.png");
var theImage = 0;
var theContor = imagesList.length;
function loadBanner()
{
if(document.images)
{
theImage++ ;
if (theImage == theContor)
{ theImage = 0; }
document.img1.src = imagesList[theImage];
setTimeout("preloadBanner()", 3*1000);
}
}
//-->
</script>
Apoi, in tag-ul <body> al paginii, vom introduce functia"loadBanner" pentruevenimentul "onload". Astfel, scriptul se va executa in momentul incarcarii paginiiin browser.
<body onload="loadBanner()">
Acum nu ne-a mai ramas decat sa inseram o imagine, care va contine banner-ul nostru.
<img id="img1" name="img1" src="image1.gif" style="width: auto; height: auto;" />
!! De notat
Acest script va da posibilitatea de a incarca mai multe imagini, nu doar trei cate aufost prezentate in acest exemplu.
Pentru a incarca mai multe imagini, nu trebuie decat sa le adaugati in lista din script.Imaginile pot avea aceeasi extensie sau pot avea extensii diferite.
Asta e tot! Acum avem un banner alternant!
Iar pagina noastra ar trebui sa arate astfel:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Create an alternate banner</title>
<script type="text/javascript" language="javascript">
<!--
var imagesList = new Array("image1.gif", "image2.jpg", "image3.png");
var theImage = 0;
var theContor = imagesList.length;
function loadBanner()
{
if(document.images)
{
theImage++ ;
if (theImage == theContor)
{ theImage = 0; }
document.img1.src = imagesList[theImage];
setTimeout("preloadBanner()", 3*1000);
}
}
//-->
</script>
</head>
<body onload="loadBanner();">
<img id="img1" name="img1" src="image1.gif" style="width: auto; height: auto;" />
</body>
</html>
No comments:
Post a Comment