Rechercher
Se connecter / S'enregistrer
Votre question

Insérer 3 liens dans une image

Tags :
  • Facebook
  • Programmation
Dernière réponse : dans Programmation
Partagez
7 Août 2010 23:14:34

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

7 Août 2010 23:40:25

Pourquoi ne découpes-tu pas simplement ton image en 3? :o 
m
0
l
7 Août 2010 23:48:40

Pourquoi pas ? Dis moi comment on fait :D 
m
0
l
Contenus similaires
Pas de réponse à votre question ? Demandez !
8 Août 2010 00:15:43

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 ;) 
m
0
l
8 Août 2010 00:22:22

Okay mais c'est le HTML qui m'embête à vrai dire, à quoi ça ressemblerai comme code ?
m
0
l
8 Août 2010 11:40:51

<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.
m
0
l
a c 232 L Programmation
8 Août 2010 12:14:46

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...
m
0
l
8 Août 2010 14:00:55

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" rel="nofollow" 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" rel="nofollow" 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?#" rel="nofollow" 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 ;) 
m
0
l
a c 232 L Programmation
8 Août 2010 17:50:27

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.
m
0
l
8 Août 2010 17:59:13

Ouais je sais pour le lien J'aime , j'ai essayé de trouver le lien direct mais pas moyen ... Ils sont malins hein ...
Quand tu dis que ça marche chez toi , c'est sur TryIt ou sur Facebook?
m
0
l
a c 232 L Programmation
8 Août 2010 18:07:08

Bah j'ai copié ton code que j'ai mis dans une page HTML en local et quand j'ai cliqué sur l'image, ça m'a ouvert ta page Facebook.
m
0
l
8 Août 2010 18:20:43

Ouais donc il faut que j'arrange cette histoire d'HTML qui veut pas passer sur Facebook et les rectangles qui sont mal foutus ^^ C'est pas gagné ...
m
0
l
a c 232 L Programmation
8 Août 2010 18:37:28

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 ;) 
m
0
l
8 Août 2010 18:52:25

C'est bon j'viens de régler c't'histoire de rectangle ! Et sans Paint en plus !
Penses tu que ça marche pas sur facebook à cause d'une légère différence entre le FBML et le HTML?
m
0
l
a c 232 L Programmation
8 Août 2010 19:43:32

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
m
0
l
Pas de réponse à votre question ? Demandez !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS