Image de fond cliquable

**marcandre** · 10/02/2011, 15h12

Bonjour à tous,

Je voudrais savoir comment peut-on rendre une image de fond cliquable mise dans une page web ?

Cordialement.

**RomainVALERI** · 10/02/2011, 15h44

La formulation de la question.... est spéciale.

Quoi qu'il en soit, si tu veux une image cliquable et que ce n'est pas une balise <img> mais plutôt un autre élément avec une image en background (si j'ai bien compris

), place un gestionnaire onclick sur l'élément dont l'image est en fond ^^

**marcandre** · 10/02/2011, 16h01

C'est exactement une image en background .

Comment peut-on fait ce genre de gestionnaire d'évènement ?

Merci .

**RomainVALERI** · 10/02/2011, 16h08

Admettons que l'élément en question (je suis obligé de supposer puisque tu ne nous as pas donné l'info

) soit une cellule de tableau, dont l'id est "idCellule" (ce n'est qu'un exemple, hein

ne l'appelle pas comme ça, s'il te plait

)

Tu peux faire :

Code javascript :

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

1
2
3
4
var el = document.getElementById("idCellule");
el.onclick = function() {
   // ici les actions à effectuer en cas de clic
}

**marcandre** · 10/02/2011, 16h19

Autant pour moi, j'ai omis de préciser que l'image était en background dans la balise body et que seul le la balise body est cliquable mise à part les autres éléments HTML qu'il y a à l'intérieur comme table, input ...

Merci pour ta réponse .

**NoSmoking** · 10/02/2011, 20h46

Bonsoir,
tu peux toujours mettre une DIV en position absolute, hors flux donc, que tu positionnes là ou tu le souhaites.

Code :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS zone cliquable sur background</title>
<head>
<style type="text/css">
html, body {
  margin : 0;
  padding : 0;
  background: url( image_fond.jpg);
  height : 100%;
}
#cliquable {
  position : absolute;               /* sort la DIV du flux */
  display : block;                   /* si pas une DIV */
  left : 100px;
  top  : 100px;
  width : 100px;
  height : 100px;
  border : 1px solid #e0e0e0;        /* uniquement pour visualisation */
}
#conteneur {
  margin : auto;
  width : 600px;
  height : 100%;
  border: 1px solid #e0e0e0;
}
</style>
</head>
<body>
<div id="cliquable" onclick="alert('cliquez n\'est pas jouez!');"></div>
<div id="conteneur">
</div>
</body>
</html>

tu pourras toujours jouer avec le z-index pour la placer au dessus du panier si nécessaire.

Image de fond cliquable

HTML

Discussions similaires

Partager

Partager