Následující článek ukazuje, jak lze pomocí JavaScriptu vytvořit jednoduchou klikací a prosvětlovací obrázkovou mapu, ve které vystačíme s jediným podkladovým obrázkem. Příklad bude bohužel funkční pouze pod Internet Explorerem.

Vytvořená klikací mapa vypadá následovně. Pokud najedete myší nad domečky, tyto se zvýrazní a kliknutím můžete odskočit na – zde většinou neexistující – odkaz:

Mapa města (najeďte myší na objekt)

Uvedená technika je založena na poměrně málo využívané vlastnosti přiřazení podkladového obrázku tabulce – jinými slovy, to co vidíte, je tabulka o 15x10ti buňkách, která má jako podklad definován obrázek s mapou městečka. Jednotlivé buňky pak obsahují nad významnými objekty průhledný obrázek, zarámovaný v HTML odkazu, u jednoho každého je pomocí handlerů událostí onMouseOver a onMouseOut vytvořen známý „překlápěcí“ efekt – záměna průhledného obrázku za červený kroužek.

Tolik k principu této techniky, řekněme si ještě, proč nefunguje na prohlížeči Netscape – ten sice zná pozadí tabulky, vykresluje je však v každé buňce nikoliv ze správné pozice podkladového obrázku, ale z jeho části od pozice 0,0 – tedy znovu od levého horního rohu. Totéž se stane, když v některé buňce definujeme byť i průhledný obrázek nad pozadím – nelze proto uvedenou vlastnost (či spíše chybu) obejít použitím „tabulky v tabulce“. Výsledný grafický efekt je sice zajímavý, v praxi však nepoužitelný. Tak se alespoň jeví Netscape ve verzi 4.73, na níž byl tento skript zkoušen.

Pojďme zpět k implementaci. Prvním úkolem skriptu je nějakým vhodným způsobem uložit do příslušných proměnných pozici, URL a další atributy významných míst na mapě – zde domečků. Využijeme oblíbené objekty, kdy nejprve definujeme konstruktor objektu, s jehož pomocí vytvoříme a uložíme do pole high1 5 objektů, popisujících významná místa mapy. Indexy iX a iY určují pozici v buňkách tabulky, začínající nulovým indexem:

function MeHighlight( strName, strURL, iX, iY ){
    this.strName = strName   
    this.strURL = strURL
    this.iX = iX
    this. iY = iY
}
var high1 = new Array()
high1[0] = new MeHighlight( "Les", "http://www.les.cz", 1, 1 )
high1[1] = new MeHighlight( "Policie", "http://www.policie.cz", 4, 5 )
high1[2] = new MeHighlight( "Obchodní dům", "obchod.htm", 7, 9 )
high1[3] = new MeHighlight( "Interval.cz", "http://www.interval.cz", 11, 2 )
high1[4] = new MeHighlight( "Nevěstinec", "http://www.verejnydum.cz", 14, 5 )

Oba použité překlápěcí obrázky – obrázek prázdného čtverečku 20×20 pixelů a obrázek červeného kroužku s průhledným pozadím téže velikosti natáhneme do pomocných proměnných (eliminujeme tak nutnost jejich opětovného stahování ze serveru při každém překlopení):

img1 = new Image();
img1.src = "blank.gif";
img2 = new Image();
img2.src = "highlight.gif";

Hlavní částí příkladu je funkce CreateHighlightMap, přijímající čtyři argumenty: jméno souboru s podkladovým obrázkem, rozměr mapy ve čtvercích 20×20 pixelů ve směru osy X a Y, a odkaz na pole, v němž je uložen popis významných míst mapy – viz výše.

function CreateHighlightMap(img,sqx,sqy,arr) {
    document.write(‚<table border="0" cellpadding="0" cellspacing="0" background="‘ + img + ‚">‘)
    for( var i=0; i<sqy; i++ ) {
        document.write(‚<tr>‘)
        for( j=0; j<sqx; j++) {
            mh = null    
            for(k=0; k<arr.length; k++ ) {
                if( (arr[k].iX == j) && (arr[k].iY == i) ) {
                    mh = arr[k]
                }    
            }   
            if(mh) {
            document.write(‚<td width="20" height="20">‘)
            document.write(‚<a href="‘ + mh.strURL + ‚" onmouseover="hig_‘ + i + ‚_‘ + j +‘.src=img2.src" onmouseout="hig_‘ + i + ‚_‘ + j +‘.src=img1.src">‘)
            document.write(‚<img src="blank.gif" alt="‘ + mh.strName + ‚"name="hig_‘ + i + ‚_‘ + j +’" border="0"></a></td>‘)
            } else {
            document.write(‚<td width="20" height="20">&nbsp;</td>‘)            
            }
        }
        document.write(‚</tr>‘)
    }
    document.write(‚</table>‘)
}

Jde v podstatě o sadu volání document.write, majících za úkol vykreslit tabulku a „naskládat“ do ní v příslušných buňkách výše popsanou konstrukci s voláním překlápěcích skriptů. Zajímavá je snad jen třetí zanořená smyčka (for k), která testuje, zda právě vykreslovaná buňka tabulky obsahuje významné místo čili nic. Nejedná se – měřeno rychlostí skriptu – zrovna o vrchol efektivity, v tomto případě však nejde o skript, jehož rychlostní náročnost by byla kritická.

Skript je do určité míry parametrizovatelný, je však potřeba udržet jakousi kázeň při práci – zejména pixelová velikost mapy by měla být násobkem 20ti v obou směrech, při volání funkce je pak potřeba zajistit správné předání parametrů dvou nekrajních parametrů – velikosti výsledné tabulky. Zde je příklad volání funkce CreateHighlightMap použitý v ukázce, pro velikost mapy 300×200 pixelů, tedy velikost tabulky 15×10 buněk:

CreateHighlightMap(„mapa.gif“,15,10,high1)

A To he vše, prostoru k další práci a vylepšování je jako obvykle dost, takže vám přeji příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět