Image de fond cliquable

Version imprimable

10/02/2011, 15h12
marcandre

Image de fond cliquable

Bonjour à tous,

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

Cordialement.
10/02/2011, 15h44
RomainVALERI

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

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 :roll:), place un gestionnaire onclick sur l'élément dont l'image est en fond ^^
10/02/2011, 16h01
marcandre

C'est exactement une image en background .

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

Merci .
10/02/2011, 16h08
RomainVALERI
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 :roll: ne l'appelle pas comme ça, s'il te plait :aie:)

Tu peux faire :
Code:

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

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 .

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

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