PC-politika.cz - Novinky: Udělátka: Jak si vyrobit překlápění obrázků PC-politika

Udělátka: Jak si vyrobit překlápění obrázků

Poměrně působivě působí, když kliknete na obrázek a on se třeba za dvě vteřiny změní na jiný. Překlopí se. Taková kouzla dokáže Java Script. Připravil jsem dva takové skriptíky. Vše řídí tři schopné funkce.

Poměrně působivě působí, když kliknete na obrázek a on se třeba za dvě vteřiny změní na jiný. Překlopí se. Taková kouzla dokáže Java Script. Připravil jsem dva takové skriptíky. Vše řídí tři schopné funkce.

Skript funguje tak, že všechno řídí tři funkce, volané v tagu anchor </a> a skript na to reaguje příkazy tzv. událostí onMouseOver a také OnMouseOut.

První funkce writemsg (msg) nám zprostřdkuje ve stavovém řádku našeho browseru vypsání textu. Druhá funkce prss(num) reaguje na kurzor, jakmile se objeví nad obrázkem. Třetí funkce release(num) reguje na kurzor, když se objeví mimo obrázek. Pozor! Jm=na obrázků v HTML kódu musí být stejná. Platí to pro name="jméno_obr" a rovněž pro document.jmeno_obr.src.Aby nám fígl fungoval, potřebujeme samozřejmě dva zdrojové kódy pro HTML a JavaCsript:

JavaScript : preklop_obrazek.js

// JavaScript preklop_obrazek.js
<script type="JavaScript">
<!--
function writemsg(msg) {
status - msg;
}
obr1 = new Image();
obr1 = "obrazek-2.gif";
Function press(num) {
if(num==1} document.jmeno_obr.src=obr1;
return false;
}
functiom release(num) {
if(num==1} document.jmeno_obr.src="obrazek -
1.gif"
return false;
}
//-->
</script>

HTML : preklop_obrazek.html

// HTML : preklop_obrazek.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-utf-8">
<title>Preklop obrázek, JavaScriptem</title>
<script type="JavaSsript" src='preklop_obrazek.js'>
</script>
</head>
<body>
<a onMouseOver="writemsg('jmeno-obrazku');press(1);return true">
onMouseOut="release(1);return true"> <img src="obrayek-1.gif" border="0" name="jmeno_obr"></a>
</body>
</html>

Překlop obrázek 2.html

A tohle je jednodušší verze překlápění obrázku. Především v úspornějším JavaScriptu. Ukázka je zde! Soubor (v kódu HTML je i JavaScript) si můžete stáhnout zde: preklop_obrazek.zip. Samozřejmě obrazky si nakopírujte a v kódu změňte za své! Zde máte také k dispozici celý zdroják preklop_obrazek2.html:

// HTML : preklop_obrazek2.html
<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
NS = new Image();
NS.src = "ochotska01.jpg";
NA = new Image();
NA.src = "9.gif";
// -->
</SCRIPT>
<hr >
<div align="center">
<table>
<tr>
<td><a href="#preklop_obrazek2.html" onMouseOver="document.images['N'].src=NA.src;" onMouseOut="document.images['N'].src=NS.src;">
<img src="ochotska01.jpg" border="0" name="N"></a></td></tr></table></div>
</body>
</html>

Ukázka, přejeď obrázek myší!

Resumé

Tento kód jsem různě modifikoval se svými studenty, takže by už měl nejméně půl roku „lítat“ někde po Internetu, zejména na stránkách Austria, možná že si to někdo již v Česku také všiml. Pokud by někdo chtěl třeba takovou modifikaci, aby se obrázek překlopil teprve po kliku myší/kurzorem (vadí mu klasické přčejíždění), není nic jednoduššího a také funguje! Prostě, JavaScriptovou událost onMouseOver přepíše události onClick a máte hotovo. Přeji pěknou zábavu a hlavně - ať to plní dobrý účel na vašem webu!