Problème de background cliquable se mélangeant au site..

Bonjour à tous,

Voila je rencontre un petit problème, je souhaite créer un background cliquable entourant mon site, le souci est que tout le site devient cliquable...

Mon background est une image de 2133*1740 très légère tout le site.

Comme le site n'est pas en ligne j'ai réalisé un petit schéma:


La partie bleue correspond à mon image de fond et la partie blanche et noire correspond au site. le problème est donc que la partie bleue est cliquable (normale) mais que la partie blanche l'ait aussi (moins normal)


Du côté de mon image (partie bleue) sur l'index, voici le code:

<div id="bg" onclick="location.href='http://www.monsite.com';" target="_blank;" t style="cursor: pointer;">

Du côté du css:

#bg {
	background:#A2AAB7 url(../images/home_pics.jpg) no-repeat center top;

ce qui donne l'image de fond cliquable.

Du côté de la partie blanche voici le code :

div.wrapper {
	width: 999px;
	margin: 0 auto;
	padding: 0;
	color: #00000;

table#contentwrap {

	background-color: #fff;

Donc la partie blanche du site qui est le background du div devient cliquable aussi, ce qui est plutôt gênant donc je voudrais bien dissocier les deux afin que la partie blanche ne soit plus cliquable.

j'espère avoir été assez clair car ce n'est pas très évident à expliquer...

Merci d'avance pour votre aide

Salut morpheusreims,

En voilà une drole d'idée, un fond cliquable.. mais bon admettons

A froid je vois deux solution :

1. Jouer avec la propriété z-index. Par exemple, un div en fond avec ton background (comme tu as maintenant), puis un div par dessus (ton site), qui aura un z-index plus grand donc pas cliquable.

2. Créer 3 div l'un a coté de l'autre qui seront respectivement, la partie bleu à gauche de ton site, ton site à proprement parler, et la partie droite de ton site.

Voilà, j'espère que sa te donnera une piste pour faire se que tu souhaite
Modifié par Mikerob (19 Jan 2009 - 16:12)

Merci, je pense avoir compris en général, mais du coté du code j'ai un peu de mal...

Hello,

pour ce qui est du z-index la FAQ en parle.

Si trop de notions te sont inconnues reprendre du début : comment débuter et trouver l'information ? .

Merci bien, je viens de rentrer le z-index, mais le problème reste le meme la partie blanche est toujours cliquable

#bg {
	
	background:#A2AAB7 url(../images/home_CJE.jpg) center top;
	position: absolute
	z-index: 4;

table#contentwrap {

	background-color: #fff;
        z-index: 8;
	
}

Comme précisé dans la FAQ la propriété z-index ne peut fonctionner que sur un élément positionné : il manque donc (par exemple) position: relative; à table#contentwrap.

Mais de toute façon (et après quelques tests) ça ne semble pas fonctionner car le DIV #bg contient les autres éléments et du coup ils restent tous cliquables.

Donc je te suggère :

* soit de te baser sur le tuto Un design fluide avec trois «colonnes», grâce au positionnement flottant et de rendre les 2 colonnes externes cliquables.

* soit (mieux encore) de laisser tomber cette drôle d'idée de vouloir rendre le fond d'un site cliquable.

<HS>
Je vais peut-être pas aimer HTML5 ... avec ses href possibles partout et les abus qu'il va y avoir au moins au début
</HS>

@morpheusreims

Pourrais-tu nous expliquer le rôle de ce background cliquable que tu souhaites mettre en place ?

Bonsoir,

morpheusreims a écrit :
le problème est donc que la partie bleue est cliquable (normale) mais que la partie blanche l'ait aussi (moins normal)

Non, là le problème est que la partie bleue est cliquable, point. À quelle convention ergonomique ça correspond, un «fond perdu» cliquable de chaque côté du contenu? Ça m'a l'air d'être une belle erreur.

Quid de l'utilisateur qui laisse trainer le pointeur de la souris et clique par mégarde (ça arrive, si si), ou qui clique à côté d'un contenu qu'il visait (ça arrive aussi) et qui, au lieu d'obtenir pas d'action obtient retour à la page d'accueil?

Dans la solution simple serait: ne pas faire cette bêtise. Mais il nous manque peut-être des éléments?

Pour la technique pure: ce serait pas une histoire de propagation des évènements en JavaScript (event bubbling)? M'est avis que si. À tester (dans Firefox 3, ou Safari 3 ou Opera 10, pour que ça ressemble à quelque chose):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css" media="screen">
	body > div {
		display: table;
		padding: 100px;
		background: rgba(0,255,0,.6);
	}
	body > div > div {
		height: 200px;
		width: 200px;
		background: rgba(0,0,255,.6);
	}
	</style>
</head>
<body>

<div onclick="alert('2. Wololo')">
	<div onclick="alert('1. La la la')"></div>
</div>

</body>
</html>

Je crois bien qu'un tutoriel sur Alsacréations en parle.

(Mais je persiste et signe: ce fond cliquable est très probablement une mauvaise idée.)

Personnellement je ne trouve pas que ce soit une très mauvaise idée, ça dépend de ce qu'on en fait bien sûr!

Digitick utilise d'ailleurs cette technique pour mettre en avant des concerts particuliers.

J'ai pas vraiment regardé comment ils faisaient mais c'est tout à fait possible en prenant la position de la souris comme condition.

En gros, en prenant la largeur de l'écran et la largeur de la div centrale, on calcul la largeur des colonnes de gauche et de droite, et on vérifie par rapport à la position de la souris.

Pour reprendre l'exemple de Florent V.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">  
  <head>	     	     
    <title>Test     
    </title>	     
    <style type="text/css" >
      body {
      	margin:0;
      	color: white;
      	background: rgb(0,255,0);
    	}
	 
      #center {
        margin: 0 auto;
        height: 500px;
        width: 800px;
        background: rgb(0,0,255);
      } 	     
    </style>  
  </head>
<script type="text/javascript" >


    var largeur_div_milieu = 800; // largeur de la div centrale pour les calculs
    var marge = 5; // Marge entre le bleu et le vert pour eviter d'executer la fonction si on clique juste à la limite
    
    var mouseX;
    var status;
    
    
    // Permet de savoir si il y a une scrollbar dans firefox afin de savoir la largeur précise du site
    function checkScrollBar()
    {
      if(document.documentElement.scrollHeight != window.innerHeight)
        return 16
      else
        return 0
    }
    
    
    // Verifie si la position de la souris permet le clic
    function verifyMouseX()
    {
      if(mouseX<=((windowSize()-largeur_div_milieu)/2)-marge|| mouseX>=((windowSize()-largeur_div_milieu)/2)+largeur_div_milieu+marge)
        return true;
      else
        return false;
    }
    
    // Retoune la position X de la souris
    function getMouseX(event)
    {
        var e = event || window.event;
        return e.clientX;
    }

    // Retoune la taille de l'ecran
    function windowSize()
    {
     if (document.all)
      {
        return document.documentElement.clientWidth;
      }
      else
      {
        return window.innerWidth-checkScrollBar();
      }
    }
    
   
    document.onmousemove = function(event){
        var mouseInfo = document.getElementById('mouseInfo');
        mouseX = getMouseX(event);
        if(verifyMouseX())
          status = "<font color='green'>Cliquable</font>";
        else
          status = "<font color='red'>Non Cliquable</font>";
        mouseInfo.innerHTML = 'Position x: <b>'+mouseX + '</b> ' + status;
        
          
    };
</script>  
  <body onclick="if(verifyMouseX()){window.location.href='http://www.example.com/';}"> 	       
      <div id="center">
        <span id="mouseInfo"></span> 
        <script type="text/javascript" >
         document.write('<br/><br/>Gauche cliquable de <b>0 à ');
         document.write(((windowSize()-largeur_div_milieu)/2)-marge);
         document.write('</b><br/>Droite cliquable de <b>');
         document.write(((windowSize()-largeur_div_milieu)/2)+largeur_div_milieu+marge);
         document.write(' à '+ windowSize() +'</b> ');
        </script>     
      </div>  
  </body>
</html>

Excusez mon javascript


Ça fonctionne avec firefox ie6 ie7.
Modifié par lega (01 Feb 2009 - 22:03)

lega a écrit :
En gros, en prenant la largeur de l'écran et la largeur de la div centrale, on calcul la largeur des colonnes de gauche et de droite, et on vérifie par rapport à la position de la souris.

Ce ne serait pas plus simple et plus fiable de stopper la propagation de l'évènement lorsqu'il arrive sur le conteneur global (ton div#center ici)? Du moins si c'est bien possible (suis nul en gestion des évènements JS).