ugrás a tartalomhoz

Megjegyzések képek egyes részeihez DHTML segítségével

Hojtsy Gábor · 2004. Nov. 10. (Sze), 10.39
A Flickr kép megosztó szolgáltatás közkedvelt eleme az, hogy képek egyes részeihez is fűzhetőek megjegyzések. Amikor az egeret a kép fölé visszük, a speciálisan megjelölt részek kijelölődnek, és ezekre mozgatva az egeret megkapjuk az adott rész leírását. Sajnos azonban ez a megvalósítás Flasht igényel, ezért többen is nekiláttak DHTML alapú megoldás készítésének.

Először egy Gina Trapani nevű hölgy mutatta be DHTML Image Annotation névre keresztelt megvalósítását, melynek lényege, hogy a képből két példányt kell elérhetővé tenni. Az egyiken be vannak rajzolva a területek, a másik az eredeti látványt adja. Amikor az egerünket a kép fölé visszük, az lecserélődik a területeket jelölő változatra, és így már ezekre tudjuk mozgatni mutatónkat. Az egyes képrészletek leírásait Overlib segítségével jeleníti meg. Sajnos megoldása nem túl szép, keveri a HTML és a JavaScript kódokat, de ötletei megfontolandóak.

Éppen ebből indult ki nem sokkal később Stuart Langridge, és elkészítette a technika Overlib mentes, stíluslapokra épülő megoldását, mely a HTML képtérképek title tulajdonságát alkalmazza a megjegyzések megadására. A DOM Image Annotation technika tehát sokkal szebb és kevesebb HTML kódot igényel, ráadásul Stuart Nicetitles kódjával is együttműködve még szebb feliratokat is megjeleníthet.

Köszönjük attlad nevű felhasználónknak is, hogy felhívta figyelmünket a DHTML Image Annotation projektre.
 
1

sima css megoldas

Jano · 2004. Nov. 10. (Sze), 12.29
A :hover segitsegevel ez a dolog megoldhato szerintem siman CSS-sel is. En a CSS :hover emuláció IE5+ megoldásomban készítettem egy példát amit
kép hotspotnak neveztem.

Itt folyamatosan látszódnak a kijelölt pontok, de könnyen megoldható - szintén a hover segítségével - hogy csak akkor jelenjenek meg ha a kép fölé viszi a felhasználó az egeret.

A dolog lényege annyi, hogy a kép és a hozzá tartozó leírások egy elembe vannak zárva ami relatív pozicionálású, így minden benne levő abszolút koordináta hozzá igazodik. A leírások és a pötyök pedig abszolút pozicionáltak.

A megjelenő szövegek szintén egy DIV-ben vannak így szabadon formázhatók CSS-sel, nem kell a csúnya sárga címkét elvilselni.
2

ez is jó

Granc Róbert · 2004. Nov. 10. (Sze), 13.51
ráadásul a te képed még szebb is... :D
3

nekem nem megy valamiert...

Granc Róbert · 2004. Nov. 10. (Sze), 13.53
Valaki segítsen, mert Stuart módszere nekem nem igazán működik Firefox (1.0, Win) alatt, IE6 alatt megy. Gina módszere működik. Adblockot kikapcsoltam, szintén nem megy, más olyan kiegészítőm, ami zavarhatná, szerintem nincs...
Másnak megy FF alatt???

/r.
4

nekem igen (FF 1.0 win) -- t

trevize · 2004. Nov. 10. (Sze), 14.01
nekem igen (FF 1.0 win)
-- trevize
5

nekem is megy

Anonymous · 2004. Nov. 10. (Sze), 14.38
FF1.0 Linux alatt.

üdv,
Zsolt