Insérer un lien sur une image sur un site web
Fermé
Supradyn
Messages postés
27
Date d'inscription
samedi 7 mars 2009
Statut
Membre
Dernière intervention
10 juin 2012
-
21 oct. 2009 à 15:41
TiboleParano Messages postés 498 Date d'inscription mardi 18 mars 2008 Statut Membre Dernière intervention 7 avril 2015 - 28 déc. 2009 à 17:06
TiboleParano Messages postés 498 Date d'inscription mardi 18 mars 2008 Statut Membre Dernière intervention 7 avril 2015 - 28 déc. 2009 à 17:06
A voir également:
- Insérer un lien sur une image sur un site web
- Site de telechargement - Accueil - Outils
- Insérer une vidéo sur powerpoint - Guide
- Créer un lien pour partager des photos - Guide
- Verifier un lien - Guide
- Lien url - Guide
7 réponses
TiboleParano
Messages postés
498
Date d'inscription
mardi 18 mars 2008
Statut
Membre
Dernière intervention
7 avril 2015
61
21 oct. 2009 à 16:13
21 oct. 2009 à 16:13
Hey ! bonne idée, je m'était déjà posé la question sans vraiment m'informer
alors voilà, je l'ai fais gràce et pour toi :)
Jviens de le tester, sa marche =) (sinon jposterai pas en fait -_-')
quelques précisions dans l'ordre:
dans lea balise img, il précise les attributs "width" et "height" (largeur et hauteur(ou l'inverse)) mais ce n'est pas obligatoire (utilse pour redimensionner par contre)
il précise [border="0"] et sa je te conseil de le laisser, sinon un cadre bleu est appliqué à l'image
ensuite, apparament le truc c'est l'utilisation de la [Map] :
la map complete, c'est l'image,
ensuite on définit des zones cliquables dessus en précisant le lien, on peut choisir plusieurs formes (jpense que tu traduiras facilement, et elle ne sont pas difficile à utiliser non plus)
alors un dernière précision, les valeurs sont en pixels, et voici le repère :
0;0________>max,0
|
|
|
\/
0,max
Jm'endormirais moins con ce soir tiens :)
alors voilà, je l'ai fais gràce et pour toi :)
ceci est un exemple tiré du net
<body>
<p><img src="tonimage.jpg" width="292" height="118" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="56,23,166,82" href="https://www.mackage.com/eu/en/craftsmanship">
<area shape="rect" coords="25,89,39,106" href="#">
<area shape="circle" coords="35,22,13" href="#">
<area shape="poly" coords="57,101,66,100,57,84,65,96,68,101" href="#">
</map>
</p>
</body>
Jviens de le tester, sa marche =) (sinon jposterai pas en fait -_-')
quelques précisions dans l'ordre:
dans lea balise img, il précise les attributs "width" et "height" (largeur et hauteur(ou l'inverse)) mais ce n'est pas obligatoire (utilse pour redimensionner par contre)
il précise [border="0"] et sa je te conseil de le laisser, sinon un cadre bleu est appliqué à l'image
ensuite, apparament le truc c'est l'utilisation de la [Map] :
la map complete, c'est l'image,
ensuite on définit des zones cliquables dessus en précisant le lien, on peut choisir plusieurs formes (jpense que tu traduiras facilement, et elle ne sont pas difficile à utiliser non plus)
alors un dernière précision, les valeurs sont en pixels, et voici le repère :
0;0________>max,0
|
|
|
\/
0,max
Jm'endormirais moins con ce soir tiens :)
TiboleParano
Messages postés
498
Date d'inscription
mardi 18 mars 2008
Statut
Membre
Dernière intervention
7 avril 2015
61
21 oct. 2009 à 16:18
21 oct. 2009 à 16:18
arf, par contre je repense à quelque chose: pas sur que ce soit utilisable si tu la met en fond d'écran (dans la balise body), il faudra la sortir pour la déclarer comme n'importe quelle image banale avec la balise <img>
et ensuite, il faudra préciser que l'image n'est pas redimensionnable: si le visiteur agrandit/rétrécit sa fenetre, l'image ne changera pas de taile (ou sinon, je sais pas si les zones s'adaptent =S)
si vraiment tu souhaites que ton image soit redimensionnable, il y a peut-être moyen de le faire via une fonction Javascript qui vérifierai le chgt de taille de fenetre de l'opérateur, et qui recalculerai tout les liens en fonctions de la réduction appliqué => faut vraiment le vouloir (si tel est ton souhait, je ferais de mon mieux pour t'aider ;) )
et ensuite, il faudra préciser que l'image n'est pas redimensionnable: si le visiteur agrandit/rétrécit sa fenetre, l'image ne changera pas de taile (ou sinon, je sais pas si les zones s'adaptent =S)
si vraiment tu souhaites que ton image soit redimensionnable, il y a peut-être moyen de le faire via une fonction Javascript qui vérifierai le chgt de taille de fenetre de l'opérateur, et qui recalculerai tout les liens en fonctions de la réduction appliqué => faut vraiment le vouloir (si tel est ton souhait, je ferais de mon mieux pour t'aider ;) )
Supradyn
Messages postés
27
Date d'inscription
samedi 7 mars 2009
Statut
Membre
Dernière intervention
10 juin 2012
6
22 oct. 2009 à 10:32
22 oct. 2009 à 10:32
Merci beaucoup pour tes réponse, je vais essayer!
Par contre, autre question: est-ce que avec cette technique je peux mettre plusieurs liens sur la même image et choisir les endroits ou seront ces liens? Et est-ce que la fonction "texte" est obligatoire ou puis-je mettre mes liens à plusieurs endroits sur une même image?
Merci d'avance pour vos réponses,
Supradyn
Par contre, autre question: est-ce que avec cette technique je peux mettre plusieurs liens sur la même image et choisir les endroits ou seront ces liens? Et est-ce que la fonction "texte" est obligatoire ou puis-je mettre mes liens à plusieurs endroits sur une même image?
Merci d'avance pour vos réponses,
Supradyn
Supradyn
Messages postés
27
Date d'inscription
samedi 7 mars 2009
Statut
Membre
Dernière intervention
10 juin 2012
6
22 oct. 2009 à 10:32
22 oct. 2009 à 10:32
Merci beaucoup pour tes réponse, je vais essayer!
Par contre, autre question: est-ce que avec cette technique je peux mettre plusieurs liens sur la même image et choisir les endroits ou seront ces liens? Et est-ce que la fonction "texte" est obligatoire ou puis-je mettre mes liens à plusieurs endroits sur une même image?
Merci d'avance pour vos réponses,
Supradyn
Par contre, autre question: est-ce que avec cette technique je peux mettre plusieurs liens sur la même image et choisir les endroits ou seront ces liens? Et est-ce que la fonction "texte" est obligatoire ou puis-je mettre mes liens à plusieurs endroits sur une même image?
Merci d'avance pour vos réponses,
Supradyn
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
TiboleParano
Messages postés
498
Date d'inscription
mardi 18 mars 2008
Statut
Membre
Dernière intervention
7 avril 2015
61
22 oct. 2009 à 10:58
22 oct. 2009 à 10:58
Pour répondre à ta question, tu peux mettre autant de liens que tu veux sur l'image, même plusieurs fois le même lien dans différentes zones, fais juste attention à ce que les zones ne se chevauchent pas, et je vois pas ce que tu entends par "fonction texte", tu veux dire le lien ? le "texte" du lien n'est pas affiché à l'image, il faudra qu'il soit écrit "menu" d'origine sur ton image pour que le visiteur sache que c'est là qu'il faut cliquer !
Bonjour :)
J'ai juste une question, si TiboleParano passe par là.
A un moment, je crois que tu as expliqué comment faire pour prendre qu'une partie de l'image, mais je n'ai pas bien compris. Peux-tu ré-expliquer, s'il te plaît ?
J'ai juste une question, si TiboleParano passe par là.
A un moment, je crois que tu as expliqué comment faire pour prendre qu'une partie de l'image, mais je n'ai pas bien compris. Peux-tu ré-expliquer, s'il te plaît ?
TiboleParano
Messages postés
498
Date d'inscription
mardi 18 mars 2008
Statut
Membre
Dernière intervention
7 avril 2015
61
28 déc. 2009 à 17:06
28 déc. 2009 à 17:06
oui j'ai expliqué, en fait tu défini des zones sur ton image, il suffit de relire mon premier post:
tu déclares ton image comme d'ab:
précision:
tu précises la longueur et largeur (width et height) c'est obligatoire pour bien définir les zones cliquables après
tu rajoutes usemap="#NomdeMap" (je sais pas si le # est nécessaire) ceci fait reconnaitre l'image comme une carte pour le navigateur, il la voit ainsi:
0;0________>max,0
|
|
|
\/
0,max
carte sur laquelle on définit des zones entre <map> et </map> gràce à des <area>
ce qui redonne au final le code d'en haut ...
dsl du retard, jreviens de periode d'univ, en espérant que c'est utile
tu déclares ton image comme d'ab:
<img src="tonimage.jpg" width="292" height="118" border="0" usemap="#Map">
précision:
tu précises la longueur et largeur (width et height) c'est obligatoire pour bien définir les zones cliquables après
tu rajoutes usemap="#NomdeMap" (je sais pas si le # est nécessaire) ceci fait reconnaitre l'image comme une carte pour le navigateur, il la voit ainsi:
0;0________>max,0
|
|
|
\/
0,max
carte sur laquelle on définit des zones entre <map> et </map> gràce à des <area>
<map name="Map">
<area shape="rect" coords="56,23,166,82" href="https://www.mackage.com/eu/en/craftsmanship">
<area shape="rect" coords="25,89,39,106" href="#">
<area shape="circle" coords="35,22,13" href="#">
<area shape="poly" coords="57,101,66,100,57,84,65,96,68,101" href="#">
</map>
ce qui redonne au final le code d'en haut ...
dsl du retard, jreviens de periode d'univ, en espérant que c'est utile