Rendre une image en fond d'écran cliquable

enzoko · 29 Juin 2010

Bonjour,

J'ai une image en fond d'écran et j'aimerais la rendre cliquable

Dans mon css j'ai le code suivant

Code:

body {
  position: relative; /* Fixes browser resizing bug in IE6 */
  margin: 0 auto 10px auto;
  width: 950px;
  font-family: Trebuchet MS, sans-serif;
  text-align: center; /* IE Centering Technique */
  background: #000000 url(images/bgbody.jpg) repeat-x top left; 
  }

Je sais qu'il faut modifier cette ligne

Code:

background: #000000 url(images/bgbody.jpg) repeat-x top left;

mais je ne sais pas ce qu'il faut ajouter

En gros quand les gens cliquent sur l'image en fond d'écran j'aimerais que l'image soit cliquable

Merci d'avance

skyll · 29 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

ben... je pense pas que ce soit possible...
tu peut placer un lien sur une div, ou sur une image directement, mais pas sur un background.
il va falloir procéder autrement.
tu as une idée de ce que tu souhaites faire ? tu as vu un exemple quelque part ?

enzoko · 29 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Salut,

merci pour la rapidité

Une idée ? Bah tout simplement comme je l'ai expliqué rendre l'image en fond d'écran cliquable

Comment ça procédé autrement ? Si c'est possible ça me derange pas

Jsuis pas trop codage donc ...

Pour un exemple j'ai vu celui la http://www.blogbang.com/

quand je clik sur l'image en fond d'écran ça m'envoie sur le site de Shrek si jamais ça peut t'aider ...

merci encore

frez · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

En fait sur blogbang ca semble être une div vide combinée à une image d'arrière plan.

Code:

<a href="http://www.lien.com" title="titre lien">
<div style="width: 100%; height: 200px;"></div>
</a>

Tu mets ton image d'arrière plan dans ton css puis tu crées tout en haut de ta page un lien avec une div et ca devrait fonctionner comme dans l'exemple de code ci-avant.

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

sur ce site en fait, c'est juste le bandeau du haut qui est cliquable...
comme un rectangle... l' "habillage" est un effet visuel :mrgreen:

frez · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Oui un effet visuel c'est malin très malin!!!!!!!

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

après, avec du CSS, tu peut gruger un peu et "rendre clicable le background" en placant :
=> le bandeau du haut comme sur ce site
=> un bandeau vertical à gauche clicable et assortit au bandeau du haut
=> ton contenu
=> un bandeau vertical à droite clicable et assortit au bandeau du haut
:mrgreen:

bon courage :wink:

frez · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Ben non ! je viens de lui dire comment faire et toi tu l'embrouilles avec un truc plus dur... :?

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

oui, mais ta méthode ne gère que le bandeau du haut (comme la première que j'avais donnée :wink: )
celle ci permet le clic sur toute la surface "visible"
soit : le bandeau du haut + gauche et droite :wink:

celibataire · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Deezer.com fait ca très bien. Tout le background est cliquable.

photoscope · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

En fait, cela se fait avec de l'ajax.

SpeedAirMan · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

photoscope a dit:
En fait, cela se fait avec de l'ajax.

???
Je serai curieux de voir ça... (assez perplexe).

Avec du JavaScript, ça je suis d'accord, c'est sûr, ça ne m'étonnerai pas. Mais Ajax... je vois pas l'intérêt.

photoscope · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

jquery est ton ami.

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

jquery = javascript
ajax = Asynchronous JavaScript and XML

et effectivement, bien vu pour deezer :wink:

SpeedAirMan · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

photoscope a dit:
jquery est ton ami.

Hmm... oui, jQuery est mon ami. Un framework que j'apprécie bcp et que j'utilise.

jQuery est un Framework JavaScript qui permet, entre autre, d'utiliser Ajax.

Mais Ajax c'est fait pour faire des requêtes externes sans avoir à recharger la page. Je vois pas l'utilité là (mais je me trompe peut être).
Il ne fait aucun doute pour moi que dans ce cas là, JavaScript est utile (voire indispensable si on veut garder un code HTML propre), mais Ajax n'a rien à voir.

Si je me trompe, n'hésite pas à m'expliquer en quoi XML HTTP Request peut être utile dans ce cas là (car je vois pas).

seebz · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

et pourquoi pas :

Code:

body.onclick = function(){ window.location = 'https://www.google.fr/'; };

pas besoin de charger la grosse artillerie pour si peu hein

photoscope · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Non tu ne te trompes pas. Autant pour moi. Dans ce cas précis, le javascript se suffit à lui même.

SpeedAirMan · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Merci Sébastien !

J'avais pensé à un snippet de ce genre, mais, sans avoir testé, je me pose la question : est-ce que TOUS les éléments contenus dans la page (et donc dans <body>) vont être cliquables et diriger vers l'url ?
ça peut poser problème dans ce cas.

Il faudrait rajouter une exception disant "excepté les clics situés dans la zone #container", qq chose du genre.

seebz · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

SpeedAirMan a dit:
Merci Sébastien !

J'avais pensé à un snippet de ce genre, mais, sans avoir testé, je me pose la question : est-ce que TOUS les éléments contenus dans la page (et donc dans <body>) vont être cliquables et diriger vers l'url ?
ça peut poser problème dans ce cas.

Il faudrait rajouter une exception disant "excepté les clics situés dans la zone #container", qq chose du genre.

Normalement les autres éléments ne devrait pas réagir à ce code mais maintenant que tu en parles, je dois avouer avoir un doute :?
Le plus simple serait de tester, tu nous dis ce qu'il en est enzoko ?

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

je crois bien que dans ce cas là.. tout deviens clicable.. contenu compris..

Haroeris · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

enzoko a dit:
Bonjour,

J'ai une image en fond d'écran et j'aimerais la rendre cliquable

En gros quand les gens cliquent sur l'image en fond d'écran j'aimerais que l'image soit cliquable

Merci d'avance

suffit de mettre un évènement javascript onclick qui ouvre une page sur le div général.

skyll · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Haroeris a dit:
suffit de mettre un évènement javascript onclick qui ouvre une page sur le div général.

et tout ce qui sera contenu dans ce div (c'est à dire tout) deviendra clicable :wink:

zeb · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

il y a une solution simple et propre ne faisant pas appel a ajax ou javascript.

les éléments d'une page sont comme des couches qui se superposent, donc il suffit de mettre un lien juste après l'ouverture du body et de le styler en css pour le rendre pleine page.

Naturellement il sera situé sous les autres éléments de la page et donc ne sera clicable que sur les zones découvertes.

Pour ce lien un CSS du genre width: 100%; height: 100%; display: block; position: fixed; devrait suffire.

SpeedAirMan · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

zeb a dit:
Naturellement il sera situé sous les autres éléments de la page et donc ne sera clicable que sur les zones découvertes.

J'en doute (mais à tester).

Par contre avec ta technique la page ne sera absolument pas valide W3C (l'élément a (anchor) étant de type inline et non de type block). L'élément A ne devrait pas contenir d'éléments blocks à l'intérieur. Certes, le CSS permet de changer ça, mais la page ne passera pas la validation et il se pourrait que la page pose problème sous certains navigateurs.

Perso, je préfère encore prendre une solution JavaScript.

seebz · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

J'ai fais mon p'tit test.
Effectivement, l'événement est bien transmis de l'enfant vers le parent.

Il faut donc le stopper, cela peut se faire de cette facon (#mainDiv étant le div principal) :

Code:

window.onload = function(){
	document.body.onclick = function(e){
		alert('click');
	};
	document.getElementById('mainDiv').onclick = function(e){
		if(!e) e = window.event;
		e.returnValue = false;
		e.cancelBubble = true;
		return false;
	};
};

photoscope · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

N'oublie pas de transformer le pointeur de ta souris en main sur la zone clicable, histoire que le visiteur comprenne qu'il peut cliquer...

SpeedAirMan · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

seebz a dit:
J'ai fais mon p'tit test.
Effectivement, l'événement est bien transmis de l'enfant vers le parent.

Ou plutôt l'inverse :mrgreen:

photoscope a dit:
N'oublie pas de transformer le pointeur de ta souris en main sur la zone clicable, histoire que le visiteur comprenne qu'il peut cliquer...

Yep, bien vu !
De préférence via JavaScript (ou JavaScript + CSS via l'ajout d'une classe, mais pitet' pas nécessaire), car si l'utilisateur a JavaScript désactivé, il ne comprendra pas qu'en cliquant sur la zone normalement cliquable il ne se passe rien.

seebz · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

SpeedAirMan a dit:
seebz a dit:

J'ai fais mon p'tit test.
Effectivement, l'événement est bien transmis de l'enfant vers le parent.

Cliquez pour agrandir...

Ou plutôt l'inverse :mrgreen:

Je voulais dire que l'événement "click" effectué sur le div enfant (enfant de body) a été transmis au parent (élément parent du div; le body quoi). :mrgreen:
Le parent du div enfant de body étant le "body", c'est pourtant clair non :lol:

Haroeris · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

ah bien vue ...

Alors il suffirait de sortir notre div image du flux en le positionnant en absolut, et faire en sorte que tout le reste passe au dessu.

mitchum · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

Perso moi j'utilise ce script :

Code:

   var largeur_div_milieu = 980;
    var marge = 5;
    var mouseX;
    var status;

    function checkScrollBar(){
      if(document.documentElement.scrollHeight != window.innerHeight)
        return 16
      else
        return 0
    }

    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;
    }

    function getMouseX(event){
        var e = event || window.event;
        return e.clientX;
    }

    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()){
        	document.body.style.cursor = 'pointer';
        }
        else{
          document.body.style.cursor = 'auto';
         }
    };

avec sur ma balise body :

Code:

<body onclick="if(verifyMouseX()){window.open(\'https://www.google.fr\');}">

en specifiant la taille du div "central" (ici 980) avec une marge de 5 px, l'habillage du site est cliquable (avec pointeur en forme de main)
ca fonctionne pas mal, et ne ralenti pas vraiment le site.

enzoko · 30 Juin 2010

Re,

Merci pour toutes vos réponses !

En effet Deezer fais exactement ce que je voulais mais moi je ne veux pas passer par le javascript ou ajax.

Donc dois-je utiliser le code de seebz

Code:

window.onload = function(){
   document.body.onclick = function(e){
      alert('click');
   };
   document.getElementById('mainDiv').onclick = function(e){
      if(!e) e = window.event;
      e.returnValue = false;
      e.cancelBubble = true;
      return false;
   };
};

Code:

<body onclick="if(verifyMouseX()){window.open(\'https://www.google.fr\');}">

ou alors celui de mitchum

Code:

 var largeur_div_milieu = 980;
    var marge = 5;
    var mouseX;
    var status;

    function checkScrollBar(){
      if(document.documentElement.scrollHeight != window.innerHeight)
        return 16
      else
        return 0
    }

    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;
    }

    function getMouseX(event){
        var e = event || window.event;
        return e.clientX;
    }

    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()){
           document.body.style.cursor = 'pointer';
        }
        else{
          document.body.style.cursor = 'auto';
         }
    };

Code:

<body onclick="if(verifyMouseX()){window.open(\'https://www.google.fr\');}">

?

Ou dois-je recopier ces codes ? Dans le css ?

Merci encore !

PS : si ça peut aider skyrock aussi le fait http://skyrock.com/

skyll · 30 Juin 2010

enzoko a dit:
En effet Deezer fais exactement ce que je voulais mais moi je ne veux pas passer par le javascript ou ajax.
Donc dois-je utiliser le code de seebz

ben... c'est du javascript....

zeb · 30 Juin 2010

Re: Rendre une image en fond d'écrand cliquable

SpeedAirMan a dit:
zeb a dit:

Naturellement il sera situé sous les autres éléments de la page et donc ne sera clicable que sur les zones découvertes.

Cliquez pour agrandir...

J'en doute (mais à tester).

Par contre avec ta technique la page ne sera absolument pas valide W3C (l'élément a (anchor) étant de type inline et non de type block). L'élément A ne devrait pas contenir d'éléments blocks à l'intérieur. Certes, le CSS permet de changer ça, mais la page ne passera pas la validation et il se pourrait que la page pose problème sous certains navigateurs.

Perso, je préfère encore prendre une solution JavaScript.

Utiliser une solution logicielle c'est prendre un bulldozer pour déplacer un escargot. Je suis désolé d'être un peu en contradiction avec ce propos mais il est très commun d'en faire trop et là c'est vraiment pas nécessaire.

solution simple et élégante en HTML valide

enzoko · 1 Juillet 2010

Le code je dois le mettre dans le css ?

enzoko · 5 Juillet 2010

Up svp

Ou dois je mettre le code ?

J'ai essayé de le mettre dans le css mais ça ne marche pas