DOM Annotation d’image

Original: http://www.kryogenix.org/code/browser/annimg/annimg.html

Flickr, la photo application d’organiseur en ligne, a quelques trucs très soignée dans sa manche. Peut-être la plus élégante est son processus d’annoter une image en mettant en évidence des zones spécifiques de cette image et de fixer des notes pour eux. Très soigné. Il est fait avec une combinaison de DHTML et Flash choses. Gina à scribbling.net a mis sur pied un exemple de la façon de faire quelque chose de similaire en utilisant DHTML. Cependant, son approche définie, alors que bon, vous oblige à construire une image particulière de roulement avec les zones annotées clairement mis en évidence, et il utilise onmouseover onmouseout attributs et sur beaucoup de bits du code. Bien que cela fonctionne, il est pas vraiment en suivant les principes de DHTML discret qui font un script facile à mettre en œuvre. Peut-être que nous pouvons l’améliorer légèrement.


Les cartes-images

Gina a frappé sur le point clé, cependant: le marquage des différents bits d’une image a été possible en HTML depuis des siècles, en utilisant une carte graphique côté client. Nous avons déménagé loin d’eux dans une certaine mesure ces jours-ci (ainsi, le hall CSSetdes standards du Web ont, ils semblent être l’un des piliers de commerciaux des sites à fort contenu graphique par des tables fixes), mais ils sont spécifiquement conçu à cet effet. Juste pour vous rafraîchir la mémoire (si une telle remise à niveau est nécessaire), voilà comment une carte d’image fonctionne:

La balise de l’image peut prendre un attribut usemap, comme ceci:

<img src="myimg.png" alt="My image" usemap="#mapname">


Les points d’attributs usemap à une carte qui délimite les parties de l’image:

<map name="imgmap">
  <area alt="" title="Buffy mug" nohref="nohref"
        shape="rect" coords="170,150,210,180">
  <area alt="" title="Crap books" nohref="nohref"
        shape="rect" coords="170,10,320,80">
</map>


Notez que le nom de la <map> est le même nom que celui de l’attribut usemap de l’original <img>, sauf que le usemap prend un # symbole précédent.

Chaque <map> est constitué de zones, qui ont les coordonnées et une forme. Bien que la forme peut être des choses ésotériques comme cercle et poly, nous allons nous intéresser qu’aux zones rectangulaires ici, qui ont une forme de rect. L’attribut coords prend quatre nombres, séparés par des virgules: coords = “L, T, R, B“, les quatre numéros sont à gauche, haut, droite, et en bas: des positions de pixels, mesurée par rapport à la gauche haut de l’image . Notez que ce ne sont pas CSS: ce ne sont pas dans la CSS de commande en haut à droite, en bas à gauche! Il ya beaucoup de ressources là-bas sur le web à propos de la mise en place des cartes graphiques, et même des programmes spécifiques pour construire leur a donné une image.

Donc, ce que nous voulons est d’avoir ces zones apparaissent sur une image quand on la souris dessus.

Comme ça, en fait:

Comment utilisons-nous

Tout comme tous les autres scripts discrètes, vous ne devez pas faire grand-chose pour que cela se produise. Vous avez besoin d’intégrer la balise <img> dans votre page comme d’habitude, et de construire un plan de l’image et le mettre dans le document trop, comme décrit ci-dessus. Votre image doit également avoir une classe de annoté.

Vos domaines doivent avoir un attribut title qui est l’info-bulle que vous voulez voir apparaître lorsque la souris survole cette zone.

Ensuite, téléchargez la bibliothèque JavaScript et feuille de style et les inclure dans votre page comme d’habitude:

<script type="text/javascript" src="annimg.js"></script>
<link rel="stylesheet" href="annimg.css">


et que tout va bien. Tout est fait.


Titres plus agréable
Notez que les info-bulles qui apparaissent, associés à chaque zone, sont infobulles navigateur ordinaires générés à partir de l’élément de titre. Alors que ce sont assez commode, vous voudrez peut-être quelque chose d’un peu plus intelligent. Le script Images DOM annoté intègre bien avec mes nicetitles: si le script NiceTitles est également inclus sur la page (ce qui peut-être déjà, si vous êtes déjà à les utiliser) puis les info-bulles pour les annotations d’image apparaîtront comme NiceTitles.

Les mises à jour du script

2004-11-16
Spécifier explicitement que l’image doit avoir la classe annotée. Merci à Jeff Gates.
2004-11-09
Mise à jour pour tenir compte des variations de la taille du texte (ou d’autres modifications de l’écoulement de la page) après la charge initiale, de sorte que les régions ne se compensent pas. Merci à Steve Mac.

Stuart Langridge, Novembre 2004