Aceasta lectie continua prezentarea modului de utilizare a obiectului image, cu exemple ajutatoare si un script complet.
In lectia precedenta a fost explicat modul de incarcare a unei imagini noi in locul altei imagini folosind JavaScript.
In exemplul prezentat in Obiectul image (part. 1) la punctul "Incarcarea unei imagini noi", browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari asteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", toate imaginile folosite in pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci cand este executata o comanda de afisare.
Iata un exemplu prin care puteti intelege cum se face aceast lucru:
<script type="text/javascript">- In interiorul scriptului, prima linie creaza un nou obiect "Image".
<!--
var hiddenImg = new Image();
hiddenImg.src = "img2.jpg";
//-->
</script>
<img name="imagine" src="img1.jpg" width="155" height="155">
<form>
<input type="button" onclick="document.imagine.src=hiddenImg.src" value="Schimba imaginea">
</form>
Cu mouse-over ("MouseOver" si "MouseOut") se pot crea efecte (precum schimbarea unei poze) care apar la simpla trecere cu mouse-ul deasupra unei zone.
Iata un exemplu foarte simplu:
<a href="#"- Dupa cum observati, "onMouseOver" si "onMouseOut" au fost adaugate in interiorul etichetei <a>, e gresit daca le adaugati in eticheta <img>. Imaginile nu pot reactiona la evenimentele "MouseOver" si "MouseOut", trebuie sa punem o eticheta de legatura (link) langa imagini.
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0"></a>
- Initial este afisata imaginea "img3.jpg", cand pozitionati mouse-ul deasupra imaginii va fi afisata "img1.jpg" iar dupa ce departati mouse-ul, va apare imaginea "img2.jpg".
<a href="#"- Acest exemplu este mai mult de studiu pentru a intelege procedeul de utilizare a efectelor "mouse-over". Nu este potrivit pentru adaugarea intr-o pagina web profesionala deoarece cauzeaza unele probleme:
onMouseOver="document.Imgs.src='img1.jpg'"
onMouseOut="document.Imgs.src='img2.jpg'">Legatura</a><br>
<img src="img3.jpg" name="Imgs" width="155" height="155" border="0">
<html>Acest exemplu foloseste 3 imagini (respectiv 3 link-uri in BODY), dar puteti adauga si 100.
<head>
<script type="text/javascript">
<!--
// Daca browserul suporta JavaScript
// Creaza matricea care va stoca imaginile, in variabila pics
browserOK = true;
var pics = new Array();
// -->
</script>
<script type="text/javascript">
<!--
var objCount = 0; // numarul imaginilor care se modifica in pagina web
// Functia pentru preancarcarea imaginilor, le introduce intr-o matrice
function preload(name, first, second) {
if (browserOK) {
pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name) {
if (browserOK) {
for (i = 0; i < objCount; i++) {
if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {
document.images[pics[i][2]].src = pics[i][0].src;
} else {
// afiseaza cea de-a doua imagine la pozitionarea cursorului deasupra acesteia
document.images[pics[i][2]].src = pics[i][1].src;
}
}
}
}
function off() {
if (browserOK) {
for (i = 0; i < objCount; i++) {
// trimite in spate toate imaginile
if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// preancarca imaginile - trebuie sa specificati care imagini trebuie preancarcate
// si carui obiect Image apartin. Schimbati aceasta parte daca folositi imagini diferite sau daca adaugati mai multe
// (s-ar putea sa fie nevoie sa schimbati si in corpul documentului (body).
preload("link1", "img1.jpg", "img1t.jpg");
preload("link2", "img2.jpg", "img2t.jpg");
preload("link3", "img3.jpg", "img3t.jpg");
// -->
</script>
</head>
<body>
<a href="adresa1.htmll" onMouseOver="on('link1')" onMouseOut="off()">
<img name="link1" src="link1.gif" width="100" height="100" border="0"></a>
<a href="adresa2.html" onMouseOver="on('link2')" onMouseOut="off()">
<img name="link2" src="link2.gif" width="100" height="100" border="0"></a>
<a href="adresa2.html" onMouseOver="on('link3')" onMouseOut="off()">
<img name="link3" src="link3.gif" width="100" height="100" border="0"></a>
</body>
</html>
<dl> <dt>HTML</dt> <dd> - Hyper Text Markup Language</dd> <dd> - Limbaj de cod pentru pagini web</dd> </dl>
#id { visibility: hidden; }
document.getElementById("id").onclick = function(){ alert("http://www.MarPlo.net/"); }
if(isset($_REQUEST["id"])) { echo $_REQUEST["id"]; }
I believe in my path. - Eu cred in calea mea.
creer = a crede; camino = cale /drum; iluminación = iluminare