Rechercher : dans
Par :

Texte sur une image

Dernière réponse le 28 mar 2009 à 09:57:17 goudspide, le 24 mar 2009 à 20:51:57 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 3.0.7

Meilleures réponses pour « texte sur une image » dans :
ImageMagick - Manipuler les images en ligne de commande VoirImageMagick est un formidable outil en ligne de commande qui permet de manipuler les images. L'avantage de cet outil est qu'il permet: d'automatiser les travaux sur les images (cela évite d'avoir à faire certaines manipulations dans...
Infographie VoirOn appelle infographie le domaine de l'informatique concernant la création et la manipulation des images numériques. L'infographie regroupe de nombreux savoirs, parmi lesquels la représentation des éléments graphiques (texte, image ou vidéo), ainsi...

22

goudspide, le 26 mar 2009 à 13:40:29

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

Répondre à goudspide

23

RAD ZONE, le 26 mar 2009 à 13:55:26

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


♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

24

goudspide, le 26 mar 2009 à 14:02:16

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,

Répondre à goudspide

25

RAD ZONE, le 26 mar 2009 à 14:25:32

Loooool

c est tout simple ;-))

tu vas enlever le <!-- au debut du style

<style type="text/css" >
      <!--


resultat !
EXEMPLE

je comprend mieux !! ;-))

a+
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

26

goudspide, le 26 mar 2009 à 14:31:26

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 ;-)

Répondre à goudspide

27

goudspide, le 26 mar 2009 à 18:04:58

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 ???

Répondre à goudspide

28

RAD ZONE, le 26 mar 2009 à 18:08:10

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')">

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

29

goudspide, le 26 mar 2009 à 18:29:38

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

Répondre à goudspide

30

goudspide, le 27 mar 2009 à 13:40:50

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

Répondre à goudspide

31

RAD ZONE, le 27 mar 2009 à 13:43:24

Je tai dis !!!

enleve le <!--


au debut du style embarque !

<style type="text/css" >
      <!--  celle la !!!!!!
      html {
      padding:0px;
      margin:0px;
      }

♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

32

goudspide, le 27 mar 2009 à 13:45:37

Te faches pas :-)

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

Répondre à goudspide

33

goudspide, le 27 mar 2009 à 14:06:04

Je reviens à la charge ;-(

les bulles et le clic vers les pages marchent pas non plus,

encore un oublis ???? de ma part quelque part ??

Répondre à goudspide

34

RAD ZONE, le 27 mar 2009 à 14:11:15

C est normal tu as fais un erreur pour les liens !!

voila ce que tu as mis

 <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_1.htm" #"coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')">


et voila ce qu il faudrais !!
<area shape="circle" href="fiche%20mariage%20idot_lecat/tete_1.htm" coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')">
      


enleve tout les #"
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

35

goudspide, le 27 mar 2009 à 14:16:48

Ok je reprend le ligne

merci encore,

je reviens dire ce que ça donne, mais y a pas de raison :-)

Répondre à goudspide

36

goudspide, le 27 mar 2009 à 14:39:45

Impeccable nickel,

je ne le dirais pas encore assez merci beaucoup !!!!!!!

respect de la part d'un béotien ;-)

Répondre à goudspide

37

RAD ZONE, le 27 mar 2009 à 15:07:09

OK ;-))

je met en résolus alors !!

a+
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

38

goudspide, le 27 mar 2009 à 15:59:09

Affirmatif

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

Répondre à goudspide

39

bg62, le 27 mar 2009 à 21:12:30

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 ...
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Répondre à bg62

40

goudspide, le 27 mar 2009 à 21:19:25

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

Répondre à goudspide

41

bg62, le 27 mar 2009 à 21:24:27

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
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Répondre à bg62
Collection CommentÇaMarche.net