2009-05-07 26 views
3

私のサイトのスポンサードバックグラウンド(サイトの買収)を依頼されたので、タイル張りの背景でロゴをクリックできるようにすることができますか?バックグラウンドでクリック可能にするにはどうすればいいですか?

私の初期の考えは「いいえ」でしたが、もっと考えてみると、JavaScriptを使ってボディエレメントをクリック可能にしたり、背景画像を下のレイヤーとして偽ったりするとそのコンテンツをクリック可能にします

これらのアプローチのいずれかを成功させた人はいますか?

の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;">... 

答えて

3

IEとMozillaのイベントの順序(イベントキャプチャとバブリング)の違いに注意する必要があります。基本的にページ全体を占める要素を持つonClickイベントがあり、その上に他のクリック可能な要素がある場合、その要素の1つをクリックすると、両方のイベントが発生する可能性があります。

PPKは私よりも優れています。

0

イメージマップに背景画像を作成し、各エリアにクリックイベントをバインドしないのはなぜ:

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

A sponsors-divのclickイベントが機能するはずです。体に置くと、ページの他の部分(身体の子要素)に影響を与えることがあります。

0

あなたは非常に大規模なアンカータグを作成し、オーバーフローを隠すために身体を強制的に、このようなことができます。

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

ゲインこのサイトからいくつかのインスピレーション:http://newline.dk/index.aspx

0

私は私ので、このためのソリューションを書きましたブラウザ間の完全なものを見つけることができませんでした。これは、サイトのネットワークにわたってクリック可能なスポンサーの背景をホストして表示するように設計されています。

JSファイルにこのコードを入れて、中央のドメイン上でホスト:

$(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); 

})。

そして、その内の1つのまたは多くのウェブサイトのようにそれを使用します。

<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> 
関連する問題