Discussion :

[hellreaperdd]

Bonjour,

je souhaite rendre mon image de fond cliquable, voici le code que j'utilise :

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
<script type="text/javascript">
function clickBg(e) {
evt = e || window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // Safari bug
targ = targ.parentNode;
 
if (targ.id == 'body') {
window.open('http://google.com/');
}
 
</script>
 
<div class='hab-homepage' onclick="clickBg(event);" id="body"  style='cursor: crosshair' >
 
</div>

je vois bien mon cursor changer, mais rien ne se passe quand je clique dessus...

merci de votre aide!

[SpaceFrog]

j'ai pas compris pourquoi un simple window.open sur le onclick ne conviendrait pas ???

[gwyohm]

sinon, il te manque une accolade fermante en fin de fonction...

[hellreaperdd]

c'est une image qui est en arrière plan d'un site (pour de la pub), mais ça pourrais peut être faire l'affaire. site: http://dev.durable.47.kernix.biz/

Ps: je viens juste de mettre accolade fermante ... merci! mais sa bug toujours

[SpaceFrog]

si les éléments au dessus n'ont pas d'indication pour bloquer la propagation (cancelBubble, stopPropagation ou return false) le click devrait arriver jusqu'à l'element d'arrière plan.
Entendons nous bien on parle d'une balise image et pas d'un style background-image...

[hellreaperdd]

Ce que je voulais c'était que l'image qui est en background dans ma div hab-homepage soit cliquable mais seulement sur les cotés.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!--css: -->
 
.hab-homepage {background:white url('/app/durable/pix/Habillage_castorama.jpg') no-repeat top;}
 
<!--jai modifié mon javascripte:  -->
 
function clickBg() {
	newwindow=window.open('http://google.com/');
}
 
<div class='hab-homepage' onclick="clickBg()" style='cursor: crosshair; z-index:3;' >
</div>

le problème c'est que toute la page est clickable et pas juste les bords.

[SpaceFrog]

ha ben met un div au dessus (un peu plus petit) sur lequel tu stoppe la propagation

Code :

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

1
2
<div style="position:absolute;height:300; width:300; top:0; left:0;background-color:red" onclick="alert('touché')"></div>
<div style="position:absolute;height:200; width:200;top:50px; left:50px; border:solid 1px green;"></div>

[hellreaperdd]

Enfaite j'ai pas 'tout' le site qui est cliquable seulement la ou y'a du vide : http://dev.durable.47.kernix.biz/

dans ma div : <div class='hab-homepage' onclick="clickBg()" style='cursor: crosshair; z-index:3;' >
bla blab bla bla
</div>

y'a plein de div dedans, c'est entre les espaces que c'est cliquable.

[hellreaperdd]

c'est assez bizarre quand j'utilise tond code:

Code :

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

1
2
3
 
<div style="position:absolute;height:300; width:300; top:0; left:0;background-color:red" onclick="clickBg()"></div>
<div style="position:absolute;height:200; width:200;top:50px; left:50px; border:solid 10px green;background-color:blue "></div>

dans la zone rouge quand je click ça me redirige et quand je vais dans l'autre carré dans se carré je ne suis plus redirigé, donc normal!

mais dans mon site cela ne veux pas fonctionner... or il y a bien d'autre div dans la div hab-homepage.

[SpaceFrog]

les divs ne sont pas imbriquées dans mon code ...

[hellreaperdd]

ah bon??? Si tout est imbriquée je vois vraiment pas se que tu veux dire ...

[SpaceFrog]

mes divs ne sont pas l'une dans l'autre ..

Code :

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

1
2
3
4
<div style="position:absolute;height:300; width:300; top:0; left:0;background-color:red" onclick="clickBg()"></div>
 
 
<div style="position:absolute;height:200; width:200;top:50px; left:50px; border:solid 10px green;background-color:blue "></div>

[hellreaperdd]

je suis vraiment dsl j'en peut plus de cette connerie(je fatigue, je suis dessus depuis se matin)....

donc si je n'imbrique pas sa devrait marché si j'ai bien compris. Mais si je n'imbrique comment je fait pour que mon image elle devin tout écrase en haut.

PS: ce que je voulais faire c'etait comme: http://www.maison.com/ avec les pub sur le coté qui sont cliquable.

[hellreaperdd]

Bon j'ai peut être trouver quelque chose:

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
 
function doSomething(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
 
		if (targ.id !== 'top' & targ.id !== 'middle' & targ.id !== 'bottom') {
 
		alert('| targ.id : '+targ.id +' | window.event : '+ window.event +'| target :  '+ e.target +' | srcElement : '+e.srcElement);
		//newwindow=window.open('http://google.com/');
	}	
}
 
 
<div class='hab-homepage' onclick="doSomething(event)"  style='cursor: crosshair;' > 
<div id="top" onclick="doSomething(event)"> </div>
<div id="middle" onclick="doSomething(event)"> </div>
</div>

mais l'alert me sort la meme chose que je clique en haut ou sur le coté:
| targ.id : | window.event : undefined| target : [object HTMLSpanElement] | srcElement : undefined

[hellreaperdd]

Rebonjour a toi!

donc j'ai bien tester ton code

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
36
37
38
 
 
<div class='hab-homepage' onclick="doSomething>XX(event)"  style='cursor: crosshair;' > 
 
	test 1
<div style="position:absolute;height:300; width:300; top:100; left:0;background-color:red;cursor:cell;" onclick="clickBg()"   > test 2
<div style="position:absolute;height:200; width:200;top:50px; left:50px; border:solid 10px green;background-color:blue;cursor:progress; "> test 3</div>
 </div> test 4
 
	<div class="float-left-hab" onclick="clickBg()"> Pub 000111000111  <br> </div>
 
		<div class='float-right-hab' onclick="clickBg()"> Pub  111000111000111000111000<br>	</div> 
 
bla bla bla
 
</div>
 
 
 
.float-left-hab{
background-color:purple;
float:left;
height:100px;
margin-top:150px;
position:absolute;
width:227px;
}
 
 
.float-right-hab{
float:right;
position:absolute;
margin-left:1245px;
background-color:yellow;
height:100px;
margin-top:150px;
width:227px;
}

et puis sa marche! quand je clique dans la box rouge je suis rediriger, et idem pour la box verte. Le nouveau problème avec cette technique est que si j'agrandis les div pour quel se mettre sur les bord pour les rendes cliquable, elles bougent un peut n'importe comment.

merci de votre aide!

[hellreaperdd]

Bon j'en suis pas loin!!!

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
 
	function clic(outgoingLink){
				alert(outgoingLink);	
 
	 			machin = outgoingLink;
 
				if (outgoingLink == 'hab-homepage' && outgoingLink != 'top' ) {		 
 
						if (outgoingLink == 'top'){
						}
						else{
							alert('echo world TOP YAHOOOOOOOOOOOO!!!');
							}
					}
		}
 
<div class='hab-homepage' id='hab-homepage' style='cursor: crosshair;' onclick="clic(this.id);" > 
 
<div id="top" onclick="clic(this.id);"  > </div>
<div id="middle" onclick="clic(this.id);" > </div>
 
</div>

quand je clique dans ma box top j'ai deux alerte une avec seulement top et une avec hab-homepage, et je veux que la redirection se passe seulement quand je clique sur le coté et je n'y arrive pas HELP!!!

[AcidLines]

Bonjour à toi,

As tu penser à regarder du coter des balises <map> ?

Je ne sais pas trop comment cela marche mais il me semble que ces balises accompagnées de balises <area> permette de parcelliser ton image et ainsi tu pourra effectuer diverses opération selon les parties.

Par exemple :

Code :

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

1
2
3
4
5
6
 
<img src="tonimage.jpg" width="292" height="118" border="0" usemap="#Map"> 
    <map name="Map">
      <area shape="rect" coords="56,23,166,82" href="http://www.exemple.com">
      <area shape="rect" coords="25,89,39,106" href="http://wwwautre exemple.fr"> 
    </map>

Possible aussi si ton image se trouve dans des balises <body>

Ps : je crois que le mappage d'images est gérable en Css aussi.

En espérant t'avoir donné une piste