Megjegyzések képek egyes részeihez DHTML segítségével
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.
■ 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.
sima css megoldas
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.
ez is jó
nekem nem megy valamiert...
Másnak megy FF alatt???
/r.
nekem igen (FF 1.0 win) -- t
-- trevize
nekem is megy
üdv,
Zsolt