Redirect sur click de la background img

Version imprimable

Bonjour,

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

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!

18/02/2010, 15h00
SpaceFrog

j'ai pas compris pourquoi un simple window.open sur le onclick ne conviendrait pas ???
18/02/2010, 15h03
gwyohm

sinon, il te manque une accolade fermante en fin de fonction...
18/02/2010, 15h04
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
18/02/2010, 15h14
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...

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:

1 2 3 4 5 6 7 8 9 10 11 12 13  .hab-homepage {background:white url('/app/durable/pix/Habillage_castorama.jpg') no-repeat top;}  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.

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

Code:

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>

18/02/2010, 15h42
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.

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

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.

18/02/2010, 16h13
SpaceFrog

les divs ne sont pas imbriquées dans mon code ...
18/02/2010, 16h23
hellreaperdd

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

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

Code:

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>

18/02/2010, 17h12
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.

Bon j'ai peut être trouver quelque chose:

Code:

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

Rebonjour a toi!

donc j'ai bien tester ton code

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

Bon j'en suis pas loin!!!

Code:

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

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:

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