Image mappée comme header

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image mappée comme header

Message par TheDirector le Dim 24 Mar 2013 - 14:53

Bonjour,
savez-vous comment mettre des liens sur le header comme ici : http://www.goldheartofficiel.com/ ?

Merchi ^^

TheDirector
*****

Masculin
Messages : 635
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image mappée comme header

Message par Jack&Rose le Dim 24 Mar 2013 - 15:26

Bonjour,

Il me semble bien (mais je n'ai pas une grande connaissance en la matière) qu'il s'agisse d'une image "linkée". C'est-à-dire que l'on crée une image sur un logiciel graphique et qu'on sélectionne des parties pour y ajouter un lien. Ici, je dirais que ça ressemble plus à une infobulle qu'à un lien, d'ailleurs.

J'avais déjà essayé de faire ça, sans succès, car c'est assez compliqué. Il faut utiliser les coordonnées de l'image, ce sont des area map. Il existe des générateurs en ligne, comme là (je ne sais pas si je suis autorisée à poster un lien comme ça, désolée sinon).

Mais il doit exister une autre solution plus simple, je pense.

Jack&Rose
**

Féminin
Messages : 57
Inscrit(e) le : 20/03/2013

http://revivisco.forumactif.org/
Jack&Rose a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image mappée comme header

Message par TheDirector le Dim 24 Mar 2013 - 21:24

Merci beaucoup ^^
En effet, si y a plus simple, je prend ! Smile

TheDirector
*****

Masculin
Messages : 635
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image mappée comme header

Message par Ea le Jeu 28 Mar 2013 - 12:55

Bonjour,

Où en-est votre problème ?

Deux solutions :

  • Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône résolu en éditant votre premier message,
  • Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté,


A bientôt sur ForumActif Smile

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image mappée comme header

Message par TheDirector le Jeu 28 Mar 2013 - 13:38

Problème toujours d'actualité !! Smile

TheDirector
*****

Masculin
Messages : 635
Inscrit(e) le : 08/05/2012

http://contrehomophobes.pro-forum.fr/
TheDirector a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image mappée comme header

Message par Ea le Jeu 28 Mar 2013 - 14:51

Le header est mis en fond.

Et il y a une grande image transparente "mappée" ( voir le tutoriel ), qui :

  • quand on survole une zone donnée, est remplacée par une autre image ( par exemple : http://nsm08.casimages.com/img/2013/03/10/13031004370215192710953108.png )
  • quand on ressort de la zone, est remplacée à nouveau par l'image transparent.

voici un exemple pour faire cela avec gimp :

  • Je veux mettre un header :

    http://i.imgur.com/xQsUG0i.jpg

    et que le monstre dise "salut" et ait un lien vers google quand on le survole.

  • Premièrement, charger l'image :

    http://i.imgur.com/vnvrc4a.png
    http://i.imgur.com/LTyoUCQ.png
    http://i.imgur.com/o6EfUvr.png

  • Ensuite faire l'image transparente :

    http://i.imgur.com/NTBlUPB.png ( si elle n'était pas déjà transparente )
    http://i.imgur.com/xpaFotM.png
    http://i.imgur.com/lPdRULF.png ( cliquer sur l'oeil )
    http://i.imgur.com/pJTO4AZ.png
    http://i.imgur.com/XVQyBeq.png ( aller dans Exporter... )
    http://i.imgur.com/xosJXoL.png
    http://i.imgur.com/eeLGE4B.png

    Puis héberger l'image :

    http://i.imgur.com/ExXpFzN.png
    http://i.imgur.com/z8mXLSz.png
    http://i.imgur.com/wAIYEEw.png
    http://i.imgur.com/yBMz1dI.png

    Elle est disponible à l'adresse : http://i.imgur.com/6X4xGKs.png

  • Ensuite faire une image avec la bulle de "salut" :

    http://i.imgur.com/BpxGY0y.png
    http://i.imgur.com/N2PkQn0.png
    http://i.imgur.com/0ZYqvwL.png
    http://i.imgur.com/jgrSKQ5.png
    http://i.imgur.com/KgzKZwv.png
    http://i.imgur.com/AjtyTVn.png

    Elle est disponible à l'adresse : http://i.imgur.com/hKyPxYm.png

  • Finalement, faire la "carte" :

    http://i.imgur.com/4ZCKJjA.png

  • Sélectionner la zone souhaitée :

    http://i.imgur.com/QHZVp0U.png

  • Dans l'onglet de lien, mettre un lien vers où vous voulez :

    http://i.imgur.com/aCOOyNl.png

  • Dans l'onglet javascript, mettre à onMouseover ceci :

    Code:
    area_change_img(this,'http://i.imgur.com/hKyPxYm.png')
    avec l'adresse entre ' qui est l'adresse d'image avec la bulle.

    À onMouseout mettre ceci :

    Code:
    area_change_img(this,'http://i.imgur.com/6X4xGKs.png')
    avec l'adresse entre ' qui est l'adresse de l'image transparente.

    Et ensuite appuyer sur OK :

    http://i.imgur.com/FQAJRsk.png

  • Une fois que vous avez fait toutes vos zones spéciales, afficher la source du mappage :

    http://i.imgur.com/2nDAHYU.png
    http://i.imgur.com/Eq7T4NA.png

    Cela donnera quelque chose de ce genre :

    Code:
    <img src="Untitled" width="835" height="158" border="0" usemap="#map" />

    <map name="map">
    <!-- #$-:Image map file created by GIMP Image Map plug-in -->
    <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <!-- #$VERSION:2.3 -->
    <!-- #$AUTHOR:root -->
    <area shape="rect" coords="10,29,86,150" onmouseover="area_change_img(this,&apos;http://i.imgur.com/hKyPxYm.png&apos;)" onmouseout="area_change_img(this,&apos;http://i.imgur.com/6X4xGKs.png&apos;)" href="http://www.google.com" />
    </map>
    Les commentaires on peut les retirer, et il faut remplacer Untitled par l'adresse de l'image transparente :

    Code:
    <img src="http://i.imgur.com/6X4xGKs.png" width="835" height="158" border="0" usemap="#map" />

    <map name="map">
    <area shape="rect" coords="10,29,86,150" onmouseover="area_change_img(this,&apos;http://i.imgur.com/hKyPxYm.png&apos;)" onmouseout="area_change_img(this,&apos;http://i.imgur.com/6X4xGKs.png&apos;)" href="http://www.google.com" />
    </map>
    Ceci c'est le code de l'image transparente mappée, qu'il faudra que vous vous arrangiez afin qu'elle soit au dessus de votre header.

    Ensuite également pour que ça fonctionne, il faut mettre ce code javascript sur toutes les pages ( voir ce tutoriel ) :

    Code:
    function area_change_img(a, b) {
      $('img[usemap="#' + $(a).closest("map").attr("name") + '"]').attr("src", b)
    };

    Voilà un exemple sur une page html avec ce qu'on a fait :
    http://www.maonyn.com/h28-test-map-img

    Sinon vous voulez en mettre plusieurs différentes sur la même page, il faudra modifier : "#map" et "map" en changeant map par quelque chose d'autre ( map1, map2, map3, ... par exemple ).

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image mappée comme header

Message par Ea le Mer 3 Avr 2013 - 16:57

Je déplace ce sujet en archive, vu l'absence de réponse de l'auteur.

La solution a été testée et devrait fonctionner.


Cordialement.

Ea
Aidactif
Aidactif

Messages : 23417
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum