rollover sur plusieurs images avec mappage

Version imprimable

11/06/2013, 20h08
Corbou65

rollover sur plusieurs images avec mappage

Bonjour,

Préambule
- Tout d'abord, je ne connais quasi rien à l'utilisation de javascript.
- J'utilise, quand il le faut, les applications "TextWrangler" ou "Kompozer" pour introduire du codage html dans mon site.
- Depuis plusieurs jours, je lis tous les forums (javascript, css, ou html) pour trouver une aide à la création à mon projet. Mais je n'ai trouvé nulle part de solution qui y réponde de façon totalement compréhensive ou complète.

Je souhaite créer un trombinoscope pour une société comprenant 30 membres :

1. j'ai une image de base (exemple ici) qui comprend à l'orgine 30 petits portraits mis côte à côté (images tirées de différents contes de fées, dont les dimensions sont de 115 x 115 px).
2. j'ai créé 30 nouvelles images (exemple ici), à la même dimension que l'image de base, mais dont une des cases montre un des membres.

Mon souhait :
- j'aimerais que lorsque l'on déplace la souris sur l'une des cases de l'image de base, on voit apparaître le membre correspondant. (onmouseover / onmouseout). Puis que dès que l'on sort de l'image du membre on retombe sur l'image de base, et ainsi de suite pour toutes les autres cases que l'on survolerait.

Mes démarches :
- j'ai tenté de travailler avec gimp / filtre web, pour créer les différentes zones de la map. Mais la source du fichier gimp ne permet pas le rollover, mais simplement le fait de cliquer sur l'image.
- j'ai recherché un code javascript qui me permette (selon ce que j'ai lu dans divers forum) de précharger les images dans le cache du navigateur.
- j'ai collé des bouts de codes trouvés dans les tutoriels ou dans les forums d'entraide, mais je pense que j'ai pas mal d'erreurs que je ne comprends pas.
- j'ai essayé de suivre à la lettre certains tutoriels mais je n'arrive pas au résultat escompté (mon projet), car le résultat obtenu ne fonctionne souvent qu'avec une seule image de base et une seule image pour le "onmouseover".

Mes questions
- Quelqu'un peut-il m'indiquer le-s code-s qu'il faudrait utiliser pour mener à bout mon projet (ou m'indiquer s'il est complètement utopiste) ou les démarches, tutoriels à suivre pour y arriver ?
- Avez-vous besoin d'autres indications plus précises pour me répondre ?

Je vous remercie d'avance pour votre lecture et votre éventuelle aide !

En supplément à la question posée

Voici le code généré par Gimp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<img src="http://www.xxx/gallery/portraits_trombi/trombinoscope.png" width="589" height="700" border="0" usemap="#map" />
 
<map name="map">
<area shape="rect" coords="1,1,115,111" 
onmouseover="http://www.xxx/gallery/portraits_trombi/trombi_seb.png" 
onmouseout="http://www.xxx/gallery/portraits_trombi/trombinoscope.png"  
nohref="nohref" />
<area shape="rect" coords="115,1,234,111"  
onmouseover="http://www.xxx/gallery/portraits_trombi/trombi_dom.png" 
onmouseout="http://www.xxx/gallery/portraits_trombi/trombinoscope.png"  
nohref="nohref" />
<area shape="rect" coords="235,2,351,110"
onmouseover="http://www.xxx/gallery/portraits_trombi/trombi_flo.png" 
onmouseout="http://www.xxx/gallery/portraits_trombi/trombinoscope.png"  
nohref="nohref" />
<area shape="rect" coords="353,0,466,111" 
onmouseover="http://www.xxx/gallery/portraits_trombi/trombi_tophe.png" 
onmouseout="http://www.xxx/gallery/portraits_trombi/trombinoscope.png"   
nohref="nohref" />
</map>

Bonjour !

Je te propose de travailler avec la propriété background-image et sans Javascript, juste avec CSS. Ce sera plus performant et les images seront préchargées.

Plutôt qu'une seule image de base avec tous les portraits, ça serait plus simple et plus sémantique d'avoir 30 images de base également.

http://codepen.io/seraphzz/pen/ymozD
Code:

1 2 3 4 <div class="portrait" id="trombi-seb"></div> <div class="portrait" id="trombi-seb"></div> <div class="portrait" id="trombi-flo"></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .portrait { width:220px; height: 220px; background-size: 100% 100%; display:block; float:left; } #trombi-seb { background-image: url('http://www.bourgnon.net/images/forum_javascript/image_de_base.png') } #trombi-seb:hover { background-image: url('http://www.bourgnon.net/images/forum_javascript/image_du_rollover1.png'); }

12/06/2013, 10h46
Corbou65

Merci beaucoup pour cette réponse

Un tout grand Merci pour la rapidité de la réponse, en premier lieu.

Et je vais tester ce que vous me proposez là.

Juste une question ou deux questions supplémentaires si j'ose, car je n'ai pas pour habitude d'aller farfouiller ou de changer quoique ce soit au niveau de la CSS.

Je travaille sur un site wordpress.
- la page "trombinoscope" sera un article indépendant
- faut-il donc crééer deux fichiers distincts (l'un en CSS et l'autre en HTML) ?
- si oui, où faut-il les placer exactement pour qu'on puisse y faire référence quand on visionne cet article ?
- ou alors peut-on, sur la page HTML de l'article, introduire le codage CSS (et à quel endroit exactement) ?
- au niveau des images que l'on va survoler, comment définit-on la zone réactive exacte ? (j'avais, dans un premier temps, créer une image pour chacun des portraits des membres et le reste de l'image de base en grisée). Dans l'exemple que vous me proposez, ça marche pour l'image tout en haut à gauche, mais qu'en sera-t-il pour la seconde image à droite ?

Merci d'avance.

Bonjour,
pour rebondir sur l'approche de SylvainPV, il n'est pas besoin de javascript.

Une approche à peine différente, et ce compte tenu de la forme carré des images à manipuler
- une image de fond
- des vignettes des différents personnages placées au dessus du fond et masquées via la propriété opacity, et à la suite les unes des autres
- sur le :hover des vignettes, on passe leur l'opacity à 1, ce qui les montrent, dans le même temps on modifie le fond, via le changement d'URL ou encore en jouant sur l'opacity voire le grayscale, mais CSS3 pas encore bien supportée.

L'utilisation du sélecteur d'adjacente ~, fait que dans la structure l'image de fond sera la dernière mise dans le conteneur.

un petit exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>:hover style MAP</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
}
#conteneur{
  position:relative;
  margin:5em auto;
  width:230px;
  height:230px;
  overflow:hidden;
  cursor: pointer;
}
img{
  display:block;
}
.fond{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
}
.opaque{
  position:relative;
  float:left;
  width:113px;
  height:113px;
  border:1px solid #DDF;
  opacity:0.0;
  z-index:10;
}
.opaque:hover{
  opacity:1;
}
.opaque:hover ~ .fond{
  opacity:0.3;
  -webkit-filter: grayscale(1);
     -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
       -o-filter: grayscale(1);
          filter: grayscale(1);
}
 
</style>
<!--[if lt IE 9]>
<style>
.opaque{
  filter:alpha(opacity=0);
}
.opaque:hover{
  filter:alpha(opacity=100);
}
.opaque:hover ~ .fond{
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=0.30);
}
</style>
<![endif]-->
</head>
<body>
<div id="conteneur">
  <img class="opaque" src="http://javascript.developpez.com/faq/javascript/images/javascript-faq.gif">
  <img class="opaque" src="http://css.developpez.com/faq/images/faq-css.gif">
  <img class="opaque" src="http://xhtml.developpez.com/faq/images/faq-xhtml.gif">
  <img class="opaque" src="http://javascript.developpez.com/faq/javascript/images/javascript-faq.gif">
  <!-- l'image de fond en dernier -->
  <img class="fond" src="http://www.bourgnon.net/images/forum_javascript/image_de_base.png" alt="logo">
</div>
</body>
</html>

13/06/2013, 21h45
Corbou65

Merci beaucoup
Un immense merci à SylvainPV et à NoSmoking pour leur réponse à ma demande. :lol:
- Le premier pour m'avoir fait connaître un éditeur en ligne très utile, et pour le développement proposé.
- Le second pour m'avoir fourni exactement le code que je cherchais depuis plusieurs jours ! Tout fonctionne à merveille avec 30 photos : rapidité et précision, c'est vraiment parfait !
Ce forum est vraiment exceptionnel et suivi par de véritables pros !

MERCI BEAUCOUP LES CHEFS !!!! :ccool:

code à insérer dans un site construit en Wordpress

Effectivement, le code proposé fonctionne merveilleusement bien sur une page html simple.

Mais en essayant de l'introduire dans un site monté en wordpress, je constate qu'il y a plusieurs problèmes d'affichage. :calim2:

Voici tout d'abord le code complet utilisé dans la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>:hover style MAP</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
}
#conteneur{
  position:relative;
  margin:5em auto;
  width:589px;
  height:700px;
  overflow:hidden;
  cursor: pointer;
}
img{
  display:block;
}
.fond{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
}
.opaque{
  position:relative;
  float:left;
  width:115px;
  height:115px;
  border:1px solid #DDF;
  opacity:0.0;
  z-index:10;
}
.opaque:hover{
  opacity:1;
}
.opaque:hover ~ .fond{
  opacity:0.3;
  -webkit-filter: grayscale(1);
     -moz-filter: grayscale(1);
      -ms-filter: grayscale(1);
       -o-filter: grayscale(1);
          filter: grayscale(1);
}
 
</style>
<!--[if lt IE 9]>
<style>
.opaque{
  filter:alpha(opacity=0);
}
.opaque:hover{
  filter:alpha(opacity=100);
}
.opaque:hover ~ .fond{
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=0.30);
}
</style>
<![endif]-->
</head>
<body>
<div id="conteneur">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/seb.png" alt="Sebastien - tromprette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/dom.png" alt="Dominique - tromprette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/flo.png" alt="Florian - grosse caisse">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/tophe.png" alt="Christophe - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/damien_w.png" alt="Damien - souzaphone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/vero.png" alt="Véronique - trompette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/claude.png" alt="Claude - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/cyrille.png" alt="Cyrille - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/karin.png" alt="Karin - tromprette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/heidi.png" alt="Heidi - tromprette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/greg.png" alt="Gregoire - granit">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/sylvie.png" alt="Sylvie - trompette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/norbi.png" alt="Norbert - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/pinto.png" alt="Augusto - grosse caisse">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/steph_c.png" alt="Stéphanie C - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/nicolas.png" alt="Nicolas - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/corinne.png" alt="Corinne - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/steph_j.png" alt="Stéphanie J - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/john.png" alt="Jonathan - batterie">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/damien_t.png" alt="Damien T - percu">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/fabrice_j.png" alt="Fabrice J - batterie">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/lionel.png" alt="Lionel - trombone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/dany.png" alt="Dany - granit">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/armo.png" alt="Armonie - batterie">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/fabrice_l.png" alt="Fabrice L - tromprette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/valerie.png" alt="Valérie - lyre">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/alex.png" alt="Alexandra - trompette">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/david.png" alt="David - porte-drapeau">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/thierry.png" alt="Thierry - sousaphone">
  <img class="opaque" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/emilie.png" alt="Emilie - grosse caisse">
 
  <!-- l'image de fond en dernier -->
  <img class="fond" src="http://www.tripet-clique.ch/wp/wp-content/gallery/portraits_trombi/trombinoscope.png" alt="les membres">
</div>
</body>
</html>

et voici l'adresse de l'article sur lequel j'ai publié ce code :
http://www.tripet-clique.ch/wp/?p=790

Les problèmes qui apparaissent lorsque je publie l'article :

Je ne sais pas si le code CSS de mon site pose un problème avec le code CSS intégré dans la page désirée.
une partie du début du code disparaît (parfois, mais pas à tous les coups) lorsque je publie l'article, le visualise et qu'ensuite je retourne dans l'article pour le modifier, il s'agit des éléments suivants
Code:

1 2 3 <!DOCTYPE html> <html lang="fr"> <head>
parfois la page s'affiche simplement avec les vignettes au début, les unes sous les autres et l'image de fond tout en dessous. Parfois, l'image de fond est visible, mais lorsque l'on fait un survol sur les images, les vignettes se décalent légèrement de haut en bas lorsque l'on passe de gauche à droite.
j'ai ajouté un "alt" de manière à ce que l'on puisse connaître le nom du membre en même temps qu'on survole sa photo, mais cela n'apparaît pas.

Merci d'avance de bien vouloir m'aiguiller dans cette démarche.

15/06/2013, 13h47
Invité

Bonjour,
je ne vois pas le trombinoscope dans le lien fourni... Et pour cause : il faut un mot de passe !
Crée un membre "test", et donne-nous le mot de passe (que tu supprimeras plus tard)

Par contre, le code html donné fonctionne très bien "à part".

N.B. l'attribut alt="..." sert d'"alternative" quand l'image n'est pas trouvée.
Pour que le nom s'affiche au survol, il faut ajouter l'attribut title="..."
15/06/2013, 13h54
Corbou65

mot de passe

Désolée,

J'ai posté ce message avant d'avoir ôté le mot de passe.
Erreur que je viens de corriger.
Le lien est directement en ligne.

Merci déjà pour l'information précédente à propos du titre de l'image.
15/06/2013, 14h05
Invité
OK, vu.

Enlève tous les <br /> ! (et le </p> en trop)
Et :
- remet les attribut alt="" (même vides)
- ajoute / en fin de balise : <img ... />
Code:

1 2 <img class="opaque" src="..." title="..." alt="" /><br />
15/06/2013, 14h19
Corbou65

En réalité, le code que je copie dans l'article est "propre" au départ,
pas de <br> pas de <p> ... Est-ce que le fait de copier-coller le code dans l'article et le publier rajoute automatiquement ces éléments ? En tous les cas, lorsque j'édite l'article, ils n'y apparaissent pas.

Je viens de faire le changement proposé :
- ajouter alt="" à chaque image
- ajouter </img> derrière chaque image
- ajouter title="..." à chaque image (mais je ne vois pas d'affichage au survol)

Mais je ne vois pas de différence pour l'instant...

Comme l'affichage se décale, que dois-je changer avec [BORDER] ?
15/06/2013, 14h27
Invité

Bon. Ce n'est pas le border CSS qui pose problème, mais plutôt le "manque de rigueur" dans l'assemblage de l'image de fond !
Les cases ne font pas toutes rigoureusement 120px de coté.
(notamment celles de la 1ère ligne, pas assez hautes)

Les photos, elles font : (1+118+1)x(1+118+1)px => 120x120px (avec les bordures).
Ce doit être aussi le cas de chaque case de l'image de fond.

Ton image de fond devrait donc faire (ET le div #conteneur aussi !) :
- 5 images x 120px = 600px de large
- 6 images x 120px = 720px de haut

Concernant l'inclusion du code dans l'article :
=> mets toutes les <img ... /><img ... /> bout-à-bout (sans passage à la ligne)
15/06/2013, 14h36
Corbou65

YESSSS .... merci pour l'indication de mise bout à bout les différentes images,
ça fonctionne très bien !

En effet, j'ai pu manquer de rigueur dans la conception des images et de l'image de fond, mais dans l'ensemble, c'est maintenant assez correct.

Par contre, l'affichage du titre de l'image ne se fait pas encore, ai-je fait une erreur encore à ce niveau-là ?

En tous les cas, merci d'avance pour les indications, c'est top !
15/06/2013, 15h13
Invité

Non, le nom s'affiche bien. (il faut laisser le curseur dessus 1 seconde mini)

N.B. tu corrigeras les titres des images : "tromprette"
17/06/2013, 13h27
Corbou65

Un immense merci JREAUX pour le fameux coup de pouce, c'est extra et cela fonctionne à merveille !!!! :ccool::);)

J'ai une toute dernière petite question...

J'aimerais savoir comme je peux faire en sorte que l'ensemble de l'image soit affichée plus haut dans l'article, mais comme je ne connais pas tous les codes utilisés que l'on m'a proposé, je ne voudrais pas faire de bêtise. Y a-t-il quelque chose qui le permette ?

Merci d'avance
17/06/2013, 13h37
Invité
Bonjour,
quel code as-tu inseré dans le contenu de l'article, précisément ?

Car en affichant le code source, on voit des balises <p>...</p> en trop dans le code.

=> je te conseille de remettre le contenu, SANS AUCUN passage à la ligne entre les balises.

Inutile aussi d'y mettre :
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8" />

N.B. Petite modif. pour répondre à ta question :
Code:

1 2 3 #conteneur { margin: 5em auto; -> margin: 0 auto; }
17/06/2013, 14h09
NoSmoking

J'en profiterais pour mettre un margin: 0 auto; sur la DIV <div id="main">, afin de center la page à l'écran ;)
17/06/2013, 14h45
Corbou65

MERCI BEAUCOUP

Voilà un fameux coup de pouce pour la débutante que je suis !!!!

MILLE MERCI A CEUX QUI SONT INTERVENUS ICI POUR M'AIDER !
et bonne continuation à tout le monde

PS : c'est la toute première fois que j'ai une réponse à la fois rapide et complète sur un forum, bravo ! :ccool::ccool::ccool: