Comment rendre un arrière-plan cliquable?

On m'a demandé de créer un contexte sponsorisé (reprise de site) pour l'un de nos sites et la question s'est posée de savoir si je pouvais cliquer sur les logos de l'arrière-plan. Ma première pensée était «non», mais plus j'y pense, plus je pense que ce serait possible si j'utilisais JavaScript pour rendre l'élément corporel cliquable, ou que je fausse l'image d'arrière-plan comme couche ci-dessous le contenu et le rendre cliquable.Comment rendre un arrière-plan cliquable?

Quelqu'un at-il déjà fait cela avec succès avec l'une de ces approches ou une approche différente?

jQuery:

$('body').click()

HTML:

<body> 
    <div id="sponsors-div" style="position:fixed;z-index:0;"><a style="display:block;height:100%" href="http://sponsors.url"></a></div> 
    <div id="site-container" style="position:relative;z-index:1;">...

Source

2009-05-07 Steve Perks

Vous devez faire attention aux différences d'ordre d'événement (capture d'événement vs. bulles) entre IE et Mozilla. Si vous avez un élément avec un événement onClick qui occupe essentiellement la totalité de la page, puis d'autres éléments cliquables sur le dessus, cliquer sur l'un de ces éléments peut déclencher les deux événements, ce qui n'est probablement pas la fonctionnalité prévue.

PPK l'explique mieux que je peux.

Source

2009-05-07 13:50:28 Scottie

Pourquoi ne pas l'image d'arrière-plan dans une image cliquable, et lier un événement de clic à chaque zone:

$('#area51').click(function() {...

Source

2009-05-07 13:15:30 karim79

A L'événement click sur sponsors-div devrait fonctionner. Le mettre sur le corps peut affecter d'autres parties de la page (éléments enfants du corps).

Source

2009-05-07 13:17:39

Vous pouvez faire une balise d'ancrage très grand et forcer le corps à cacher le trop-plein, comme ceci:

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}

Gain d'inspiration de ce site: http://newline.dk/index.aspx

Source

2009-05-07 15:31:53 janhartmann

j'ai écrit une solution pour cela depuis que je n'a pas pu trouver un complet qui était cross-browser. Il est conçu pour héberger et afficher un fond de parrainage cliquable sur un réseau de sites.

Mettez ce code dans un fichier js et l'héberger sur un domaine central:

$(function() { 
//** change these values to your own 
var bg_ad_css = "url(http://cdn.my-domain.com/sponsor-bg.jpg) no-repeat center top #ffffff"; 
var bg_ad_url = "http://www.sponsor-website.com/"; 
//** 
var bg_ad_anchor = $(document.createElement("a")); 
bg_ad_anchor.css({ display: "block", position: "absolute", "z-index": 0, top: 0, left: 0, width: $(window).width(), height: $(window).height() }); 
bg_ad_anchor.attr("target", "_blank").attr("href", bg_ad_url); 
$(window).resize(function() { 
    if (bg_ad_anchor) { 
     bg_ad_anchor.css({ width: $(window).width(), height: $(window).height() }); 
    } 
}); 
if (window._bg_ad) { 
    for (var i = 0; i < _bg_ad.contentWrappers.length; i++) { 
     var element = _bg_ad.contentWrappers[i]; 
     $(element.selector).css({ position: "relative", "z-index": element.zIndex == undefined ? 1 : element.zIndex }); 
    } 
} 
$("body").css({ "background": bg_ad_css }).append(bg_ad_anchor);

});

utiliser ensuite comme si dans un ou plusieurs sites:

<script type="text/javascript"> 
    var _bg_ad = { 
     //These should be content areas that need to be above the banner link 
     //You may only need one element in this array, customize at will 
     contentWrappers: [{ selector: "#top_bar", zIndex: 2 }, { selector: "#wrapper" }, { selector: "#footerBottom" }] 
    }; 
</script> 
<script type="text/javascript" src="http://www.my-domain.com/js/bg-ad.js"></script>

Source

2012-11-01 22:04:34 Corgalore

Comment rendre un arrière-plan cliquable?

Répondre

Questions connexes