Ajout texte au survol d'une image
Résolu/Fermé
moumouz
Messages postés
37
Date d'inscription
dimanche 31 décembre 2006
Statut
Membre
Dernière intervention
15 novembre 2018
-
3 juil. 2007 à 15:16
momouz - 1 sept. 2007 à 09:15
momouz - 1 sept. 2007 à 09:15
A voir également:
- Faire apparaitre du texte au survol d'une image
- Apparaitre hors ligne instagram - Guide
- Apparaitre hors ligne whatsapp - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
6 réponses
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
8 août 2007 à 22:33
8 août 2007 à 22:33
Salut Moumouz,
L'habitude des forums "programmation", "Webmastering" et "Internet"... au temps pour moi.
Il n'existe pas d'informations dans les images JPEG permettant de délimiter des zones et de leur attribuer un titre (et par conséquent aucune visionneuse d'images capable de le faire). Par contre si tu insères ton image dans une page HTML (là tu entres dans la programmation Web) tu as la possibilité de définir des zones (appelées MAP) mais on change de registre (infos sur http://www.allhtml.com/articles/detail/371).
L'habitude des forums "programmation", "Webmastering" et "Internet"... au temps pour moi.
Il n'existe pas d'informations dans les images JPEG permettant de délimiter des zones et de leur attribuer un titre (et par conséquent aucune visionneuse d'images capable de le faire). Par contre si tu insères ton image dans une page HTML (là tu entres dans la programmation Web) tu as la possibilité de définir des zones (appelées MAP) mais on change de registre (infos sur http://www.allhtml.com/articles/detail/371).
bonsoir et merci pour tes conseils: j'ai reussi ,avec le programme ci-dessous ,a inserer une image dans une page HTML et faire apparaitre au passage de la souris un nom sur l'ensemble de la photo mais pas un nom precis sur lchaque visage .
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
Voici une première image sans attribut particulier : <BR>
<CENTER><img src="image1.gif"title="Alain"> </CENTER>
<BR><BR>
</BODY>
</HTML>
peut etre tu pourrais continuer tes conseils et me preciser la marche a suivre.
encore merci
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
Voici une première image sans attribut particulier : <BR>
<CENTER><img src="image1.gif"title="Alain"> </CENTER>
<BR><BR>
</BODY>
</HTML>
peut etre tu pourrais continuer tes conseils et me preciser la marche a suivre.
encore merci
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
13 août 2007 à 20:13
13 août 2007 à 20:13
Re :)
Ah ben c'est très bien pour une première page HTML. Tu as bien compris le fonctionnement de la balise <img/>, maintenant on va t'aider à créer une carte de ton image ! Youppiiiiiiiiiiiiiiiiiiie ! :D (fais pas attention à ma folie, on n'est que lundi).
Toujours dans la balise <img/> tu vas placer un attribut du nom de "usemap".
Avant ou après ta balise <img/> (ou n'importe où en fait) il te faudra créer une balise <map> qui contiendra des zones (area) comme ceci :
L'attribut shape détermine la forme de la zone (rect c'est un rectangle)
L'attribut coords représente les points de cette zone (un rectangle a besoin de 4 points pour être dessiné).
L'attribut title sera attribué à la zone et c'est ainsi que tu pourras distinguer tes personnages.
Mais à ce niveau là tu trouveras bien plus d'infos sur
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-1-5.html
que dans ma tête ^^ ;-)
Bon courage pour la suite !
Et tu peux créer autant de zones que tu le souhaites (songe à ne pas déborder une zone sur une autre).
Ah ben c'est très bien pour une première page HTML. Tu as bien compris le fonctionnement de la balise <img/>, maintenant on va t'aider à créer une carte de ton image ! Youppiiiiiiiiiiiiiiiiiiie ! :D (fais pas attention à ma folie, on n'est que lundi).
Toujours dans la balise <img/> tu vas placer un attribut du nom de "usemap".
<img src="" title="" usemap="#carte1" />N'oublie pas le # c'est très important.
Avant ou après ta balise <img/> (ou n'importe où en fait) il te faudra créer une balise <map> qui contiendra des zones (area) comme ceci :
<map name="carte1"> <area shape="rect" coords="10, 10, 20, 20" title="ma tête"></area> </map>
L'attribut shape détermine la forme de la zone (rect c'est un rectangle)
L'attribut coords représente les points de cette zone (un rectangle a besoin de 4 points pour être dessiné).
L'attribut title sera attribué à la zone et c'est ainsi que tu pourras distinguer tes personnages.
Mais à ce niveau là tu trouveras bien plus d'infos sur
http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-1-5.html
que dans ma tête ^^ ;-)
Bon courage pour la suite !
Et tu peux créer autant de zones que tu le souhaites (songe à ne pas déborder une zone sur une autre).
Salut ,
C'est encore moi, j'ai essayais de suivre tes conseils malheureusement sans resultats.
Alors voila ce que j'ai ecrit:
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<img src="image1.gif"title="Ma BOUILLE" />
<img src="" title="" usemap="#carte1" />
<map name="carte1">
<area title="" shape="rect"coords="10,10,20,20"alt="essai"></area>
</map>
<BR><BR>
</BODY>
</HTML>
Resultat un carre avec une croix rouge en bas et a droite de la photos qui quand je passe dessus m'indique "essai": par contre quand je passe sur la photo a m'importe quel endroit m'indique toujours ma bouille.
Ne manque t il pas les zones cliquable sur chaque visage de la photo ?
J'ai visité le site accessiweb mais je suis arrivé au meme resultat.
Alors que faire ? peut etre que tu as la solution j'aimerais quand meme bien comprendre.
Merci et peut etre a +
Salut
C'est encore moi, j'ai essayais de suivre tes conseils malheureusement sans resultats.
Alors voila ce que j'ai ecrit:
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<img src="image1.gif"title="Ma BOUILLE" />
<img src="" title="" usemap="#carte1" />
<map name="carte1">
<area title="" shape="rect"coords="10,10,20,20"alt="essai"></area>
</map>
<BR><BR>
</BODY>
</HTML>
Resultat un carre avec une croix rouge en bas et a droite de la photos qui quand je passe dessus m'indique "essai": par contre quand je passe sur la photo a m'importe quel endroit m'indique toujours ma bouille.
Ne manque t il pas les zones cliquable sur chaque visage de la photo ?
J'ai visité le site accessiweb mais je suis arrivé au meme resultat.
Alors que faire ? peut etre que tu as la solution j'aimerais quand meme bien comprendre.
Merci et peut etre a +
Salut
Grand Merci, malheureusement je n'arrive toujours pas au resultat J'ai ecrit:
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<img src="photo1.gif" title="Ma BOUILLE" usemap="#alain1" />
<map name="alain1">
<area title="" shape="rect"coords="10,10,20,20"alt="essai"></area>
</map>
<BR><BR>
</BODY>
</HTML>
la photo s'affiche, et au pasage de la souris sur la photo "ma bouille "s'affiche;
impossible comme je le souhaite d'afficher un nom sur un visage de la photo.
je suis preneur de tous conseils merci et peut-etre a +
<HTML>
<HEAD>
<TITLE>image</TITLE>
</HEAD>
<BODY>
<img src="photo1.gif" title="Ma BOUILLE" usemap="#alain1" />
<map name="alain1">
<area title="" shape="rect"coords="10,10,20,20"alt="essai"></area>
</map>
<BR><BR>
</BODY>
</HTML>
la photo s'affiche, et au pasage de la souris sur la photo "ma bouille "s'affiche;
impossible comme je le souhaite d'afficher un nom sur un visage de la photo.
je suis preneur de tous conseils merci et peut-etre a +
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
22 août 2007 à 22:21
22 août 2007 à 22:21
Re,
1. Ton title dans l'area ne doit pas être vide, c'est lui qui contiendra le texte de l'info-bulle.
2. Les coordonnées du rectangle doivent correspondre aux coordonnées où se trouve le visage sur ta photo. Pour t'aider à déterminer les coordonnées tu peux télécharger le logiciel Mapthis (instructions fournies) : http://www.ccim.be/ccim328/htmlplus/mapthis.htm (10,10,20,20 c'était juste un exemple ;-))
3. Tu dois avoir autant d'areas que de visages.
Voilà :-)
1. Ton title dans l'area ne doit pas être vide, c'est lui qui contiendra le texte de l'info-bulle.
2. Les coordonnées du rectangle doivent correspondre aux coordonnées où se trouve le visage sur ta photo. Pour t'aider à déterminer les coordonnées tu peux télécharger le logiciel Mapthis (instructions fournies) : http://www.ccim.be/ccim328/htmlplus/mapthis.htm (10,10,20,20 c'était juste un exemple ;-))
3. Tu dois avoir autant d'areas que de visages.
Voilà :-)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Posotaz
Messages postés
489
Date d'inscription
samedi 23 juin 2007
Statut
Membre
Dernière intervention
19 juin 2011
225
5 août 2007 à 18:09
5 août 2007 à 18:09
Salut, avec une info-bulle c'est faisable. En gros tu mets le nom de ce personnage dans la propriété "title" de ta balise "img".
moumouz
Messages postés
37
Date d'inscription
dimanche 31 décembre 2006
Statut
Membre
Dernière intervention
15 novembre 2018
8 août 2007 à 18:53
8 août 2007 à 18:53
Salut et merci pour ta réponse; mais l'ai oublié de preciser que je suis un amateur et que par conséquant
comment faire pour arrivé a "title" , balise "img" etc.
Sois simpa si tu commencé a partir de la photo "JPEG"affiché a l'ecran je pourrais peut-etre m'en sortir
Alors encore une fois merci
comment faire pour arrivé a "title" , balise "img" etc.
Sois simpa si tu commencé a partir de la photo "JPEG"affiché a l'ecran je pourrais peut-etre m'en sortir
Alors encore une fois merci
