Se connecter avec
S'enregistrer | Connectez-vous

Insérer 3 liens dans une image

Dernière réponse : dans Programmation

Bonsoir !
Pour le Facebook de mon groupe je cherche à mettre 3 liens sur une même image dans l'API Static FBML .
Dans un premier temps il s'agit de cette image :

Ce que je voudrais par la suite c'est ajouter un lien vers le facebook là où il y a marqué "Become a fan" (http://www.facebook.com/home.php#!/pages/Gullings/147940711885400?ref=ts) , un lien vers notre myspace là où il y a marqué "Check our MySpace" (http://myspace.com/gullings) , et enfin un lien mailto vers gullings@live.fr .
J'ai réussi à le faire avec OpenOffice Draw , avec une ImageMap , mais j'arrive pas à finaliser le code html, l'image s'affiche mais sans les liens ...
Help me !

Autres pages sur : inserer liens image

Lassé par la pub ? Créez un compte

Ben tu prends un outil de retouche photo (photofiltre par exemple), tu ouvre ton image, recadre ta 1ere partie tu l'enregistre,
tu ré-ouvre ton image, recadre ta 2eme partie et l'enregistre,
tu ré-ré-ouvre ton image et enfin tu recadre ta 3eme partie et l'enregistre.

Et tu te retrouve avec 3 images.

Tu n'as plus qu'à assembler ce puzzle en html en mettant un lien différent sur chaque image ;) 

<a href="tonlien.com"><img src="leliendetonimage" /></a>

Après tu peut rajouter des info telles que la taille de l'image ou sa position.

La balise <a></a> correspond au lien, tout ce qui se trouve entre les deux renvoi vers le lien.

Et tu répète ça 3 fois pour tes 3 images.
Expert Programmation

Tu peux faire ça très bien avec un image map.

Exemple de code:
  1. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
  2.  
  3. <map name="planetmap">
  4.   <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  5.   <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  6.   <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
  7. </map>


1) On définit un rectangle (rect) avec les coordonnées x=0, y=0 et ayant pour largeur 82 et hauteur 126, et le lien pointe vers sun.htm
2) On définit un cercle (circle) avec les coordonnées x=90, y=58 et ayant pour circonférence 3 et le lien pointe vers mercur.htm
3) idem...

Edit: et pour essayer : http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtm...

OmaR a dit :
Tu peux faire ça très bien avec un image map.

Exemple de code:
  1. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
    

  2.  
  3. <map name="planetmap">
    

  4.   <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
    

  5.   <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
    

  6.   <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
    

  7. </map>


1) On définit un rectangle (rect) avec les coordonnées x=0, y=0 et ayant pour largeur 82 et hauteur 126, et le lien pointe vers sun.htm
2) On définit un cercle (circle) avec les coordonnées x=90, y=58 et ayant pour circonférence 3 et le lien pointe vers mercur.htm
3) idem...

Edit: et pour essayer : http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtm...


C'est à peu près ce code là auquel je m'attendais , et chez moi ça donne ça :

  1. <html>
    

  2. <body>
    

  3.  
  4. <img src="<a href="http://i35.servimg.com/u/f35/12/85/06/94/facebo10.jpg" target="_blank">http://i35.servimg.com/u/f35/12/85/06/94/facebo10.jpg</a>" width="245" height="226" alt="Planets" usemap="#planetmap" />
    

  5.  
  6. <map name="planetmap">
    

  7.  <area shape="rect" alt="" coords="471,231,589,304" href="mailto:gullings@live.fr">
    

  8. <area shape="rect" alt="" coords="475,105,614,158" href="<a href="http://www.myspace.com/gullings" target="_blank">http://www.myspace.com/gullings</a>">
    

  9. <area shape="rect" alt="" coords="10,-2,103,57" href="<a href="http://www.facebook.com/home.php?#" target="_blank">http://www.facebook.com/home.php?#</a>!/pages/Gullings/147940711885400?ref=ts">
    

  10. </map>
    

  11.  
  12. </body>
    

  13. </html>


ça fonctionne sur le site que tu m'as donné mais sur Facebook , pas moyen ! :??:  Je comprends vraiment pas , ya une raison ?
en tout cas merci pour votre aide ;) 
Expert Programmation

Chez moi les 3 liens fonctionnent. Par contre, tu t'es un peu planté au niveau des rectangles, ils ne sont pas bien placés.

Après, le lien Facebook ouvre la page de ton groupe, il n'a pas le même effet que "J'aime". Pour avoir un lien j'aime, c'est facebook qui le fourni avec un peu de javascript, et je suis pas sûr que tu puisses t'en servir comme ça.
Expert Programmation

Pour les rectangles, le plus simple est d'ouvrir l'image avec un logiciel d'images (Paint.Net par exemple).
Tu fais un carré de sélection là où tu veux, et il te donnera la position X et Y ainsi que la largeur et hauteur du carré, donc facile après ;) 
Expert Programmation

J'avais pas fait attention, mais tu veux mettre ça directement sur Facebook en fait ?
Je ne connais pas du tout le FBML, je ne peux pas t'aider plus que ça.
Mais c'est de l'ajax qu'ils utilisent pour le bouton j'aime. Essaie de faire la même chose qu'eux avec :
  1. rel="async-post" ajaxify="/ajax/pages/fan_status.php?fbpage_id=147940711885400&add=1&reload=1&preserve_tab=1&use_primer=1"



Edit: le soucis, c'est que pour les imagemap, je suis pas sûr que ça fonctionne pareil que pour un lien
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde