AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Intégration de lien sur une image

    Partagez
    avatar
    Shacoham
    MasculinAge : 24Messages : 82

    le Dim 24 Mai 2015 - 20:16

    Bonsoir !


    J'espère tout d'abord poster ce message au bon endroit ^^ Avide de curiosité et n'ayant pas un niveau suffisant en codage pour répondre à mes questions, je m'en remets à vous pour soulever le sujet ! Very Happy Je n'ai pas trouvé de sujets mentionnant ces termes, chaque code étant unique et la théorie divergeant selon le projet. J'espère que le sujet n'aura donc pas été déjà proposé ou évoqué dans quelle cas je m'en excuserais ^^
    Je voudrais donc discuter, en apprendre davantage et partager cette question avec d'autres membres. Est-il possible d'intégrer plusieurs liens précisément sur une image Jpeg ou Png, par exemple une carte qui permettrait une navigation sur tout un forum ou bien par exemple sur une page d'accueil, une image qui permettrait la navigation de la même manière que préciser précédemment.


    Je vous remercie par avance et je vous souhaite une bonne continuation Very Happy


    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Lun 25 Mai 2015 - 13:20

    Yo !

    Alors le seul moyen que je connais c'est de faire une div de la taille de ton image en position relative et de placer tes liens dans cette div avec une position absolute. C'est long et ce n'est pas intégré à l'image. Mais c'est un moyen détourné d'y arriver.

    En vrai je ne sais pas si c'est possible sur une image :hum:

    Enfin voilà une piste pour toi \o/

    avatar
    Shacoham
    MasculinAge : 24Messages : 82

    le Lun 25 Mai 2015 - 14:50

    D'accord, je te remercie pour ta réponse rapide ! C'est à tester dans ce cas, je regarderais ça de plus près Very Happy Ça m'a tout l'air compliqué quand même, je vais voir si quelqu'un n'a pas une réponse magique ^^ D'ici, merci beaucoup A-Lice Very Happy
    avatar
    Yui
    FémininAge : 28Messages : 334

    le Lun 1 Juin 2015 - 10:43

    Salut !

    Mettre des liens dans une image, c'est toujours un peu pénible à faire, car on n'échappe pas vraiment à la nécessité de récupérer des coordonnées précises et les informations relatives à la forme de la zone. Je connais deux techniques pour faire de l'image mapping (je connais pas de terme équivalent fr ?), l'une étant plutôt simple à comprendre et à mettre en oeuvre, bien que fastidieuse et limitée à des zones rectangulaires, et l'autre moins familière (elle fait appel à des balises HTML spécifiques), qui permet d'avoir des zones de n'importe quelle forme, mais qui nécessite de bidouiller (en JavaScript) pour pouvoir avoir des effets de survol. Alors, il n'y a pas vraiment de "réponse magique". Il te faut trouver la solution qui correspond le mieux aux contraintes de ton projet.

    La première, c'est la solution mentionnée par Alice : elle est familière à quiconque sait jouer avec des blocks et les positionnements absolute (si ce n'est pas le cas, ce n'est pas bien sorcier et ça peut être un bon apprentissage). La gestion d'éventuels effets de survol est classique, géré en CSS, mais selon l'effet (par ex, sur une carte, un contour lumineux autour d'un bâtiment), il faudra bien sûr rigueur et précision afin d'éviter d'avoir des décalages. Pour chaque bloc, il faut des coordonnées x-y et les dimensions de la boîte (ce n'est pas très compliqué à obtenir sur un logiciel type Photoshop) mais par contre, on reste effectivement dans la forme rectangulaire. Si cela convient, honnêtement, c'est la solution que j'ai tendance à préconiser (sauf si pas besoin d'effet de survol).

    La seconde méthode consiste à utiliser des balises HTML prévues exprès pour ces cas d'image mapping. Voici un exemple :

    Code:
    <map id="map1" name="map1">
       <area shape="rect" alt="Rectangle" title="Rectangle" coords="31,34,133,136" href="https://www.google.fr/search?q=rectangle" target="_blank" />
       <area shape="circle" alt="Cercle" title="Cercle" coords="319,84,57" href="https://www.google.fr/search?q=circle" target="_blank" />
       <area shape="poly" alt="Polygone" title="Polygone" coords="210,58,146,183,273,182" href="https://www.google.fr/search?q=polygon" target="_blank" />
    </map>

    <img src="http://nsa37.casimages.com/img/2015/05/25/150525044603348146.jpg" usemap="#map1" />

    Ce qui donne :
    Spoiler:
    RectangleCerclePolygone

    Explication rapide du code ci-dessus : Il faut insérer une balise img normale et lui ajouter l'attribut usemap, qui contiendra l'id (avec #) ou le name (sans #) de ta balise map (note : en général, sur la balise map, on met le name et l'id identiques pour éviter tout souci). Au sein de cette balise map, on peut définir des zones (les balises area) qui auront la forme (attribut shape) d'un cercle, d'un rectangle ou d'un polygone. Cette forme est caractérisée par des coordonnées et/ou des informations relatives à sa dimension (attribut coords). Les autres attributs d'une zone fonctionnent comme sur une balise lien (a) classique.

    Toute la partie "map" peut être générée automatiquement par différents outils, comme par exemple Maschek. Note qu'il est également possible d'utiliser Maschek pour générer des le code de la première méthode (map CSS), mais sache que ça peut manquer de précision pour certains effets de survol comme ceux que j'ai déjà mentionnés.

    Bref, comme je disais plus haut, malheureusement, avec une image map classique, le survol n'est pas géré par défaut. Ce qui nous amène à de la bidouille.

    La solution la plus évidente, c'est de générer autant de map qu'il existe de zone potentiellement survolée (+ l'originale), et en cas de survol sur une des zones, on utilise un petit code JavaScript pour changer l'attribut src de la balise img, et ainsi, changer la carte originale par la carte "zone X survolée". Cela nécessite néanmoins de précharger les images en javascript dès le chargement de la page pour éviter un "blanc" au moment du survol. Et évidemment, cette solution pose problème au niveau du poids de la page. Si tu as 3 zones sur une petite image, ça passe, mais si tu en as plus de 50 sur une grande (ça m'est arrivée sur une appli web T.T), la page va mettre 20min à charger. Parfois, l'usage des png transparent peut alléger le poids des images (on met la vraie carte en src classique, mais aussi en background-image, et au survol, on switch le src par un grand png transparent de la taille de la map avec juste le bout d'image qui change). Mais ça peut faire tout de même un poids conséquent par rapport à un jpeg classique de la taille du bout d'image en question (dépendant du projet, donc).

    Après, on peut aussi (j'imagine, jamais testé) coupler l'image map css et l'image map classique. Exemple : une carte avec des rues et des bâtiments, les rues sont sinueuses donc polygone en balise area, mais les bâtiments sont rectangulaires, donc css, ce qui permet d'envisager les deux types de survol pour alléger au maximum.

    Autre solution pour le survol, utiliser le plugin jQuery nommé ImageMapster pour faire des effets de surbrillance tout simple. Je m'en suis servie sur ma webapp avec des contraintes telles que la compatibilité tactile, et ça rendait pas si mal, même si c'était moins chouette qu'un bel effet photoshopé. Documentation en anglais, par contre. Je crois que d'autres effets sont disponibles (contours j'ai vu notamment), mais je n'ai pas fouillé plus que ça, je te laisse jeter un oeil si ça te branche.

    Enfin, là, je n'ai parlé que des cas où tu voulais vraiment faire un survol sur la carte en question. Tu peux aussi biaiser et afficher simplement une infobulle au moment du survol, auquel cas, tu n'as pas la même problématique (de même, certains utilisent l'image map pour afficher des informations sur le côté, dans une zone définie sans avoir besoin d'effet de survol, là aussi, autre problématique).

    Voilà, je crois que j'ai fait le tour de ce que je peux t'apporter sur la question. Comme tu le vois, plusieurs solutions possibles (et il doit en exister d'autres encore), mais pas vraiment de solution parfaite. Il faut trouver celle qui conviendra le mieux au projet en question Very Happy Si certains connaissent d'autres astuces, je suis vraiment curieuse de les connaître, c'est toujours un sujet délicat ^^



    ~ Yui ~
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Lun 1 Juin 2015 - 17:39

    Salut ! Moi aussi j'essaye de faire une carte interactive... a priori je pars sur un système de divs mais je vais suivre tout ça attentivement ^^



    Alumine
    avatar
    Shacoham
    MasculinAge : 24Messages : 82

    le Jeu 4 Juin 2015 - 9:38

    Super ! Merci pour cette réponse très complète Very Happy Je vais essayer de me pencher davantage sur le sujet mais ça m'a l'air tout de même un peu compliqué ^^ Pour le code mais pour Image Mapster aussi ! :p Et puis ça va me prendre un certain temps, comme je le disais je n'ai pas un niveau en codage très très poussé ! Je m'y suis mis y'a pas longtemps et j'ai ressorti mes cours du lycée même si c'était plus des fonctions que du html/css :p J'avais pensé à découper la carte en effet et lier les parties qui m'intéressent mais effectivement ça risque de devenir vite très lourd au final ! Et si tu fais une carte interactive pour deux liens ça vaut pas trop le coup ^^ C'est encore en cours de réflexion, on sait pas vraiment si ça vaut le coup, si c'est pratique ou pas parce que si tu fais une carte interactive faut aussi penser où la placer ! Est-ce que tu peux développer un peu l'idée de l'infobulle, j'ai pas tout saisi mais ça m'a tisé la curiosité x) Et est-ce que je pourrais revenir vers toi si jamais j'ai des soucis avec mon code ? :)
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 4 Juin 2015 - 10:39

    Salut !

    Je ne connais que ces deux solutions également. L'avantage du "mapping" c'est que tu peux choisir la forme de la zone cliquable alors qu'avec la méthode d'A-lice ça sera forcément carré, rectangulaire ou rond mais pas triangulaire ou polygonal. Néanmoins j'avoue que par réflexe et parce que j'y suis plus habitué, je serais tenté d'utiliser la première méthode x).

    Au passage Yui ton explication du mapping est super ! Te serait-il possible d'en faire un tutoriel ? En partant de ton message là et en le mettant en forme de façon plus "neutre" et officielle... ^^ Enfin je ne t'oblige à rien évidemment.



    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Jeu 4 Juin 2015 - 22:06

    Hum, j'avais pensé à une 3ème option, celle d'utiliser les svg,
    On fait son svg aux mêmes dimensions que l'image, avec dedans chaque zone avec laquelle on souhaite interagir avec une id spéciale.

    J'ai fait un petit test pour voir (pour plus de visibilité j'ai mis des bordures au survol, on peut le voir dans le CSS) :


    J'ai fait le svg avec illustrator, dans le logiciel ça ressemble à ça (j'ai fait un calque pour chaque élément) :


    Ensuite je récupère et je nettoie le svg d'illustrator, je le met dans le code... On ajoute les liens, et voilà

    Pour ceux qui ne connaissent pas les svg, ça doit vaguement ressembler à du chinois ce que je dis là... * va mourir *, pour ceux qui en avaient déjà entendu parlé ça ouvre des peut-être des possibilités, je retourne dormir moi :wall:
    Pour un projet récemment on avait une carte sur illustrator, puis ensuite l'avait animée pour un petit site, c'était tout mignon ♥ *sort*

    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 4 Juin 2015 - 22:18

    Ah tiens ça me fait penser qu'on peut faire ça avec le flash, même sur photoshop en fait. Du moins on pouvait avec Imageready avant donc je pense que c'est toujours le cas... Mais ça implique une image flash, un peu lourde, donc c'est peut-être pas le meilleur moyen.



    avatar
    Shacoham
    MasculinAge : 24Messages : 82

    le Ven 5 Juin 2015 - 9:33

    En partant de toute vos solutions, et je vous remercie encore, quel serait selon vous la meilleure et la solution la plus simple (en sachant que ce n'est à priori quelque chose de pas simple du tout xD) ? :) La deuxième, celle de Yui, me paraît pas trop mal Very Happy D'ailleurs, j'avoue qu'un tutoriel serait franchement le pied, avec des exemples et des illustrations de tes propos, c'est un peu près de ça que je rêve en ce moment le soir xD *chante avec entrain* "Le tuto ! Le tuto ! Le tuto !" Désolé Razz

    Je me dis que ça peut être pratique aussi pour faire interagir une partie d'une image ou cacher un spoiler dans une photo ^^ Sur Maschek, peut-on faire autant de lien qu'on veut ? Est-ce qu'une image avec beaucoup de liens serait lourde à lire par la suite sur le forum ? :)
    avatar
    Yui
    FémininAge : 28Messages : 334

    le Ven 5 Juin 2015 - 13:19

    Hello !

    Euh, je reprends x)

    Shacoham > Pour ce qui est des infobulles, c'est juste des infobulles classiques. Un peu comme le résultat des attributs title/alt dans le navigateur, mais immédiat, qui ne disparaît pas quand le curseur bouge, et personnalisable. J 'ai fait un rapide exemple d'infobulle ci-dessous, au cas où. Après, tu peux rajouter des effets sur les infobulles (c'est brut de pomme là, bien moche ^^) et parfois on préfère lui faire suivre le curseur de la souris (c'est un peu particulier à mettre en place, mais ça peut se faire). L'avantage des infobulles, c'est qu'on n'a pas obligé de superposer chaque image de survol au pixel près après un découpage minutieux.



    Si jamais tu as un souci, hésite pas à faire un sujet classique puis à m'envoyer un MP avec le lien. Si personne n'a pu t'aider entre temps, je jetterai un oeil :) Mais les membres verts sont plutôt efficaces il me semble, alors ça ne m'étonnerait pas que t'aies une réponse avant que j'aie le temps de regarder Very Happy

    Nihil > Ah, je n'ai jamais utilisé de SVG, alors je ne connais pas du tout cette méthode, mais ça a l'air vraiment très intéressant. Je la rajoute sur ma Todolist des choses à tester, ça rajoute une corde à mon arc ^^ Si tu as des remarques sur les limites et avantages de cette méthode, je suis preneuse.

    Okhmhaka > Oui, c'est vrai, j'avais zappé le Flash. Cela dit, si la personne connaît pas le logiciel, Flash peut être une vraie galère, même avec un tuto. Et en terme de réutilisation des connaissances, y a de fortes chances pour que ça lui apporte rien, parce que c'est une technologie mourante (et je dis ça avec tristesse, j'ai toujours bien aimé l'AS3). Après, ça peut éventuellement suppléer à un besoin d'animations complexes, encore qu'entre HTML5, CSS3 et JS... Y a de quoi trouver son bonheur, en général.

    Ce qui me fait tilter... Pourquoi pas avec des canvas ? Une recherche express ne me montre des résultats pas révolutionnaires pour beaucoup de travail, mais j'ai à peine expérimenté les canvas (dans ma todolist ^^), alors si quelqu'un a envie de commenter cette solution...

    Pour revenir à tes dernières questions Shacoham, effectivement, ça peut être utile pour plein d'autres choses qu'une carte pure et dure. Le concept de l'image mapping n'est après tout que d'avoir une interaction avec une ou plusieurs parties de l'image. Sur Maschek, à ma connaissances, on peut faire autant de lien que souhaité (après, niveau ergonomie sur le site, c'est pas terrible il me semble, mais tu peux le faire en plusieurs fois : chaque forme correspond à une area, donc tu peux générer plusieurs maps et réunir toutes les area dans une seule map à la fin). Quant à avoir de nombreux liens dans une image map, ça n'a à ma connaissance pas d'incidence particulière : ce ne sont que des balises HTML, l'impact est négligeable. Par contre, les interactions peuvent tout changer. Si tu fais une infobulle commune comme dans mon exemple précédent, je te dis "pas de soucis". Fais-en 100 : à mon avis, ça passera. Par contre, si pour chacune de tes zones tu veux gérer un magnifique hover avec une image, alors, là, ça te fait autant d'image supplémentaire que de zones, ce qui peut poser souci. Mais ça peut dépendre de plein de choses, si tes zones font 5px*5px, ce sera peut-être pas si lourd que ça.

    Pour ce qui est de te conseiller LA méthode, franchement, perso, je peux pas sans connaître ton projet. De moi-même, je te conseillerai naturellement l'une des deux méthodes mentionnées dans mon premier message, parce que je ne connais pas suffisamment la méthode SVG, pas plus que la méthode canvas, et que j'ai des réserves avec Flash.

    La première question à te poser, c'est "peux-tu te contenter de formes rectangulaires ?". Si impérativement il te faut des cercles ou des polygones, cherche pas et prends la seconde méthode : tu n'as pas vraiment le choix. Si tu peux te contenter de rectangles, la première méthode est probablement la plus simple et la plus efficaces, c'est en tout cas celle que j'aurai tendance à conseiller. Après, le choix des effets de survol doit se faire en fonction de tes envies, mais aussi des contraintes (comme dans mon projet d'appli web : on aurait voulu de beaux survols photoshopé, mais c'était trop lourd et on a fini avec de la surbrillance : moins sexy, mais fonctionnel). Et si à l'inverse tu tiens trop aux effets, revient aux rectangles Razz Comme il n'y a pas de réponse absolue, c'est difficile de répondre, d'autres te conseilleront peut-être autrement. Sinon, il faudrait préciser un peu plus ton projet (taille de l'image, nombre de zones, tailles approximatives des zones, quels effets te font envie...)

    Pour le tuto, oui, je devrais pouvoir en proposer un. Je vais essayer en tout cas. Par contre, je suis pas sûre d'avoir compris : vous avez envie qu'il porte à la fois sur les méthodes CSS et HTML ou les explications pour la méthode HTML suffiront ?



    ~ Yui ~
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Ven 5 Juin 2015 - 13:59

    @Yui a écrit:Nihil > Ah, je n'ai jamais utilisé de SVG, alors je ne connais pas du tout cette méthode, mais ça a l'air vraiment très intéressant. Je la rajoute sur ma Todolist des choses à tester, ça rajoute une corde à mon arc ^^ Si tu as des remarques sur les limites et avantages de cette méthode, je suis preneuse.
    Utilisé dans ce cadre là c'est la première fois que je tente, mais sinon c'est vraiment cool les svg *o*... J'ouvrirai ptet une conversation sur le sujet tiens o/
    On peut faire plein plein de choses avec les svg, je pense que sur un projet plus complexe de map ils sont plus judicieux, mais à étudier

    @Yui a écrit:Ce qui me fait tilter... Pourquoi pas avec des canvas ? Une recherche express ne me montre des résultats pas révolutionnaires pour beaucoup de travail, mais j'ai à peine expérimenté les canvas (dans ma todolist ^^), alors si quelqu'un a envie de commenter cette solution...
    On peut faire en canvas aussi, moi j'en ai juste fait un peu jusqu'à maintenant, et oui c'est une possibilité aussi XD... Mais plus compliqué à mettre en place je trouve :/

    Sinon comme Yui l'a dit, il faudrait que tu détailles plus ce que tu veux faire pour savoir la meilleure méthode :p

    Pour le tuto, c'est ptet plus simple de séparer en 2 tutos en mettant un lien de l'un vers l'autre (^-^).

    Et maintenant je suis curieuse de savoir quel était le projet de Yui....

    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 16:51