Well, well, well. Disons que nous maîtrisons les techniques du rollover et du mapping. Ou tout du moins, si nous ne sommes pas encore capables de construire les-dits bidouillages de zéro, directement dans la source, sans oublier la moitié des balises en route, disons que nous avons à peu près compris à quoi correspond chaque bout des codes html et ce qu'il faut changer dedans pour personnaliser notre rollover, ou notre mapping.

    Ceci posé, si nous essayions de combiner les deux techniques ?

    Soit une image de départ (ici, la version cyanosée -- merci Photofiltre -- de la pochette du célébrissime « We Get Requests » d'Oscar Peterson :

    Et soient trois images préparées à partir de la pochette d'origine et de sa version cyanosée, et rigoureusement de la même taille que l'image de base. Celle qui met la lumière sur Ray Brown, par exemple :

    Première étape, héberger les quatre images. Bon. Jusqu'ici, ça va.

    Deuxième étape, respirer un bon coup, décrocher le téléphone, débrancher la sonnette et ouvrir Gimp pour la partie « mapping » de la bidouille. Ici, j'ai délimité plus ou moins approximativement les trois zones qui se transformeront au survol (je suis d'une nature approximative, que voulez-vous) et associé à chacune d'entre elles un lien renvoyant vers un site consacré au musicien concerné.
    Ensuite, vous connaissez la manip' : sauvegarder le mapping en .html... et le garder sous le coude, parce que ce n'est pas lui qui va servir de base au code d'aujourd'hui.

    Mon requests.html (clic droit sur le fichier et ouvrir avec Wordpad pour éviter les mauvaises surprises), le voilà :

<img src="requests-base.jpg" width="450" height="442" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:HP_Propriétaire -->
<area shape="rect" coords="321,14,444,229" href="http://www.oscarpeterson.com/" />
<area shape="rect" coords="168,86,290,262" href="http://fr.wikipedia.org/wiki/Ray_Brown" />
<area shape="rect" coords="28,151,160,316" href="http://www.edthigpen.com/" />
</map>

    C'est ici que les choses vraiment sérieuses commencent. Bon, vu que je débute en codage html, j'ai réutilisé un code généré pour un premier essai, lui-même dérivé du code de Frof (je vous rassure, il est fait pour être piqué et réutilisé) et je l'ai adapté. A la fin de l'opération, je me suis retrouvée avec le code suivant :

 

<map id="requests" name="requests">
<!-- zone 1 ed -->
<area onmouseover="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-ed.jpg'" onmouseout="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-base.jpg'" shape="poly" coords="28,151,160,316" href="http://www.edthigpen.com/" /></area> <!-- zone 2 ray -->
<area onmouseover="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-ray.jpg'" onmouseout="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-base.jpg'" shape="poly" coords="168,86,290,262" href="http://fr.wikipedia.org/wiki/Ray_Brown" /></area> <!-- zone 3 oscar -->
<area onmouseover="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-oscar.jpg'" onmouseout="requests.src='http://idata.over-blog.com/1/17/94/83/bidouilles/requests-base.jpg'" shape="poly" coords="321,14,444,229" href="http://www.oscarpeterson.com/" /></area>
</map>
<p align="center"><img alt="oscar peterson trio" src="http://idata.over-blog.com/1/17/94/83/bidouilles/requests-base.jpg" usemap="#maproll3" name="requests" id="requests" border="0" width="450" height="442" /></p>

    Et là... rien. Nada. Walou (tiens, voilà qui me rappelle quelque chose, huhu). Ma version cyanosée restait cyanosée, sans rien qui se passait. Pas de projecteur sur Ed, Ray et Oscar, même pas de liens, rien. Pourtant, j'avais tout bien fait comme il fallait. Tout bien changé ce qu'il fallait. J'avais bien mis :

1, l'url de mon image de base (je soupçonne la dernière occurrence de servir à définir ce qui doit apparaître en cas de panne du truc, soit dit en passant, mais rien n'est moins sûr)

2, les urls de mes images transformées.

3, la largeur et la hauteur de mon image (récupérées dans mon requests.html).

4, les coordonnées de chacune des zones (elles aussi récupérées dans requests.html)

5, le nom de mon image (bon là, ne me demandez pas s'il est indispensable que le name et l'id du mapping portent le même nom que les documents, très sincèrement je n'en sais rien... donc dans le doute...)

6, mes liens étaient bien là où il fallaient...

 

    Juste un tout petit détail différait... J'aurai au moins appris un truc aujourd'hui : c'est qu'en html, un rectangle n'est pas un polygone. C'est vraiment sensible ces petites bêtes-là, pas vrai ?

 

   Bon. J'ai « préchargé » mes quatre images selon la méthode expliquée précedemment, mais il n'en reste pas moins que tout ceci est encore un peu lent au démarrage... Juste pour vous donner une idée, chaque image fait une soixantaine de Ko. Pas énorme pourtant, mais encore un poil trop lourd pour que l'effet soit vraiment spectaculaire. Vous savez ce qu'il vous reste à faire... alléger, alléger... et vous lancer !

    Bon, moi je suis contente, là. Parce que j'ai trouvé un truc marrant, pas compliqué à réaliser, mais qui fait son petit effet. Y'en a un sur ma page d'accueil, z'avez pas pu le louper. Pour faire simple, c'est une image sur laquelle sont déterminées des zones, chacune de ces zones étant associées à un lien.

    Ça s'appelle le mapping, et nous allons voir pas à pas comment ça se fabrique, ce truc-là.

    Bon, primo, il faut télécharger The GIMP. The GIMP, c'est un logiciel de retouche avec tout plein de fonctionnalités, tellement plein que je n'y comprends rien de rien... et qu'il ne me sert qu'à faire du semi-transparent et, maintenant, du mapping.

    Deuxio, il faut préparer l'image sur laquelle on veut travailler. Voilà la mienne : c'est du vite fait pas très bien fait pour les besoins de la démonstration -- c'est aussi et surtout un cliché qui rassemble quelques objets reçus au cours des derniers mois de quelques personnes croisées au hasard de la blogosphère (zone OBienne). Le but du jeu, c'est d'associer à chaque objet un lien qui envoie vers le blog de la personne en question.


  

    Troisio, et c'est là que les choses sérieuses commencent, ouvrir l'image dans The GIMP. L'image une fois ouverte, cliquer sur Filtre > Web > Image Map (bon, mon GIMP à moi est en anglais, mais vu qu'il n'y a rien d'autre dans le sous-menu Web, les risques de se planter me paraissent assez limités).

    Quarterio : dans la petite barre d'outils à gauche, choisir le mode de sélection souhaité : rectangle, ellipse ou polygone, selon la forme de la zone à délimiter. Une fois la dite zone délimitée, double-cliquer sur place (à l'intersection des deux dernière lignes qui délimitent la zone, quoi) afin d'ouvrir la fenêtre dans laquelle on rentrera l'url du lien. Penser à cocher Web site, au fait (ne me demandez pas à quoi servent les autres trucs, je n'en ai pas la moindre idée) et répéter la manoeuvre autant de fois que nécessaire.

    Quinquino : l'heure est venue de sauvegarder l'OEuvre. Là, vous allez être surpris : vous n'allez pas la sauvegarder en .jpg ni en .gif ni en .png ni en aucun autre format image, mais en... html. Donc, clic sur Fichier > Enregistrer Sous et, dans la fenêtre qui s'ouvre, rentrer à la main le nom complet du fichier + l'extension. Mon OEuvre à moi s'intitule ainsi « mosaique2.html »

    Sexaco : ouvrir la dite OEuvre.html, sous Word Pad (parce que, on ne le répètera jamais assez, Word rajoute des balises partout donc, à éviter), copier le code et le coller en mode source / html dans l'éditeur. Mon code à moi, le voilà (un peu rogné parce qu'il ne rentrait pas dans la colonne articles) :

<img src="mosaique2.jpg" width="600" height="280" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image Map file created by GIMP Imagemap Plugin -->
<!-- #$-:GIMP Imagemap Plugin by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.0 -->
<!-- #$AUTHOR:HP_Propriétaire -->
<area shape="poly" coords="6,139,39,254,120,233,86,108" href="http://www.la-boucane.com/" />
<area shape="poly" coords="371,136,335,232,406,248,441,154" href="http://mortepoule.over-blog.com/" />
<area shape="poly" coords="446,13,590,49,514,252,424,222,446,153,433,143" href="http://musicfox.over-blog.com/" />
<area shape="poly" coords="214,167,206,230,245,233,253,172,238,165,252,146,227,121,22 href="http://lespetitsmotsdecat.over-blog.com/" />
<area shape="poly" coords="25,26,274,4,280,12,256,135,225,110,218,117,219,156,198,16 href="http://leglossamulaii3.over-blog.com/" />
<area shape="poly" coords="308,188,283,190,269,207,259,238,289,249,305,244,314,222,3 href="http://www.alixcrea.com/" />
<area shape="poly" coords="288,48,269,175,345,184,370,126,415,136,420,59,289,48" href="http://www.de-kepper.com/" />
</map>

    Bon là, pour tout vous dire, j'ai bloqué. Si je baladais ma souris sur ma page d'accueil, je voyais bien qu'il y avait des liens là-dedans, mais l'image elle-même n'apparaissait pas. Nada. Walou. Et puis j'ai activé les synapses (les neurones vont très bien, merci, c'est juste que de temps en temps, ben ça connecte pas) et je me suis dit que, quand-même, la première ligne avait une drôle de tête. Qu'un img src="mosaique2.jpg", ben c'était pas html-iquement correct. Qu'à la place, j'aurais dû avoir une url d'image. Donc, qu'il fallait que je l'héberge quelque part. Je parle bien sûr de l'image d'origine, avant mapping. Avec l'autre, peu de chances que ça fonctionne...

    Septuplo, donc : héberger l'image et, dans le code qu'on vient de coller en mode source, remplacer le nom du fichier (ici : mosaique2.jpg) par l'url (ici : http://idata.over-blog.com/1/17/94/83/bidouilles/maproll-base.jpg).

    Et là, ploum ploum abracadabra...




    Clic sur chaque élément de l'image pour découvrir l'identité de celui ou celle qui l'a envoyé... et un grand merci de plus, assorti du bisou de rigueur, à Nuno, Kokoro, Cat, Alisnat, Xidiki, Swan et Fosquinou ;)