Hei,
du hast da einen grundlegenden Fehler drin. Eine ID sollte auf jeder Seite nur ein mal verwendet werden. Willst du mehrere Elemente mit gleichen CSS Eigenschaften versehen, solltest du class statt id nutzen.
Das onclick Attribut solltest du ebenfalls nicht nutzen. Events fängt man besser mit JavaScript Code ab, ich zeige dir gleich wie das geht.
Das ist jetzt vermutlich viel Input auf ein mal aber wenn du dich etwas durch arbeitest wirst du sicher alles verstehen können. Ansonsten frag einfach nach. Verwendet werden Arrays, EventListener, das event Objekt und das window Objekt. Alles sehr grundlegende Dinge.
// Was soll passieren wenn der Link gedrückt, aber nicht ausgeführt wurde?
// Die übergebene "element" Variable enthält das dem geklickten Link
// entsprechende DOM Element.
function validateUrl(element)
{
// href-Attribut auslesen und zwischenspeichern.
var url = element.getAttribute("href");
// Hier deine IF-Abfrage.
if (/* deine Bedingung */)
{
// Dein Code
}
else
{
// Weiterleitung durch window.open. Mit dem open Objekt können
// wir das target-Attribut wie gewünscht auf "_blank" setzen,
// mit location ist das nicht möglich.
window.open(url, "_blank");
}
// Nicht zwingend erforderlich aber guter Stil.
return true;
}
// Statt getElementById nutzen wir jetzt getElementsByClassName,
// da wir ja mit Klassen arbeiten. Beachte das "s" an getElements...
// Wir erhalten dabei ein von 0 aufwärts nummeriertes Array welches
// alle betroffenen Elemente beinhaltet.
var links = document.getElementsByClassName("link");
// Statt dem onclick Attribut nutzen wir nun Event Listener. Solcher hat folgenden
// Aufbau: element.addEventListener(event, aktion);
// Um den jetzt noch allen Links hinzuzufügen müssen wir das eben erstellte Array
// mit einer Schleife durchlaufen
for (var i = 0; i < links.length; i++)
{
// Hier der Eventlistener. Wir übergeben als Aktion eine anonyme Funktion,
// dabei handelt es sich um eine Funktion ohne Namen die jederzeit ausgeführt
// werden kann. Als Übergabewert nutzen wir hier "event", das event-Objekt
// enthält unterschiedliche Informationen über das, was gerade passiert ist
links[i].addEventListener("click", function (event)
{
// Wir wollen nicht, dass der Link direkt ausgeführt wird. Deswegen
// unterbinden wir das mittels preventDefault aus dem event Objekt.
// Diese Codezeile ist jetzt das Äquivalent zu deinem onclick="return false".
event.preventDefault();
// Hier rufen wir die obige Funktion auf.
validateUrl(this);
// Wieder nicht zwingend erforderlich aber guter Stil. Falls ein älterer
// Browser mit dem event Objekt Probleme hat, wird durch false trotzdem
// die direkte Weiterleitung durch den Link verhindert.
return false;
});
}
Alles anzeigen
Den HTML Code natürlich auch anpassen. Id durch class ersetzen und das onclick Attribut entfernen:
<a href="www.beispiel1.at" class="link" target="_blank"><img id="1" src="1.gif"></a>
<a href="www.beispiel2.at" class="link" target="_blank"><img id="2" src="2.gif"></a>
<a href="www.beispiel3.at" class="link" target="_blank"><img id="3" src="3.gif"></a>
Ich ordne das zur Not auch schnell ist kein Problem.
