KÉPTÉRKÉP

Ha egy kép bizonyos területeit a körvonaluk koordinátáival definiáljuk, akkor azt képtérképnek nevezzük. Ezekhez a területekhez eseményeket rendelhetünk. Esemény például a kattintás vagy az egérmozgatás egy kijelölt területen. Az eseményre adott történés pedig lehet egy felugró ablak, szövegdoboz, vagy egy új böngészőablak megnyitása. Onnan lehet tudni, hogy mik a kijelölt területek, hogy az egérkurzort föléjük mozgatva a kurzor nyíl alakja átváltozik mutató ujjá. A megvalósításhoz a HTML nyelv map elemét használtam, az eseményvezérlést pedig jQuery használatával oldottam meg.

Hol, mikor, kinek érdemes ilyet készíteni a weboldalra?

• egy stílustanácsadónak, aki konkrét szetteket állít össze, és a képen szereplő ruhákra kattintva megjelenik egy felugró ablak a termék adataival (név, összetétel, melyik üzletben és mennyiért lehet megvásárolni);
• ha csomagban értékesített termékekről van szó, rájuk kattintva meg tudjuk nyitni az adott termékről szóló weboldalt;
• oszlopdiagramnál elkerülhető, hogy túl sok információ legyen egyidejűleg a képen: a háttérinformációk csak akkor jelennek meg, ha a felhasználó valamelyik oszlop fölé mozgatja az egérkurzort.

Az alábbbi képen elrejtettem 10 db esemény + történés kombinációt. Találd meg ezeket azáltal, hogy mozgatod az egérkurzort a kép felett! Ha a kurzor alakja megváltozik (és nem jön fel egy szövegdoboz), akkor kattints!