Zones cliquable avec gallery

Version imprimable

Bonjour,

Je voudrais faire une gallery faisant apparaitre des images qui contiennent des zone de surbrillance quand on passe dessus.

Voici un schéma de l'interface :
http://img546.imageshack.us/img546/7387/site2et.jpg

J'arrive à faire les zones de surbrillance grâce à
Code:

1 2 3 <img usemap="#mamap" src="image/image.jpg" alt="Image" name="mamap" /> <map name="mamap"> <area shape="rect" coords="122,150,358,194" title="xxx" href="xxx"onMouseOver= "mamap.src='ton image'" onMouseOut ="mamap.src='ton autre image'" >
Et j'arrive aussi à faire une gallery grâce au tuto trouvé sur internet.

Le problème c'est que je n'arrive pas à faire les 2 en même temps !
En effet, je ne vois pas trop ou mettre mes area shape avec mon code html qui permet de faire la gallery

Code:

<a href="image3/ScreenHunter_167.JPG" title="Titre de la photo 2"><img src="image3/ScreenHunter_167mini.JPG" alt="Le titre de la photo 2" /></a>

Avez vous une idée de comment procéder ?

Merci

15/05/2013, 19h07
NoSmoking

Bonjour,
tu ne peux pas faire cela en HTML/CSS pur, il y a une incompatibilité entre le mouseover/out de tes vignettes et le mouseover/out sur la grande image, il va te falloir avoir recours au javascript pour gérer cela.

A la réflexion, il existe peut être une solution mais en mettant une structure type menu en place, à voir si tu as le temps.

[EDIT]
j'ai retrouvé cela :fleche: http://www.developpez.net/forums/d13...ement-du-menu/, exemple en #7
16/05/2013, 09h23
syls9

Bonjour,

Je ne vois pas trop comment mettre les area shape avec ton exemple.
As tu une idée ?
Sinon comment faire en Javascript ?

Merci encore

Voici une variante adaptée rapidement de l'exemple donné...

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
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Show div sur :hover</title>
<meta name="Author" content="NoSmoking">
<style>
html,body {
  font-size:100%;
  font-family:Verdana,Arial;
}
#conteneur {
  position:relative;
  font-size:0.8em;
  border:1px solid #E0E0E0;
  width:60em;
  height:40em;
  margin:auto;
}
#titre{
  width:50em;
  margin:1em auto;
  color:#069;
}
#titre img{
  vertical-align:middle;
}
#div_nav {
  margin:auto;
  width:40em;
}
#div_article {
  margin:2em auto;
  width:40em;
}
#ul_menu {
  position:relative;
  width:100%;
  padding:0;
  margin:0;
  list-style:none  ;
/*  height:2em;/**/
  background-color:#E1E4F2;
  border:1px solid #4488BB;
}
#ul_menu li {
/*  display:inline-block;/**/
/*  float:left;/**/
/*  min-width:8em;/**/
  width:8em;
  line-height:2em;
  min-height:10em;
  font-weight:bold;
  cursor:pointer;
}
#ul_menu li div {
  position:absolute;
  left:8em;
  top:0;
  right:0;
  bottom:0;
  padding:1em;
  display:none;
  color:#000;
  font-weight:normal;
  text-align:left;
  line-height:1.5em;
  border:1px solid #CCC;
  background-color:#FAFAFE;
}
#ul_menu li:hover div {
  display:block;
}
#ul_menu li:hover {
  color:#FFF;
  background-color: #006699;
}
</style>
</head>
<body>
<div id="conteneur">
  <div id="titre">
    <h2><img alt="Developpez.com" src="http://www.developpez.com/public/images/logo-dev-150x75.gif">
    CSS Show Div sur :hover</h2>
  </div>
  <div id="div_nav">
    <ul id="ul_menu">
      <li>Menu #1
        <div>
          <p><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_outils_Web.gif"></p>
        </div>
      </li>
      <li>Menu #2
        <div>
          <p><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_toutes_les_faq_Web.gif"></p>
        </div>
      </li>
      <li>Menu #3
        <div>
          <p><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif"></p>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>