Rendre une image en fond d'écran cliquable

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par enzoko, 29 Juin 2010.

  1. enzoko
    enzoko Nouveau WRInaute
    Inscrit:
    6 Mai 2009
    Messages:
    48
    J'aime reçus:
    0
    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
     
  2. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    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 ?
     
  3. enzoko
    enzoko Nouveau WRInaute
    Inscrit:
    6 Mai 2009
    Messages:
    48
    J'aime reçus:
    0
    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
     
  4. frez
    frez WRInaute occasionnel
    Inscrit:
    22 Janvier 2008
    Messages:
    319
    J'aime reçus:
    0
    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.
     
  5. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    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:
     
  6. frez
    frez WRInaute occasionnel
    Inscrit:
    22 Janvier 2008
    Messages:
    319
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    Oui un effet visuel c'est malin très malin!!!!!!! [​IMG]
     
  7. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    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:
     
  8. frez
    frez WRInaute occasionnel
    Inscrit:
    22 Janvier 2008
    Messages:
    319
    J'aime reçus:
    0
    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... :?
     
  9. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    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:
     
  10. celibataire
    celibataire Nouveau WRInaute
    Inscrit:
    5 Février 2010
    Messages:
    44
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    Deezer.com fait ca très bien. Tout le background est cliquable.
     
  11. photoscope
    photoscope Nouveau WRInaute
    Inscrit:
    18 Décembre 2004
    Messages:
    46
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    En fait, cela se fait avec de l'ajax.
     
  12. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Re: Rendre une image en fond d'écrand cliquable

    ???
    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.
     
  13. photoscope
    photoscope Nouveau WRInaute
    Inscrit:
    18 Décembre 2004
    Messages:
    46
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    jquery est ton ami.
     
  14. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    jquery = javascript
    ajax = Asynchronous JavaScript and XML

    et effectivement, bien vu pour deezer :wink:
     
  15. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Re: Rendre une image en fond d'écrand cliquable

    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).
     
  16. seebz
    seebz WRInaute impliqué
    Inscrit:
    15 Avril 2007
    Messages:
    722
    J'aime reçus:
    0
    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 ;)
     
  17. photoscope
    photoscope Nouveau WRInaute
    Inscrit:
    18 Décembre 2004
    Messages:
    46
    J'aime reçus:
    0
    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.
     
  18. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    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.
     
  19. seebz
    seebz WRInaute impliqué
    Inscrit:
    15 Avril 2007
    Messages:
    722
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    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 ? :p
     
  20. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    je crois bien que dans ce cas là.. tout deviens clicable.. contenu compris..
     
  21. Haroeris
    Haroeris WRInaute impliqué
    Inscrit:
    13 Avril 2010
    Messages:
    649
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    suffit de mettre un évènement javascript onclick qui ouvre une page sur le div général.
     
  22. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    et tout ce qui sera contenu dans ce div (c'est à dire tout) deviendra clicable :wink:
     
  23. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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.
     
  24. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Re: Rendre une image en fond d'écrand cliquable

    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.
     
  25. seebz
    seebz WRInaute impliqué
    Inscrit:
    15 Avril 2007
    Messages:
    722
    J'aime reçus:
    0
    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;
    	};
    };
     
  26. photoscope
    photoscope Nouveau WRInaute
    Inscrit:
    18 Décembre 2004
    Messages:
    46
    J'aime reçus:
    0
    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...
     
  27. SpeedAirMan
    SpeedAirMan WRInaute passionné
    Inscrit:
    2 Juin 2007
    Messages:
    2 373
    J'aime reçus:
    1
    Re: Rendre une image en fond d'écrand cliquable

    Ou plutôt l'inverse :mrgreen:


    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.
     
  28. seebz
    seebz WRInaute impliqué
    Inscrit:
    15 Avril 2007
    Messages:
    722
    J'aime reçus:
    0
    Re: Rendre une image en fond d'écrand cliquable

    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:
     
  29. Haroeris
    Haroeris WRInaute impliqué
    Inscrit:
    13 Avril 2010
    Messages:
    649
    J'aime reçus:
    0
    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.
     
  30. mitchum
    mitchum WRInaute discret
    Inscrit:
    18 Février 2004
    Messages:
    248
    J'aime reçus:
    0
    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.
     
  31. enzoko
    enzoko Nouveau WRInaute
    Inscrit:
    6 Mai 2009
    Messages:
    48
    J'aime reçus:
    0
    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/
     
  32. skyll
    skyll WRInaute passionné
    Inscrit:
    14 Octobre 2005
    Messages:
    1 085
    J'aime reçus:
    0
    ben... c'est du javascript....
     
  33. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    Re: Rendre une image en fond d'écrand cliquable

    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
     
  34. enzoko
    enzoko Nouveau WRInaute
    Inscrit:
    6 Mai 2009
    Messages:
    48
    J'aime reçus:
    0
    Le code je dois le mettre dans le css ?
     
  35. enzoko
    enzoko Nouveau WRInaute
    Inscrit:
    6 Mai 2009
    Messages:
    48
    J'aime reçus:
    0
    Up svp

    Ou dois je mettre le code ?

    J'ai essayé de le mettre dans le css mais ça ne marche pas
     
Chargement...
Similar Threads - Rendre image fond Forum Date
Peut-on prendre les images de Youtube ? YouTube, Google Images et Google Maps 20 Mai 2014
c'est utile de laisser les internautres prendre mes images ? Débuter en référencement 29 Février 2008
rendre une image cliquable Débuter en référencement 9 Novembre 2006
ne pas rendre indexable les images par les robots.. comment? Crawl et indexation Google, sitemaps 5 Janvier 2003
Comment apprendre la rédaction de contenu ? Rédaction web et référencement 10 Août 2022
Prendre en compte mots-clef Débuter en référencement 3 Août 2022
Comment rendre un site responsive ? Rédaction web et référencement 23 Décembre 2021
J'ai besoin de quoi pour rendre mon site plus visible Débuter en référencement 27 Juillet 2021
Apprendre à utiliser Google Ad Manager simplement Monétisation d'un site web 4 Juillet 2021
M'aider à comprendre... Demandes d'avis et de conseils sur vos sites 16 Juin 2021
Linkedin - rendre visible la page entreprise uniquement Autres réseaux sociaux 31 Mars 2021
Besoin de conseils pour rendre un site web plus attractif Débuter en référencement 16 Septembre 2020
Personne n'est parfait, des avis bons à prendre concernant mon site ? Demandes d'avis et de conseils sur vos sites 27 Juillet 2020
Reprendre le contrôle de ses contenus : faire une zone privée Débuter en référencement 12 Avril 2020
Il faut arrêter de se prendre la tête Référencement Google 10 Janvier 2020
Comment forcer Google à prendre en compte Title et Meta Description Référencement Google 23 Décembre 2019
Ne prendre qu'une partie d'un QueryString dans une regex RewriteCond URL Rewriting et .htaccess 9 Décembre 2019
Ne pas rendre crawlable le menu ? Référencement Google 15 Septembre 2019
Besoin d'aide pour comprendre mon Analyse Dareboost Débuter en référencement 24 Août 2019
Comment Google peut prendre un compte des liens aussi pourris.... Netlinking, backlinks, liens et redirections 9 Août 2019