onClick Link später aufrufen

mieze · 25. November 2015

Hallo liebe Forummitglieder,

ich hab folgendes Problem...

ein IMG soll verlinkt werden, aber nicht gleich nach dem Klick. Es wird zuerst etwas abgefragt...

mithilfe von onclick="return false;" wird der Link nach dem Klick nicht aufgerufen.
Hab zwei if-Abfragen - erst wenn diese nicht erfüllt werden, soll der Link aufgerufen werden.

Ich dachte das geht so:
else {
var link = document.getElementById('link');
link.setAttribute("onclick", "return true");
}

... aber es funktioniert leider nicht.

Ich hoffe ihr könnt mir weiterhelfen.

Danke und lG,
Mieze

wolf · 26. November 2015

Willst du das der link erst dann klickbar wird oder willst du erst ein bisschen warten und dann dem link folgen?

Basi · 26. November 2015

Dafür brauchst du das location Objekt:

JavaScript

// [...]
else {
  // Hier das href-Attribut auslesen
  var url = document.getElementById("link").getAttribute("href");




  // Hier die Weiterleitung
  window.location.href = url;
}

Alles anzeigen

mieze · 26. November 2015

Vielen Dank!! Das funktioniert.
Aber jetzt hab ich ein Folgeproblem.

Ich hab einige IMGs (Adventkalender) mit der ID "link".

<a href="www.beispiel1.at" id="link" target="_blank" onclick="return false;"><img id="1" src="1.gif"></a>
<a href="www.beispiel2.at" id="link" target="_blank" onclick="return false;"><img id="2" src="2.gif"></a>
<a href="www.beispiel3.at" id="link" target="_blank" onclick="return false;"><img id="3" src="3.gif"></a>
usw.

Und egal welches IMGs ich jetzt anklicke, es öffnet sich immer der Link vom ersten IMG...
Wie kann ich im else sagen dass er mir den Link des geklickten IMGS (und nicht den Link des ersten IMGs) ausgibt?

else {

var url = document.getElementById("link").getAttribute("href");
window.location.href = url;

}

Hoff das ist verständlich...

lG
Mieze

Basi · 29. November 2015

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.

JavaScript

// 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:

HTML

<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>

mieze · 29. November 2015

Vielen Dank Basti,

soweit hab ich es verstanden. In der Umsetzung scheitert es ein bisschen.

Folgendes, hier ein kleiner Auszug der Kästchen:

HTML

<div id="Kalender">
    <div onMOuseOver="SelOn(14)" onMouseOut="SelOff(14)" onClick="Geklickt(14)" id="t14" class="Tage">  
        <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012507" class="links" target="_blank">
            <img id="z14" src="pic-01/14.gif" width="73" height="73" border="0" alt="">
        </a>
    </div>
    <div onMOuseOver="SelOn(5)" onMouseOut="SelOff(5)" onClick="Geklickt(5)" id="t5" class="Tage">   
        <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012508" class="links" target="_blank">
            <img id="z5" src="pic-01/5.gif" width="73" height="73" border="0" alt="">
        </a>
    </div>
    <div onMOuseOver="SelOn(18)" onMouseOut="SelOff(18)" onClick="Geklickt(18)" id="t18" class="Tage">   
        <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012603" class="links" target="_blank">
            <img id="z18" src="pic-01/18.gif" width="73" height="73" border="0" alt="">
        </a>
    </div>
</div>

Alles anzeigen

Ich glaub das Problem liegt bei der onclick-Funktion in den jeweiligen Divs der Klasse "Tage".
Die Geklickt-Funktion ist da um abzufragen, ob es es schon soweit ist (Adventskalender), wenn nicht wird ein Info-Popup ausgegeben. Wenn es soweit ist öffnet sich der Link.
Momentan öffnet sich die Info und der Link. Es liegt bestimmt an den beiden Funktionen. Irgendwo hab ich da einen Denkfehler.

JavaScript

function Geklickt(KlickZahl)
{
    if (KlickMonat != 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-00.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    if (KlickZahl > KlickTag && KlickMonat == 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-0.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    else
    {
        console.log('Es ist soweit');
    }
}

Alles anzeigen

Habe das Problem, das ich nicht weiß wie ich die beiden Funktionen "unter einen Hut bekomme". Deine validateUrl-Funktion könnte ich eigentlich in die "Geklickt"-Funktion aufnehmen oder? event.preventDefault(); scheint nicht zu funktionieren.

Momentan habe ich es so, aber ich weiss das das falsch ist

JavaScript

function Geklickt(KlickZahl)
{
    if (KlickMonat != 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-00.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    if (KlickZahl > KlickTag && KlickMonat == 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-0.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    else
    {
        console.log('Es ist soweit');
    }
}




function validateUrl(element)
{
    // href-Attribut auslesen und zwischenspeichern.
    var url = element.getAttribute("href");




    if (KlickMonat != 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-00.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    else if (KlickZahl > KlickTag && KlickMonat == 11)
    {
        Eigenschaften = Attribute02;
        Datei = pfad + "meldung-0.htm";
        var Info = window.open(Datei, '', Eigenschaften);
        return;
    }
    else
    {
        window.open(url, "_blank");
    }




    return true;
}




var links = document.getElementsByClassName("IAB_clicktag");




for (var i = 0; i < links.length; i++)
{
    links[i].addEventListener("click", function (event)
    {
        event.preventDefault();
        validateUrl(this);
        return false;
    });
}

Alles anzeigen

Danke + lG mieze

Basi · 30. November 2015

Es ist etwas schwierig deinen Code nachzuvollziehen, da er unvollständig zu sein scheint. Kannst du deinen Code noch mal möglichst vollständig zeigen und grob erklären was passieren soll?

mieze · 30. November 2015

Hi,

ja na klar.
Kannst du mir nur kurz sagen wie ich den Quellcode hier schön reinbekomme?
Er hat mir wie ich sehe den letzten nicht richtig formatiert bzw keine zeilenumbrüche gemacht (etwas unübersichtlich - sorry)

Basi · 30. November 2015

Einfach aus deinem Editor raus kopieren und hier rein Ich ordne das zur Not auch schnell ist kein Problem.

mieze · 30. November 2015

ok alles klar

also ich versuchs so verständlich wie möglich zu erklären..

hier nochmal kurz zum problemfall:
es geht eben um einen adventkalender mit 24 kästchen. wenn man das jeweilige kästchen des aktuellen tages drückt soll sich dieses öffnen bzw. wird auf einen gutschein verlinkt. wenn man das falsche kästchen drückt (tag in der zukunft) soll sich dieser link eben nicht öffnen - anstatt dessen ein extra fenster mit der info dass es noch nicht zeit dafür ist... das funktioniert ausser, dass sich der link bei allen zukünftigen tagen schon öffnet. das hatte ich anfangs durch onclick="return false;" gelöst wo du mir ja mit deiner hilfe schon etwas weitergeholfen hast.

jedoch funktioniert es leider noch immer nicht, da es noch eine weitere funktion gibt, die diese if anweisungen schon beinhaltet und ich nicht weiß wie ich die funktion jetzt aufbauen soll damit sich der link eben nicht öffnet.
so... also ich habe ein datumfunktion (anzeige aktuelles datum und wieviele tage bis zum 24.12., usw).

dann habe ich ein array für die einzelnen kalenderbilder (bild mit nummer)

JavaScript

StartArr = new Array()




StartArr[1] = "pic-01/1.jpg";
StartArr[2] = "pic-01/2.jpg";
StartArr[3] = "pic-01/3.gif";
StartArr[4] = "pic-01/4.gif";
StartArr[5] = "pic-01/5.gif";

usw... dann ein Array für das kästchen wenn es geöffnet wird (hintergrundbild)

JavaScript

ImageArr = new Array()




ImageArr[1] = "pic-03/1.gif";
ImageArr[2] = "pic-03/2.gif";
ImageArr[3] = "pic-03/3.gif";
ImageArr[4] = "pic-03/4.gif";
ImageArr[5] = "pic-03/5.gif";

JavaScript

var KlickDatum = new Date();
var KlickMonat = KlickDatum.getMonth();
var KlickTag = KlickDatum.getDate();

und dann die besagte funktion mit der if anweisung wenn noch nicht november ist dann gib mir eine andere datei aus als wenn es schon november ist und nicht mehr so lange dauert bis dezember ist. anderen falls sollte eben der link aufgehen! das habe ich momentan in der funktion "validateUrl". da ich kein javascript profi bin weiß ich jetzt nicht wie ich deine funktion in die Geklickt-Funktion bekomme. Denn in dieser Funktion wird die KlickZahl übergeben. Diese kommt von onClick im HTML Code (s.unten).

JavaScript

function Geklickt(KlickZahl) {
	if (KlickMonat != 11) {
  	Eigenschaften = Attribute02;
  	Datei = pfad + "meldung-00.htm";
  	var Info = window.open(Datei,'',Eigenschaften);
  	return;
	}




	if(KlickZahl > KlickTag && KlickMonat == 11) {
	Eigenschaften = Attribute02;
	Datei = pfad + "meldung-0.htm";
	var Info = window.open(Datei,'',Eigenschaften);
	return;
	}




	else {
  	console.log('Es ist soweit');
	}
}




function validateUrl(element) {
// href-Attribut auslesen und zwischenspeichern.
var url = element.getAttribute("href");




	if (KlickMonat != 11) {
  	Eigenschaften = Attribute02;
  	Datei = pfad + "meldung-00.htm";
  	var Info = window.open(Datei,'',Eigenschaften);
  	return;
	}




	else if(KlickZahl > KlickTag && KlickMonat == 11) {
	Eigenschaften = Attribute02;
	Datei = pfad + "meldung-0.htm";
	var Info = window.open(Datei,'',Eigenschaften);
	return;
	}
	else
	{
    	// Weiterleitung durch window.open
    	window.open(url, "_blank");
	}
	return true;
}







// ein von 0 aufwärts nummeriertes Array welches alle betroffenen Elemente beinhaltet.
var links = document.getElementsByClassName("link");




// Event Listener
// element.addEventListener(event, aktion);
// alle Links hinzuzufügen > Array mit einer Schleife durchlaufen
for (var i = 0; i < links.length; i++)
{
	// Eventlistener, als Aktion eine anonyme Funktion
	// enthält unterschiedliche Informationen über das, was gerade passiert ist
	links[i].addEventListener("click", function (event)
	{
    	// Unterbinden dass Link direkt ausgeführt wird
    	// mittels preventDefault aus dem event Objekt.
    	event.preventDefault();




    	// Hier rufen wir die obige Funktion auf.
    	validateUrl(this);




    	return false;
	});
}

Alles anzeigen

HTML

<div id="Kalender">
<div onMOuseOver="SelOn(14)" onMouseOut="SelOff(14)" onClick="Geklickt(14)" id="t14" class="Tage">
  <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012507" class="link" target="_blank"><img id="z14" src="pic-01/14.gif" width="73" height="73" border="0" alt=""></a>
</div>




<div onMOuseOver="SelOn(5)" onMouseOut="SelOff(5)" onClick="Geklickt(5)" id="t5" class="Tage">
   <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012508" class="link" target="_blank"><img id="z5" src="pic-01/5.gif" width="73" height="73" border="0" alt=""></a>
</div>




<div onMOuseOver="SelOn(18)" onMouseOut="SelOff(18)" onClick="Geklickt(18)" id="t18" class="Tage">
   <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012603" class="link" target="_blank"><img id="z18" src="pic-01/18.gif" width="73" height="73" border="0" alt=""></a>
</div>

Alles anzeigen

usw.

Hoff du kennst dich jetzt eher aus was ich meine
hi Basti,

weißt du da schon was?

lg

Basi · 2. Dezember 2015

Hei,

du kannst deine "Gecklickt" Funktion einfach anstelle der "validateUrl" Funktion nutzen. Du kannst in dem Fall keine Zahl mit übergeben, da deine div Elemente allerdings id's mit Nummern haben kannst du die einfach auslesen:

JavaScript

function Geklickt(Element)
{
    // parseInt wandelt string-Variablen in number-Variablen. parseInt macht Probleme,
    // wenn vor der ersten Zahl im String ein anderes Zeichen steht, daher ersetzen
    // wir mittels replace-Funktion vorher alle "nicht-Zahlen" mit leere. (Regulärer Ausdruck)
    var KlickZahl = parseInt(Element.getAttribute("id").replace(/^\D+/g, ''));




    if (KlickMonat != 11)
    {
        // [...]
    }




    // [...]
}




// [...]




var links = document.getElementsByClassName("link");




for (var i = 0; i < links.length; i++)
{
    links[i].addEventListener("click", function (event)
    {
        event.preventDefault();




        // Hier deine Funktion aufrufen, übergeben wird das DOM-Element, 
        // in Zeile 6 wird es ausgewertet.
        Geklickt(this);




        return false;
    });
}

Alles anzeigen

mieze · 3. Dezember 2015

ok.. stimmt.

anbei der code

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <meta name="description" content="Online-Adventskalender">
    <meta name="keywords" content="Adventskalender">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, user-scalable=no">




    <style type="text/css">
        <!--




        body {
            margin: 0px;
            padding: 0px;
            font-family: Verdana,Arial,Helvetica,Sans-serif;
            font-size: 12px;
            font-weight: normal;
            color: #000000;
            background: url(bg-01.gif) #FFFFFF;
            background-color: #FFFFFF;
        }







        #Alles {
            position: absolute;
            top: 30px;
            left: 50%;
            width: 800px;
            height: 534px;
            margin-left: -400px;
            font-family: "Trebuchet MS",Tahoma,Arial,Helvetica;
            color: #000000;
            font-size: 12px;
            background-color: transparent;
            border: 0px solid #000000;
            text-align: center;
        }







        #Kalender {
            position: absolute;
            top: 70px;
            left: 250px;
            width: 300px;
            height: 450px;
            overflow: hidden font-family: Verdana, sans-serif;
            color: #000000;
            font-size: 12px;
            line-height: 130%;
            margin: 0px;
            padding: 0px;
            border: 0px solid #00FFFF;
        }




        .Tage {
            float: left;
            display: inline;
            position: relative;
            top: 0px;
            left: 0px;
            height: 73px;
            width: 73px;
            background: url(transpixel.gif);
            margin: 0px 0px 0px 0px;
            padding: 0px 0px 0px 0px;
            border: 1px solid #000000;
            text-align: center;
            cursor: pointer;
        }




        .Zahl {
            position: absolute;
            top: 62px;
            left: 62px;
            height: 25px;
            width: 25px;
            margin: 0px;
            padding: 0px;
            background-color: #BE0000;
            border: 1px solid #FFFFFF;
            font-family: Verdana, sans-serif;
            color: #FFFFFF;
            font-size: 16px;
            line-height: 25px;
        }










        /* Edit-Marker 02 Titelformat */




        .titel {
            position: absolute;
            top: 20px;
            left: 0px;
            width: 100%;
            font-family: fantasy, Century Gothic, Verdana, sans-serif;
            font-size: 26px;
            color: #000000;
            font-weight: normal;
            font-weight: bold;
        }




        /* Text unter dem Kalender */
        .FussText {
            position: absolute;
            top: 160px;
            left: 0px;
            width: 100%;
            font-family: Verdana, sans-serif;
            font-size: 12px;
            font-weight: normal;
            color: #000000;
            text-align: center;
        }




        /* Logo unter dem Kalender */
        .Fusslogo {
            position: absolute;
            top: 550px;
            left: 0px;
            width: 100%;
            font-family: Verdana, sans-serif;
            font-size: 12px;
            font-weight: normal;
            color: #FFFFFF;
            text-align: center;
        }







        -->
    </style>




    <script type="text/javascript" language="JavaScript">
// :::::::::: Anfang Datumsfunktionen :::::::::::::




var Kalnow = new Date();
var Kalyear = Kalnow.getFullYear();




// aktuelles Datum anzeigen
function Datum() {
var TageLang = new Array ("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
var MonateLang = new Array ("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
var KalTag = ((Kalnow.getDate()<10) ? "0" : "")+ Kalnow.getDate();
heute = TageLang[Kalnow.getDay()]+ " " + KalTag + ". " + MonateLang[Kalnow.getMonth()] + " " + Kalyear ;
document.write("" +heute);
document.write("Â Â -&nbsp;&nbsp;");
}







// bis 1. Weihnachtstag anzeigen
function Warten01() {
var KalZiel = new Date("December 25, " + Kalyear);
var diff = KalZiel.getTime() - Kalnow.getTime();
var TageBis = Math.floor(diff / (1000 * 60 * 60 * 24));




if (TageBis > 1)
document.write("Noch " + (TageBis+1) + " Tage bis Weihnachten");
else if (TageBis == 1)
document.write("Morgen ist Heiligabend!");
else if (TageBis == 0)
document.write("Heute ist Heiligabend!");
else if (TageBis == -1)
document.write("Frohe Weihnachten");
else if (TageBis == -2)
document.write("Frohe Weihnachten");
else if (TageBis < -2)
document.write("Weihnachten ist vorbei!");
return
}




// Fensterchen Info anzeigen
// Achtung hier Start am 1. Dez., Ende 24. Dez (24 Fensterchen)
function Warten02() {
var KalStart = new Date("December 1, " + Kalyear);
var diff = KalStart.getTime() - Kalnow.getTime();
var TageWarten = Math.floor(diff / (1000 * 60 * 60 * 24));
var KalMonat = Kalnow.getMonth() + 1;
var KalTag = Kalnow.getDate();
var HeutigesDatum = new Date();
var HeutigerTag = HeutigesDatum.getDate();




if (TageWarten >= 1)
document.write("" + (TageWarten+1) + " Tage bis zum ersten Fensterchen am 1. Dezember");
if (TageWarten == 0)
document.write("Morgen, am 1. Dezember, wird das erste Fensterchen geöffnet.");
if (TageWarten <= -1 && TageWarten >= -23)
document.write('Suchen sie das Fensterchen für heute!');
// letztes Fensterchen 24.
if (KalMonat == 12 && KalTag >= 24)
document.write('&nbsp;&nbsp;Alle Fensterchen dürfen geöffnet werden.');




return
}




// :::::::::: Ende Datumsfunktionen :::::::::::::




// PopUp-Window Eigenschaften kleines PopUp Fehlermeldung
Attribute01 = "left=10,top=10,screenX=10,screenY=10,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=300";




// PopUp-Window Eigenschaften für die Tagesdatei falls benötigt
Attribute02 = "left=10,top=10,screenX=10,screenY=10,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=750,height=600";







// URL der Grafiken für das zerstückelte Kalenderbild im Vordergrund
// 24 mal 73 x 73, aus der Grafik von 300 x 450 (größer wegen de 1px Ränder)




StartArr = new Array()




StartArr[1] = "pic-01/1.jpg";
StartArr[2] = "pic-01/2.jpg";
StartArr[3] = "pic-01/3.gif";
StartArr[4] = "pic-01/4.gif";
StartArr[5] = "pic-01/5.gif";
StartArr[6] = "pic-01/6.gif";
StartArr[7] = "pic-01/7.gif";
StartArr[8] = "pic-01/8.gif";
StartArr[9] = "pic-01/9.gif";
StartArr[10] = "pic-01/10.gif";
StartArr[11] = "pic-01/11.gif";
StartArr[12] = "pic-01/12.gif";
StartArr[13] = "pic-01/13.gif";
StartArr[14] = "pic-01/14.gif";
StartArr[15] = "pic-01/15.gif";
StartArr[16] = "pic-01/16.gif";
StartArr[17] = "pic-01/17.gif";
StartArr[18] = "pic-01/18.gif";
StartArr[19] = "pic-01/19.gif";
StartArr[20] = "pic-01/20.gif";
StartArr[21] = "pic-01/21.gif";
StartArr[22] = "pic-01/22.gif";
StartArr[23] = "pic-01/23.gif";
StartArr[24] = "pic-01/24.gif";










// URL der Grafiken für die 24 Teilnehmer 73 x 73 im Hintergrund




ImageArr = new Array()




ImageArr[1] = "pic-03/1.gif";
ImageArr[2] = "pic-03/2.gif";
ImageArr[3] = "pic-03/3.gif";
ImageArr[4] = "pic-03/4.gif";
ImageArr[5] = "pic-03/5.gif";
ImageArr[6] = "pic-03/6.gif";
ImageArr[7] = "pic-03/7.gif";
ImageArr[8] = "pic-03/8.gif";
ImageArr[9] = "pic-03/9.gif";
ImageArr[10] = "pic-03/10.gif";
ImageArr[11] = "pic-03/11.gif";
ImageArr[12] = "pic-03/12.gif";
ImageArr[13] = "pic-03/13.gif";
ImageArr[14] = "pic-03/14.gif";
ImageArr[15] = "pic-03/15.gif";
ImageArr[16] = "pic-03/16.gif";
ImageArr[17] = "pic-03/17.gif";
ImageArr[18] = "pic-03/18.gif";
ImageArr[19] = "pic-03/19.gif";
ImageArr[20] = "pic-03/20.gif";
ImageArr[21] = "pic-03/21.gif";
ImageArr[22] = "pic-03/22.gif";
ImageArr[23] = "pic-03/23.gif";
ImageArr[24] = "pic-03/24.gif";










var KlickDatum = new Date();
var KlickMonat = KlickDatum.getMonth();
var KlickTag = KlickDatum.getDate();




function Geklickt(Element) {




var KlickZahl = parseInt(Element.getAttribute("id").replace(/^\D+/g,''));
console.log(KlickZahl);




//ahref-Attribut auslesen und zwischenspeichern.
var url = Element.getAttribute("href");




if (KlickMonat != 11) {
Eigenschaften = Attribute02;
Datei = pfad + "meldung-00.htm";
var Info = window.open(Datei,'',Eigenschaften);
return;
}




else if(KlickZahl > KlickTag && KlickMonat == 11) {
Eigenschaften = Attribute02;
Datei = pfad + "meldung-0.htm";
var Info = window.open(Datei,'',Eigenschaften);
return;
}
else
{
// Weiterleitung durch window.open
window.open(url, "_blank");
}
return true;
}




// ein von 0 aufwärts nummeriertes Array welches alle betroffenen Elemente beinhaltet.
var links = document.getElementsByClassName("IAB_clicktag");




// Event Listener
// element.addEventListener(event, aktion);
// alle Links hinzuzufügen > Array mit einer Schleife durchlaufen
for (var i = 0; i < links.length; i++)
{
// Eventlistener, als Aktion eine anonyme Funktion
// enthält unterschiedliche Informationen über das, was gerade passiert ist
links[i].addEventListener("click", function (event)
{
// Unterbinden dass Link direkt ausgeführt wird
// mittels preventDefault aus dem event Objekt.
event.preventDefault();




// Hier rufen wir die obige Funktion auf.
Geklickt(this);




return false;
});
}







// Hintergrundgrafiken nur für erlaubte tage




function WechselStart() {




if(KlickTag>24) {KlickTag = 24;}




for (i=1; i<=KlickTag && KlickMonat == 11 ; i++) {
Element = "t" + i;
HK = "'"
Quelle = 'url(' + HK + ImageArr[i] + HK + ')';
document.getElementById(Element).style.backgroundImage = Quelle;
}




}







// Transparenz nur für erlaubte tage




function Aktuell() {




if(KlickTag>24) {KlickTag = 24;}




for (i=1; i<=KlickTag && KlickMonat == 11 ; i++ ) {
Element = "z" + i;
HK = "'"
Quelle = 'url(' + HK + "transp-01.png" + HK + ')';
document.getElementById(Element).src = "transp-50.png";
}




// aktueller Tag




if(KlickTag<25 && KlickMonat == 11) {
Element = "z" + KlickTag;
document.getElementById(Element).src = "transp-heute.png";
}




}







// startet zeitverzögert
setTimeout("WechselStart()",1000); // Hintergrundgrafiken einfügen
setTimeout("Aktuell()",1000); // transparenz einschalten







// Mouseover MouseOut




function SelOn(x) {
if(x <= KlickTag && KlickMonat == 11) {
Element2 = "z" + x
document.getElementById(Element2).src = "transp-100.png";
}
}




function SelOff(x) {
if(x <= KlickTag && KlickMonat == 11) {
Element2 = "z" + x
document.getElementById(Element2).src = "transp-50.png";
}
}




//-->
    </script>




</head>




<body>










    <div id="Alles">




        <!-- Titeltext hier eintragen -->
        <div class="titel">Online-Adventkalender</div><br>




        <div id="Kalender">
            <div title="14. Bäckerei Reingruber" onmouseover="SelOn(14)" onmouseout="SelOff(14)" onclick="Geklickt(14)" id="t14" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012507" class="IAB_clicktag" target="_blank"><img id="z14" src="pic-01/14.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="5. Massage Thomas Pilz" onmouseover="SelOn(5)" onmouseout="SelOff(5)" onclick="Geklickt(5)" id="t5" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012508" class="IAB_clicktag" target="_blank"><img id="z5" src="pic-01/5.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="18. Eurotherme Bad Ischl" onmouseover="SelOn(18)" onmouseout="SelOff(18)" onclick="Geklickt(18)" id="t18" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012603" class="IAB_clicktag" target="_blank"><img id="z18" src="pic-01/18.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="10. TUI" onmouseover="SelOn(10)" onmouseout="SelOff(10)" onclick="Geklickt(10)" id="t10" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012519" class="IAB_clicktag" target="_blank"><img id="z10" src="pic-01/10.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="11. Museum Stadt Bad Ischl" onmouseover="SelOn(11)" onmouseout="SelOff(11)" onclick="Geklickt(11)" id="t11" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012520" class="IAB_clicktag" target="_blank"><img id="z11" src="pic-01/11.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="24. Gmundner Milch" onmouseover="SelOn(24)" onmouseout="SelOff(24)" onclick="Geklickt(24)" id="t24" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012680" class="IAB_clicktag" target="_blank"><img id="z24" src="pic-01/24.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="16. Konzert Stadtsaal Vöcklabruck" onmouseover="SelOn(16)" onmouseout="SelOff(16)" onclick="Geklickt(16)" id="t16" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012599" class="IAB_clicktag" target="_blank"><img id="z16" src="pic-01/16.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="2. Museum Stadt Bad Ischl" onmouseover="SelOn(2)" onmouseout="SelOff(2)" onclick="Geklickt(2)" id="t2" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012505" class="IAB_clicktag" target="_blank"><img id="z2" src="pic-01/2.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="22. Salzkammergut Kräuterhaus" onmouseover="SelOn(22)" onmouseout="SelOff(22)" onclick="Geklickt(22)" id="t22" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012676" class="IAB_clicktag" target="_blank"><img id="z22" src="pic-01/22.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="8. Massage Forsthuber" onmouseover="SelOn(8)" onmouseout="SelOff(8)" onclick="Geklickt(8)" id="t8" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012517" class="IAB_clicktag" target="_blank"><img id="z8" src="pic-01/8.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="20. Heli Salzkammergut" onmouseover="SelOn(20)" onmouseout="SelOff(20)" onclick="Geklickt(20)" id="t20" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012607" class="IAB_clicktag" target="_blank"><img id="z20" src="pic-01/20.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="13. Stadtgemeinde Laakirchen" onmouseover="SelOn(13)" onmouseout="SelOff(13)" onclick="Geklickt(13)" id="t13" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012596" class="IAB_clicktag" target="_blank"><img id="z13" src="pic-01/13.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="15. Traunsee Immobilien" onmouseover="SelOn(15)" onmouseout="SelOff(15)" onclick="Geklickt(15)" id="t15" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012598" class="IAB_clicktag" target="_blank"><img id="z15" src="pic-01/15.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="19. Mrs. Sporty" onmouseover="SelOn(19)" onmouseout="SelOff(19)" onclick="Geklickt(19)" id="t19" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012605" class="IAB_clicktag" target="_blank"><img id="z19" src="pic-01/19.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="7. Chic & Charme" onmouseover="SelOn(7)" onmouseout="SelOff(7)" onclick="Geklickt(7)" id="t7" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012513" class="IAB_clicktag" target="_blank"><img id="z7" src="pic-01/7.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="21. Sandy's Cafe" onmouseover="SelOn(21)" onmouseout="SelOff(21)" onclick="Geklickt(21)" id="t21" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012608" class="IAB_clicktag" target="_blank"><img id="z21" src="pic-01/21.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="6. Röstaurant" onmouseover="SelOn(6)" onmouseout="SelOff(6)" onclick="Geklickt(6)" id="t6" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012509" class="IAB_clicktag" target="_blank"><img id="z6" src="pic-01/6.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="23. BezirksRundschau" onmouseover="SelOn(23)" onmouseout="SelOff(23)" onclick="Geklickt(23)" id="t23" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012675" class="IAB_clicktag" target="_blank"><img id="z23" src="pic-01/23.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="FAIE" onmouseover="SelOn(12)" onmouseout="SelOff(12)" onclick="Geklickt(12)" id="t12" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012594" class="IAB_clicktag" target="_blank"><img id="z12" src="pic-01/12.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="4. Urkornhof" onmouseover="SelOn(4)" onmouseout="SelOff(4)" onclick="Geklickt(4)" id="t4" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012597" class="IAB_clicktag" target="_blank"><img id="z4" src="pic-01/4.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="17. Hütthaler" onmouseover="SelOn(17)" onmouseout="SelOff(17)" onclick="Geklickt(17)" id="t17" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012601" class="IAB_clicktag" target="_blank"><img id="z17" src="pic-01/17.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="1. Konditorei Baumgartner" onmouseover="SelOn(1)" onmouseout="SelOff(1)" onclick="Geklickt(1)" id="t1" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012492" class="IAB_clicktag" target="_blank"><img id="z1" src="pic-01/1.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="9. El Pancho" onmouseover="SelOn(9)" onmouseout="SelOff(9)" onclick="Geklickt(9)" id="t9" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012518" class="IAB_clicktag" target="_blank"><img id="z9" src="pic-01/9.gif" width="73" height="73" border="0" alt=""></a>
            </div>




            <div title="3. Traunseewirte" onmouseover="SelOn(3)" onmouseout="SelOff(3)" onclick="Geklickt(3)" id="t3" class="Tage">
                <a href="http://ad1.adfarm1.adition.com/redi?sid=2840449&kid=1480178&bid=5012506" class="IAB_clicktag" target="_blank"><img id="z3" src="pic-01/3.gif" width="73" height="73" border="0" alt=""></a>
            </div>







        </div>
        <div style="clear:both;"></div>




        <script type="text/javascript" language="JavaScript">




<!-- Begin -->
Datum();
document.write('<br>');
Warten01();
document.write('<br>');
Warten02();
            // End -->




        </script>
        </span>
        <br>
    </div>
    <!-- Schneefallscript unmittelbar vor dem Ende-Body-tag einkopieren -->
</body>
</html>

Alles anzeigen

Basi · 3. Dezember 2015

Dein Javascript Code wird ausgeführt bevor dein HTML Code geladen ist, darum kann der Eventlistener nicht korrekt gesetzt werden. Du musst deinen gesamten Javascript Code hinter den HTML Code schreiben oder in folgende Funktion packen:

JavaScript

window.onload = function() 
{
    // Dein Code
}

Außerdem musst du bedingt deines HTML Aufbaus Zeile 276 anpassen:

JavaScript: 276

var KlickZahl = parseInt(Element.getAttribute("id").replace(/^\D+/g,'')); // Geht nicht

JavaScript: 276

var KlickZahl = parseInt(Element.getElementsByTagName("img")[0].getAttribute("id").replace(/^\D+/g, '')); // Geht

mieze · 3. Dezember 2015

VIELEN DANK für deine Mühe, es funkt jetzt.

Basi · 3. Dezember 2015

Bitte bitte

onClick Link später aufrufen

Jetzt mitmachen!

Teilen