Discussion :

[Corbou65]

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 !

[Corbou65]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SylvainPV]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
}

[Corbou65]

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.

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Corbou65]

Un immense merci à SylvainPV et à NoSmoking pour leur réponse à ma demande.

• 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 !!!!