Aktivní prvky na klikací mapě pomocí JavaScriptu

    0

    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