Machen hintergrund anklickbar mit jquery

Bin ich starten Sie eine Anzeige auf meiner Website, die eine große hintergrund-Bild platziert werden, hinter die Website-Inhalte). Die Website ist decibelmagazine.com. Derzeit verfügt die Website über ein sehr großes Hintergrundbild, das wird ersetzt durch die ad. Ich brauche die Anzeige anklickbare Links und rechts neben dem Website-content). Die Anzeige als hintergrund-Bild (nicht inline).

Sagte, ich brauche dieses Hintergrundbild klickbar (mit einer zugewiesenen url). Ich dachte an die Strukturierung der es so:

HTML

<body url="http://google.com">

CSS

body{color:#222; background:#959595 url(images/mainbg.jpg) repeat-y center top; width:100%; display:table; width:970px; margin:0 auto;}

Jquery

$("body").click(
    function()
    {
        window.location = $(this).attr("url");
        return false;
    });

Wird diese Methode funktionieren? Ich möchte nicht den Inhalt der website angeklickt werden (obwohl es im inneren des Körpers). Sollte ich einen z-index, um dies zu verhindern? Gerade auf der Suche nach der beste Weg zu gehen über das hinzufügen einer Seite Haut (ad) da das markup auf decibelmagazine.com

Dank!

InformationsquelleAutor JCHASE11 | 2011-04-25

Diese Weise Sie dies tun können:

<body>
    <img class="ad" src="images/mainbg.jpg" alt="" rel="http://google.com" />
    <div class="contents">
     Contents here
    </div>
</body>

CSS:

img{position:absolute;display:block;top:0;left:0;z-index:1;}
div.contents{position:relative;z-index:1000;}

Javascript:

$("img.ad").click(function(e){
     window.location = $(this).attr("rel");   
});

Die demo: jsfiddle.net/naveed_ahmad/5e3Wa/1

InformationsquelleAutor Naveed Ahmad

Äh, Nein, Nein, Nein. Hinzufügen eines href auf Ihren Körper - schlechte Idee. Könnte man nicht so etwas tun?

CSS:

.clickspot { width: 20%; }
#content { width: 80%; }

HTML:

<body>
    <div class="clickspot"></div>
    <div id="content"></div>
    <div class="clickspot"></div>
</body>

JS:

$(".clickspot").click(function(){
    window.location = "http://link.to/my/advertiser";
});

Oder:

CSS

#clickable { position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; z-index: -1;  }
#content { position: relative; z-index: 1; }

$("#clickable").click(function(){
    window.location = "http://link.to/my/advertiser";
});

Man könnte auch wickeln Sie den "Inhalt" in der clickspot-tags, dann wird der Inhalt würde auch angeklickt werden.
Er will nicht der Inhalt anklickbar.

InformationsquelleAutor mattsven

0

Ich denke, der bessere Weg wäre ein container hinter dem Inhalt (mit position: und z-index:) und machen , dass div anklickbar. Das problem, das Sie gehen zu laufen ist, dass wenn Sie $(body).click() wirst du jeder klicken, um die Blase bis zum Körper (es sei denn, Sie zwingen alles zu verwenden .stopPropagation() wird ein Schmerz sein).

InformationsquelleAutor helloandre

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.