Neues Fenster mit "onclick" öffnen

theShark

Hallo liebe Community, freue mich dabei zu sein.

Meine Frage ist wahrscheinlich ein leichtes für euch.
Wie öffne ich ein Link in einem neuen Fenster mit onclick? Also im sinne von target="_blank"
Ziel ist ein Hover Bild anzeigen mit einem Link.

Zurzeit sieht mein Code wie folgt aus:

Code

<style type="text/css">
.imgBildname { width: 546px; height: 107px; background: url(/ordner/bild1.png) no-repeat;}
.imgBildname:hover { width: 546px; height: 107px; background: url(/ordner/bild2.png) no-repeat;}
</style>

Code

<div class="imgBildname" onclick="location.href='http://blablabla.com';" style="cursor: pointer;"></div>

Danke für die Hilfe!

Bandit

http://www.w3schools.com/jsref/met_win_open.asp

theShark

Funktioniert mit window.open() prima. Danke!

Code

<div class="imgBildname" style="cursor:pointer" onclick="window.open('http://blablabla.com','_blank','');"></div>

Arne Drews

Hallo,

Ist es nicht besser, Du stellst einfach nur ein Overlay bei Klick dar?
Warum das extra Fenster?

Gruß Arne

theShark

Ist genau was ich wollte. Links gehen auf eine externe Seite darum das neue Fenster. Oder wie meintes du dass?

Arne Drews

Ja ok, für externe Links ist ein Overlay nicht so geeignet.
Aber was spricht dann gegen das target="_blank"?

theShark

Das war ja meine Frage. Wie ich target integriere. Was genau würdest du anderst machen? Ein Beispiet würde mir helfen.

Arne Drews

Na ich würde klassisch mit dem dafür vorgesehenen Link-Tag <a> arbeiten:

HTML

<a class="btnImage" href="http://www.example.com" target="_blank">&nbsp;</a>

Mit ein wenig CSS ist das Hover-Bild dann auch kein Problem. Allerdings würde ich die Bilder zusammenführen als ein Bild und beim Hover nur die Position ändern:

Code

A.btnImage { display:block; width:546px; height:107px; background:url( /ordner/bild1.png ) top left no-repeat; text-decoration:none; }
A.btnImage:hover { background-position:bottom left; }

Friedel

Mir ist der Sinn des ganzen völlig unklar. Wozu ist denn das div mit dem Hintergrundbild da? Das hat doch nichts mit Semantik zu tun! Wenn du ein Bild mit einem Link haben willst, solltest du ein Bild mit einem Link einbauen. Und nicht ein div mit Hintergrundbild, dem du dann mit Tricks beibringen musst, dass es sich sich so verhalten soll, wie wenn es ein Bild mit einem Link wäre.

Das mit dem Hoverbild würde ich so lösen, wie Arne Drews mit dem zusammengeführten Bild beschrieben hat.

Zuletzt würde ich noch das target="_blank" entfernen, damit der Code valide ist und der Browser nicht im Quirksmode rendert. Wenn du es durch

HTML

onclick="window.open(this.href);return false;"

ersetzt, bleibt der Code valide, der Browser rendert korrekt (wenn die Seite sonst keine Fehler enthält) und die Wirkung ist die gleiche.

Neues Fenster mit "onclick" öffnen

Tags

Benutzer online in diesem Thema