Najeď kurzorem myši na obrázek a klikni...Michal Novotný
Tento soubor demonstruje použití Java skriptů a VB Skriptů v kódu HTML. Pro demonstraci zde uvádím skript na preload ("přednačtení") obrázků a jejich záměnu na základě události:
<SCRIPT LANGUAGE="JavaScript">function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length;
i+=2) {
document[changeImages.arguments[i]].src
= changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages() {
if (document.images) {
Uk1 = newImage("uk1.jpg");
Uk2 = newImage("uk2.jpg");
preloadFlag = true;
}
}
function presun() {
alert("Toto je odkaz na soubor test.html z Java skriptu...");
location.href="test.html";
}
// -->
</SCRIPT>
Vzhledem k tomu, že potřebujeme provést funkci
"preloadImages()" hned při spuštění stránky, přidáme do tagu
BODY akci OnLoad, která probíhá při načítání stránky, kde deklarujeme
naši funkci "preloadImages()". To znamená, že tag BODY může
vypadat následovně:
<BODY ONLOAD="preloadImages();">
Všimněte si středníku na konci. Tento středník zde musí být za každým příkazem, jinak při načítání stránky zobrazí prohlížeč chybu v Java skriptu. Pokud chceme, aby se do stavového řádku napsal text např. "Obrázky načteny" (až se načtou), můžeme využít preloadFlag definovaný ve skriptu. Tato deklarace by potom vypadala následovně:
<BODY ONLOAD="preloadImages(); if (preloadFlag){window.status='Obrázky načteny...'};">
Window.status je proměnná zapisující do stavového řádku prohlížeče. Proměnné vždy musí být v závorkách a značky '{' a '}' nám značí začátek a konec sekce (jako v C++). Dále je nutné si všimnout uvozovek (") na začátku a konci akce OnLoad, proto již není možné použít uvozovky při psaní textu do window.status a je nutné zde psát znak apostrof ('). Chceme-li obrázek použít pro záměnu sama sebe, musíme deklarovat jeho jméno pomocí parametru NAME v jeho vlastním tagu. Na tento název (uvedený v NAME) se budeme odkazovat funkcí changeImages. Deklarace changeImages je následovná: changeImages(název obrázku [NAME], jméno souboru s novým obrázkem). Definice obrázku proto může vypadat následovně:
<a href="vbscript:getDate()">Tento obrázek i odkazem na funkci getDate() na zjištění aktuálního data, napsanou ve VBSkriptu. Deklarace odkazů na skripty je vždy název skriptu a nakonci dvojtečka, poté vždy následuje jméno skriptu. Funkce getDate() je vypsána níže. Po najetí myši na obrázek (akce ONMOUSEOVER) se obrázek změní za jiný (ze souboru uk2.jpg) a po "opuštění" obrázku kurzorem (akce ONMOUSEOUT) se změní zpět na původní obrázek (tzn. uk1.jpg). Zde je deklarace funkce getDate() napsané ve VBSkriptu:
<SCRIPT LANGUAGE="VBSCRIPT">
Dim Msg
Function getDate()
Msg = "Dnes je " & DateValue(Date)
MsgBox Msg
End Function
Function neNic()
MsgBox "Nějaký text..."
End Function
</SCRIPT>
Kód druhého příkladu je následující:
<a href="nic"
ONMOUSEDOWN="vbscript:neNic()">
<div align="center">
Podívej co má dělat tento odkaz a klikni
</div>
</a>
Jedny z nějčastějších akcí jsou akce myši:
ONMOUSEOVER - při najetí kursoru myši na obrázek
či odkaz
ONMOUSEOUT - při "opuštění" obrázku
či odkazu kurzorem myši
ONMOUSEDOWN - při kliknutí na obrázek, odkaz
OMMOUSEUP - při uvolnění tlačítka myši
A na závěr si ukážeme, jak všechny ty ukázky fungují v praxi:
Najeď kurzorem myši na obrázek a klikni...
Kdyby nějaký ze souborů v preloadImages() neexistoval, nebude vzhledem ke kódu ani záměna načteného obrázku fungovat.
Podívej se na stavový řádek a zkus usoudit, co má tento
odkaz dělat. Až potom klikni....
A teď klikni sem, tento řádek ti napíše oznámení a pak
se pomocí Java skriptu přesune (Pozor: Toto není výchozí odkazový styl
textu!)...
Doufám, že ti tento dokument aspoň trochu pomůže pochopit HTML skripty a že to dobře využiješ.
Michal Novotný
Autor