texte sur une image Résolu/Fermé

Question

Bonjour,
voilà mon interrogation, sur un site que je fabrique "à la main" avec html edit, j'ai une photo de mariage familiale, 70 personne datant de 50 ans environ.

par la balise MAP et circle, j'ai pu faire en sorte qu'en passant qon curseyr de souris sur un visage le visage devient cliquable et renvois vers une page html identifiant la personne, 

je souhaiterai que sur cette photo en plaçant le curseur de la souris en plus que le visage soit cliquable il y ait une "bulle" info ou une zone dans laquelle pourrait apparaitre une info texte simple lié à chaque visage et donc variant en fonction des différent visage,

avez vous une astuce simple, pour moi à faire pour y arriver ?
merci à tous par avance

RAD ZONE · Accepted Answer

ALLEZ un bon geste :_)) voila ta page avec les survol et tooltip ! je n ai fais que les 5 premiere (l infos ne corespond pas pour la 5 , tu mettra le bon texte !) a toi de faire les autres , mais tout est pres !! Le site de la famille IDOT

Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)

Et une autre , mais c'est plus particulier

Pour m'‚crire, pour me faire part de vos remarques ou m'aider … corriger une ortographe r‚calcitrante, n'h‚sitez pas, le formulaire estfait pour ça!
je pourrais vous r‚pondre si vous me laissez votre adresse mail ;-)
merci.

Ecrire … GOUDSPIDE

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Mr SANSOZ René, marié à Yvette SANSOZ

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

a+

benj · Answer

je ne sais pas si c'est ce que tu attends mais essaye de mettre title="ce que tu veux ecrire" dans la balise area correspondante

goudspide · Answer

merci pour cette rapide réponse, mais étant un débutant, toujours un peu perdu dans ma mise en place des balise,

actuellement j'ai ecrit de cette façon "AREA SHAPE="circle" ensuite les coordonnées

comment dois je placer avec la syntaxe ce que vous proposez,

merci par avance

benj · Answer

j'abrège au max mais : ca doit ressembler a ca avec des argument dans la balise map et plusieur area...

goudspide · Answer

merci je vais essayer cette option,
rendez vous demain pu après demain pour savoir si ça marche
bonne soirée

RAD ZONE · Answer

SALUT J ai adapte une reponse que j ai donne tout a l heure , a ce que tu demande ! avec un tout petit js et une tooltip qui apparait quand tu passe sur un lien du mapping ! les drapeaux dans ce petit exemple RAD ZONE Webcreation

Lorem ipsum dolor sit amet consectetuer in amet urna In rhoncus. Eget Phasellus vitae Nulla pulvinar cursus ac nec enim feugiat orci. Cursus semper sagittis dignissim nec Nunc Curabitur Cum justo in nibh. Feugiat aliquam Phasellus molestie sed In mattis velit justo parturient Aliquam. Auctor orci quis risus nisl vitae ut justo et venenatis lacinia. Tincidunt consectetuer ut feugiat non dui ante facilisi quis nibh convallis.

Vitae nascetur laoreet nascetur porttitor amet id Phasellus ac sagittis hendrerit. Laoreet metus Sed orci lorem senectus Nam convallis laoreet et Sed. Tortor elit natoque Nulla orci tempus et eu ut urna risus. Nisl tellus vel congue interdum vestibulum justo elit aliquet magna Vestibulum. Eros quis quis netus sociis Phasellus condimentum porta elit justo neque. Ut elit eros risus eget.

Leo suscipit at elit est ac in velit cursus vel sed. Ligula massa id magna et Vestibulum adipiscing Sed Pellentesque urna montes. Cursus id elit Nulla sem consequat tincidunt Vestibulum et Fusce ac. Integer ut hendrerit wisi vitae feugiat fringilla adipiscing Nam Nulla lobortis. Semper mauris tincidunt rutrum sit justo vitae et Aliquam tempus elit. Cras quis sagittis Cras.

Vestibulum Maecenas commodo id consequat tincidunt massa nibh libero congue orci. Auctor nibh tincidunt feugiat est Quisque et Curabitur mauris Morbi est. Lacinia tincidunt risus nibh tristique tincidunt nulla Vestibulum dictumst nec Aenean. Pretium dui metus quis Aenean vel tellus sagittis ac et eget. Suspendisse risus Aliquam turpis at orci Quisque urna wisi nibh interdum. Mauris Aenean Sed lacinia pretium fringilla ut elit dui pede.

Lorem ipsum dolor sit amet consectetuer in amet urna In rhoncus. Eget Phasellus vitae Nulla pulvinar cursus ac nec enim feugiat orci. Cursus semper sagittis dignissim nec Nunc Curabitur Cum justo in nibh. Feugiat aliquam Phasellus molestie sed In mattis velit justo parturient Aliquam. Auctor orci quis risus nisl vitae ut justo et venenatis lacinia. Tincidunt consectetuer ut feugiat non dui ante facilisi quis nibh convallis.

Vitae nascetur laoreet nascetur porttitor amet id Phasellus ac sagittis hendrerit. Laoreet metus Sed orci lorem senectus Nam convallis laoreet et Sed. Tortor elit natoque Nulla orci tempus et eu ut urna risus. Nisl tellus vel congue interdum vestibulum justo elit aliquet magna Vestibulum. Eros quis quis netus sociis Phasellus condimentum porta elit justo neque. Ut elit eros risus eget.

Lorem ipsum dolor sit amet consectetuer in amet urna In rhoncus. Eget Phasellus vitae Nulla pulvinar cursus ac nec enim feugiat orci. Cursus semper sagittis dignissim nec Nunc Curabitur Cum justo in nibh. Feugiat aliquam Phasellus molestie sed In mattis velit justo parturient Aliquam. Auctor orci quis risus nisl vitae ut justo et venenatis lacinia. Tincidunt consectetuer ut feugiat non dui ante facilisi quis nibh convallis.

Vitae nascetur laoreet nascetur porttitor amet id Phasellus ac sagittis hendrerit. Laoreet metus Sed orci lorem senectus Nam convallis laoreet et Sed. Tortor elit natoque Nulla orci tempus et eu ut urna risus. Nisl tellus vel congue interdum vestibulum justo elit aliquet magna Vestibulum. Eros quis quis netus sociis Phasellus condimentum porta elit justo neque. Ut elit eros risus eget.

goudspide · Answer

bonjour à tous,

j'ai essayé la méthode de BENJ , en fonction de l'ordre de programmation soit j'ai la main avec renvois au lien soit j'ai effectivement le texte qui s'affiche mais la zone n'est plus cliquable :-(
 
j'ai essayé la méthode de RED, c'est effectivement ce que je souhaite faire, le principe des petits drapeaux de langues qui renvois vers une page différente mais c'est une image pas une partie d'image

et la programation tel que proposée au dessus ne fonctionne pas

j'aimerais bien avoir la bonne solution merci ceux qui se creusent les méninges pour m'apporter leur aide

RAD ZONE · Answer

le principe des petits drapeaux de langues qui renvois vers une page différente mais c'est une image pas une partie d'image 

?????? c est une seule image  , mais mappe sur les drapeaux !! donc c est bien une partie de l image 

et la programation tel que proposée au dessus ne fonctionne pas ?????????

voila un Exemple avec le code  mis  sur le post precedent !

goudspide · Answer

merci RAD ZONE, désolé d'avoir écorché ton pseudo, 

ta programmation au dessus ne marche pas sous "html edit" j'ai une info d'erreur de scénario javascript

sinon j'ai été voir ton exemple c'est exactement ce que je veux faire, reste à moi de réussir à le transposer, mais c'est donc du java et non plus du html de base ??

merci encore

RAD ZONE · Answer

ta programmation au dessus ne marche pas sous "html edit" j'ai une info d'erreur de scénario javascript

change d editeur !!
Notepad++ 
PSPad 

mais c'est donc du java et non plus du html de base ?? 
non c est du simple html css avec un mapping ,avec un petit javascript utilisant  document.getElementById

pour  faire apparaitre et disparaitre  la bulle d info  sur les onmouse.... des liens mappe!

goudspide · Answer

merci beaucoup, pour tout,

je vais donc étudier tout ça, et je vous dirais si je m'en suis sorti,

à bientôt

goudspide · Answer

oui je sais maper à la main mon image,

c'est d'ailleurs en fouillant sur ce forum que j'ai trouvé la solution, 

j'essaye de fouiller les archives avant de déranger la communauté pour la n'ième question déjà posée cent mille fois, 

si j'ai posé ma question c'est que je n'avais pas trouvé,

merci ;-)

bg62 · Answer

salut RAD, chapeau ta demo !!!
un autre lien pour faire en css les 'bulles' :
http://peutetreunereponse.over-blog.com/article-6614978.html
b g

RAD ZONE · Answer

salut bg ;-))

oui cela peut ce faire en CSS , ce qui est une bonne chose , Exemple simple 
mais il faut quand meme  pas mal maitriser CSS  et partir sur un squelette html css propre, ou gare aux heritages ;-)) ! 


A+

goudspide · Answer

merci pour tous ces exemples c'est exactement ce que je veux faire,

RAD je ne sais pas si le mot "touriste" s'adresse à moi, mais je le prend comme tel et c'est bien vrai je suis vraiment touriste dans la création à la main d'une page web, mdr

je vous donne le lien du site en question,

http://familleidot.free.fr/index.html

vous pouvez y allez de vos commentaires, m'y suis je bien pris, et est ce que vos propositions vont être simple à appliquer  dans ma façon d'avoir fait ou va t il falloir reprendre l'ensemble ?

merci d'avance et ne vous inquiétez pas je ne suis pas susceptible, j'accepte les critiques constructives ;-)

bg62 · Answer

"touriste" c'est pour RAD et on se comprend ...
b g

goudspide · Answer

bonjour,

wahouuuuuu !!!!!!!!!! alors là je n'en demandais pas tant, mais quelle gentillesse moi qui essayait de voir comment mettre le  machin à coté du truc etc etc,

franchement , merci beaucoup !!!!!!!!!!!!!!!!!!!!

c'est ce qui s'appelle du travail mâché

grand merci !!!!!!!!!

RAD ZONE · Answer

OK ;-)) je viens de voir un petit oublis dans mon script !! j ai oublie de fermer la derniere balise div info5 !!! corrige !

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

goudspide · Answer

ok ;-)

merci encore

goudspide · Answer

ok ;-)

merci encore

et je vais mettre un lien dans ma page d'accueil vers ce site, c'est le moins que je puisse faire pour l'aide que j'ai reçu

bravo les gars

RAD ZONE · Answer

ije viens de voir que a part Firefox un gros  probleme sur les autres navigateur !!!! ?

regarde rien  n apparais ???
exemple

Poutant tout ce qu il y as de valide !!
http://validator.w3.org/...

entonnant puisque le meme  principe fonctionne parfaitement ici ..?
autre exemple

goudspide · Answer

oulala

alors ça dépasse encore plus mes connaissance,

retour à la case départ ??

ou une autre solution est possible ??

me croyant sauvé j'ai criée victoire trop vite :-(

j'espère que la solution va être trouvée, sinon je devrais abandonner l'idée,

RAD ZONE · Answer

loooool

c est tout simple  ;-)) 

 tu vas enlever le  <!-- au debut du style <style type="text/css" >
      <!--


resultat !
EXEMPLE

je comprend mieux !! ;-))

a+

goudspide · Answer

ouf, je ne desppérait pas de tes cométences

un bon pont pour toi, c'est génial, je ne pourrai jamais te renvoyer l'ascenseur en infrmatique, mais dans d'autre domiane c'est possible bricolage ou autre, alors n'hésite pas ;-)

goudspide · Answer

bon je commence les modif avec pad++

ok je comprend, mais j'aurai souhaiter que je puisse aussi garder la possibilité que la main me renvois vers la fiche de la personne, permettant d'avoir pas mal d'info sur la personne,

avec cette programmation, s'affiche bien un texte, nickel mais je n'ai plus le click renvoyant vers la page de la personne, :-(

est impossible ???

RAD ZONE · Answer

Tu remet juste un lien a la place des # dans les 
<area shape="circle" href="#" coords="987,378,13" onmousemove="afficher('info')" onmouseout="masquer('info')">

goudspide · Answer

ouf , ça yest, j'ai un peu cheché pour la bonne syntaxe, 

faut bien me faire chercher un ;-)

c'est nickel, exactement ce que je voulais
j'ai plus qu'à reprendre l'ensemble des lignes et les info , mais ce n'est pas un problème un peu de temps


merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

goudspide · Answer

hello à tous,

ça y est j'ai réussis à mettre tout à jours, et ça marche très bien comme je le voulais sauf que ça marche pas sour internet exploreur :-( sous mozilla oui,

une idée ???

je redonne le lien du site pour voir le code source et si vous trouvez d'où viens le problème je crois que je serais combler, et surtout ma famille utilisatrice, 

http://familleidot.free.fr/index.html

j'avoue ne pas comprendre pourquoi ce n'est pas reconnu en fonction des navigateur, je suis dépassé là

merci d'avance pour une solution

RAD ZONE · Answer

je tai dis !!!

enleve le <!--


au debut du style embarque !<style type="text/css" >
      <!--  celle la !!!!!!
      html {
      padding:0px;
      margin:0px;
      }

goudspide · Answer

te faches pas :-)

j'ai zappé, je fais de suite, merci RAD ZONE  je comprend vite mais faut m'expliquer longtemps ;-)

goudspide · Answer

je reviens à la charge ;-(

les bulles et le clic vers les pages marchent pas non plus, 

encore un oublis ???? de ma part quelque part ??

RAD ZONE · Answer

c est normal tu as fais un erreur pour les liens !! voila ce que tu as mis et voila ce qu il faudrais !! enleve tout les #"

goudspide · Answer

ok je reprend le ligne

merci encore, 

je reviens dire ce que ça donne, mais y a pas de raison :-)

goudspide · Answer

impeccable nickel,

je ne le dirais pas encore assez merci beaucoup !!!!!!!

respect de la part d'un béotien ;-)

RAD ZONE · Answer

OK ;-))

je met en résolus alors !! 

a+

goudspide · Answer

affirmatif

c'est résolu ,-)
:-))

bg62 · Answer

effectivement : super ce travail sur la photo !!!
attention :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 ... incomplet
et quand on clique sur un lien la page dans laquelle on arrive ne comporte même pas cela ...

goudspide · Answer

Heu BG62 si tu peux éclairer ma lanterne, j'ai mis "bêtement" ce que m'a proposer RAD, mais je ne connais pas l'utilité de cette phrase en début et qu'a t elle d'incomplet et pouraquoi, 

quelle fonction a t elle ?

merci d'avance

bg62 · Answer

ce que RAD t'as aidé à faire est super ! 
mets ceci à la place :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

elle sert à faire reconnaître le doctype de la apge pour les moteurs 
http://www.commentcamarche.net/faq/sujet 9060 les balises dans la partie head
@+  b g

RAD ZONE · Answer

SALUT bg tu as raison ! ;-)) je met le code de la version exemple qui est ICI et qui est valide W3C XHTML 1.0 Strict Le site de la famille IDOT

Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)

Et une autre , mais c'est plus particulier

Pour m'écrire, pour me faire part de vos remarques ou m'aider à corriger une ortographe récalcitrante, n'hésitez pas, le formulaire est fait pour ça!
je pourrais vous répondre si vous me laissez votre adresse mail ;-)
merci.

Ecrire . GOUDSPIDE

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Mr SANSOZ René, marié à Yvette SANSOZ

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Mr SANSOZ René, marié à Yvette SANSOZ

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

Voici Mme SANSOZ Yvette, femme de SANSOZ René.

Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)

si d autres veullent s en servir c est mieux ! A+

goudspide · Answer

ok, 

je vais détailler la page en lien, et je comprend bien l'utilité pour les moteurs,


effectivement, RAD à fait plus que m'aider il m'a mâché le travail et débuggé mes bêtises

merci à vous deux

bg62 · Answer

ok alors bn courage et reviens avec unnouveau post pour d'éventuelles autres questions ...
@ +  b g

Texte sur une image

42 réponses

Discussions similaires