🌍
Français
name a écrit:
quelque chose de ce genre? http://modusoptimus.com/pwg150/category.php?cat=43
si oui je te dirai comment c'est fait.
Impressionnante galerie. Si tu pouvais parler de tes personnalisations dans un topic dédié sur la section Présentations..., ce serait très sympa.
Bon, je crois avoir trouvé une solution assez simple, qui permet d'afficher des labels (comme ceux des textes alternatifs des images), en plaçant le pointeur sur les hotspots.
(1) Rajouter l'invocation de l'image map dans l'affichage de l'image.
Dans picture.tpl, remplacer
<img src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}">
par
<img src="{SRC_IMG}" style="width:{WIDTH_IMG}px;height:{HEIGHT_IMG}px;" alt="{ALT_IMG}" usemap="#mamap">
(2) Générer le code HTML des hotspots de l'image map, avec un éditeur comme Gimp.
Placer le texte décrivant le hotspot dans l'attribut "title=", par exemple:
<map name="mamap">
<area shape="circle" coords="243,147,43" title="Mon copain Daniel" nohref="nohref" />
<area ... />
</map>
L'attribut "title=" est pris en compte par IE et Firefox, tandis que Firefox n'affiche pas systématiquement les textes alternatifs ("alt=").
(3) Dans la page PWG, éditer la description de l'image et y placer ce code HTML, à la suite du texte de la description, sur une seule ligne pour éviter de générer des lignes blanches dans la description. Par exemple:
Promenez la souris sur les visages pour voir les noms <map name="mamap"><area shape="circle" coords="243,147,43" title="Mon copain Daniel" nohref="nohref" /><area .... /></map>
Ca semble marcher comme ça.
Je vais faire des essais pour stocker l'info hotspots dans un champ IPTC afin que ces infos, qui dépendent étroitement de l'image (coordonnées XY et noms des personnes présentes), ne quittent plus cette image.
z0rglub a écrit:
D'emblée, je dirais qu'on ne peut pas faire gérer ce genre de chose à une application "générique" comme PhpWebGallery. Ergonomiquement, je ne vois pas comment faire quelque chose de simple et pratique.
Par contre, le sujet est intéressant, voici une petite liste de liens à explorer sur le sujet :
- CSS Image Maps par Frank Manno
- CSS Image Maps, Redux par Frank Manno
- CSS-only Image Annotation par Evan Hall
- FotonotesTM Image Annotation with PHP and CSS par Evan Hall
[edit]en relisant les pages liées ci-dessus, j'ai vu que Flickr proposait une solution basée sur Flash et Javascript[/edit]
Problème, les solutions CSS ne marchent pas avec IE à cause d'un pb de PNG
name a écrit:
quelque chose de ce genre? http://modusoptimus.com/pwg150/category.php?cat=43
si oui je te dirai comment c'est fait.
Oui, j'étais sur la piste de l'image map avec une fonction javascript pour le 'onmouseover' qui affiche qque chose, sauf que
(1) la solution avec overlib qui charge une nlle image pour chaque hotspot est un peu lourde
(2) surtout, je veux ça pour _chaque image_ dans une catégorie
En fait, dans un premier temps j'aurais à peu près ce qu'il me faut dans les image maps, avec l'attribut _title_ du tag _area_, qui permet d'afficher du texte lorsque le pointeur de souris est placé sur le hotspot.
Mais mon problème reste de savoir comment associer du HTML dynamique pour _chaque_ image (avec, pour chaque image, les définitions des différentes _area_ et les textes associés). Faut-il écrire un MOD complexe, ou y a-t-il un champ textuel de la bdd PWG, associé à chaque image, et que je puisse utiliser moyennant des modifications mineures? Par exemple, est-il envisageable d'utiliser le titre ou la description de chaque image pour y placer, en sus du texte normal, le code des _area_, et de simplement rajouter un usemap= dans le tag img ?
Merci en tous cas pour vos suggestions.
jmlange a écrit:
Bonjour,
Je classe actuellement dans PhpWebGallery des photos de famille, dont de nombreuses photos de groupes (mariages, etc), qui posent le problème d'identifier les personnes présentes sur la photo: on peut mettre en commentaire les 50 noms en les décrivant par rangée et de gauche à droite, mais c'est très lourd pour le lecteur. Une meilleure technique serait d'utiliser les image map de HTML.
Est-il possible d'utiliser des image maps dans PhpWebGallery? J'ai fait une recherche sur "image map" dans les forums et rien trouvé.
Merci,
Jean-Marc
quelque chose de ce genre? http://modusoptimus.com/pwg150/category.php?cat=43
si oui je te dirai comment c'est fait.
D'emblée, je dirais qu'on ne peut pas faire gérer ce genre de chose à une application "générique" comme PhpWebGallery. Ergonomiquement, je ne vois pas comment faire quelque chose de simple et pratique.
Par contre, le sujet est intéressant, voici une petite liste de liens à explorer sur le sujet :
- CSS Image Maps par Frank Manno
- CSS Image Maps, Redux par Frank Manno
- CSS-only Image Annotation par Evan Hall
- FotonotesTM Image Annotation with PHP and CSS par Evan Hall
[edit]en relisant les pages liées ci-dessus, j'ai vu que Flickr proposait une solution basée sur Flash et Javascript[/edit]
Nativement il n'y a en effet rien pour gérer ce genre d'image. Je ne pense pas qu'il soit aisé d'automatiser cela. Mais en revanche rien ne t'interdit de faire un MOD.
Bonjour,
Je classe actuellement dans PhpWebGallery des photos de famille, dont de nombreuses photos de groupes (mariages, etc), qui posent le problème d'identifier les personnes présentes sur la photo: on peut mettre en commentaire les 50 noms en les décrivant par rangée et de gauche à droite, mais c'est très lourd pour le lecteur. Une meilleure technique serait d'utiliser les image map de HTML.
Est-il possible d'utiliser des image maps dans PhpWebGallery? J'ai fait une recherche sur "image map" dans les forums et rien trouvé.
Merci,
Jean-Marc