Supportnet / Forum / Webseiten/HTML

Hallo Forum, ich möchte für meine Freundin einen Online-Weinachtskalender machen. Jeden Tag soll ein Türchen freigeschaltet werden. Sie studiert z.Z in Mexico also müsste auch die dortige Zeit beachtet werden. Hab schon im Forum gesucht aber die Links zu entsprechenden Scripten gehen nicht mehr. Der Kalender soll nur aus einem Bild mit 24 Türchen und den Bildern dahinter bestehen. P.S. weiss auch nicht so richtig ob ich "Maps" für die Kalendergrafik nehmen soll oder Slices (mit Photoshop) Danke für eure Hilfe

<script type="text/javascript">
function advent() {
var heut=new Date();
if (heut.getmonth==11) {
var tag=heut.getDate();
for (var i=1; i<=tag; i++) {
 var tuer=document.getElementById("tuer"+i);
 if (tuer) tuer.onclick=function() {oeffne(this);};
}
}
}
function oeffne(was) {
if (was) .... was hier steht ergibt sich aus der Art deines Kalenders, du könntest zB ein Bild (=das Türchen) durch ein anderes (=das dahinter) ersetzen
}
window.onload=advent;
}
</script>

die Türchen bekommen einfach alle eine ID in der Art
id="tuer1" bis "tuer24"

hoppla, ein Schreibfehler: die 4te zeile muss natürlich lauten:

if (heut.getMonth()==11) {

ich vergaß zu erwähnen, dass der Vorteil von JavaScript-Lösungen ist, dass sie sich grundsätzlich nach Systemzeit und -einstellungen des Users richten. Vorausgesetzt der Rechner in Mexico ist auf die lokale Zeitzone eingestellt dürfte das also keinerlei Probleme bereiten.

vielen Dank für die Hilfe

<img lowsrc="jpg/kalender_low.jpg" border="0" src="jpg/kalender_neu.jpg" usemap="#Map">

<map name="Map" id="tuer1"><area shape="rect" coords="242,473,357,571" href="bild1.html">
<map name="Map" id="tuer2"><area shape="rect" coords="59,736,173,840" href="bild2.html"></map>
<map name="Map" id="tuer3"><area shape="rect" coords="64,210,177,309" href="bild3.html"></map>
...

hier ein Auszug wie es jetzt aussieht. Was muss in der IF-Anweisung stehen das die entsprechenden Türchen anklickbar sind ? Also am 5. Dezemer sollen die ersten 5 Türchen anklickbar sein - am 12. Dezember die ersten 12

Danke für eure Hilfe

P.S. die Türchen führen doch zu eigenen html-Seiten und nicht nur rein zu den Bildern

Wozu die vielen maps? Nur eine ist zulässig pro Bild!
zB diese

<map name="Map" id="map"><area shape="rect" coords="242,473,357,571" nohref="nohref" title="1">
<area shape="rect" coords="59,736,173,840"  nohref="nohref" title="2"></map>
<area shape="rect" coords="64,210,177,309"  nohref="nohref" title="3"></map>

und dazu dies JavaScript im head-Bereich:

<script type="text/javascript">
function advent() {
var heut=new Date();
if (heut.getmonth==11) {
var tag=heut.getDate();
for (var i=1; i<=tag; i++) {
var mappe=document.getElementById("map");
if (mappe) {
var tuer=mappe.getElementsByTagName("area");
for (var a=0; a<tuer.length; a++) {
tuer[a].onclick=function() {oeffne(this);};
}}}}}
function oeffne(was) {
if (was) location.href="bild"+was.title+".htm";
}
window.onload=advent;
}
</script>

das Script advent geht nun alle area-Tags durch. Diese sind mit nohref unklickbar! Das Script versieht die ersten x areas mit einem onclick-Attribut. Damit ist der Bereich wieder klickbar. Beim Draufklicken wird das title-Attribut bestehend aus der Zahl ausgelesen und daraus der Name der neuen Seite gebastelt.
Alles ungetestet. Ich empfehle den Firefox zum Ausprobieren, der hat im Menü Extras eine Fehler- bzw. JavaScript-Konsole, die auf Fehler hinweist.
Ansonsten mit dem fertigen code hier nochmals melden.

besser:

<map name="Map" id="map">
<area shape="rect" coords="242,473,357,571" nohref="nohref" title="1">
<area shape="rect" coords="59,736,173,840" nohref="nohref" title="2">
<area shape="rect" coords="64,210,177,309" nohref="nohref" title="3">
...
</map>

ohne das </map> zwischendrin

irgendwas stimmt mit der geschweiften Klammer hinter

window.onload=advent;

nicht - wenn ich die wegmache das funktioniert das Script ohne Fehler aber die Links werden nicht generiert - ich hab leider zu wenig Ahnung ...Sorry

P.S. zum Testen hab ich mein PC-Datum auf den 2. Dezember gestellt

das meinte ich auch so! Also bitte poste den Quellcode hier oder den Link zur fertigen Seite.

in Abwandlung eines Beispiels aus SelfHTML eine funktionierende Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken definieren - map, area, usemap</title>

<script type="text/javascript">
function advent() {
 var heut=new Date();
 if (heut.getMonth()==11) {
  var tag=heut.getDate();
  var mappe=document.getElementById("map");
  if (mappe) {
   var tuer=mappe.getElementsByTagName("area");
   for (var a=0; a<tuer.length; a++) {
    if (a<tag) {
     tuer[a].style.cursor="hand";
     tuer[a].onclick=function() {
      oeffne(this);
     }
    }
    else tuer[a].title="Dies Türchen bleibt noch zu";
   }
  }
 }
}
function oeffne(was) {
if (was) location.href="bild"+was.title+".htm";
}
window.onload=advent;
</script>

</head>
<body>

<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>

<p>
  <img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte" id="map">
    <area shape="rect" coords="11,10,59,29" nohref="nohref" title="1">
    <area shape="rect" coords="42,36,96,57" nohref="nohref" title="2">
    <area shape="rect" coords="42,59,78,80" nohref="nohref" title="3">
    <area shape="rect" coords="100,26,152,58" nohref="nohref" title="4">
    <area shape="rect" coords="27,113,93,134" nohref="nohref" title="5">
    <area shape="rect" coords="100,138,163,159" nohref="nohref" title="6">
    <area shape="rect" coords="207,77,266,101" nohref="nohref" title="7">
    <area shape="rect" coords="282,62,344,85" nohref="nohref" title="8">
    <area shape="rect" coords="255,132,316,150" nohref="nohref" title="9">
    <area shape="rect" coords="78,182,132,200" nohref="nohref" title="10">
    <area shape="rect" coords="142,169,200,193" nohref="nohref" title="11">
    <area shape="rect" coords="140,209,198,230" nohref="nohref" title="12">
    <area shape="rect" coords="187,263,222,281" nohref="nohref" title="13">
    <area shape="rect" coords="249,278,304,297" nohref="nohref" title="14">
    <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310" nohref="nohref" title="15">
  </map>
</p>

</body>
</html>

Nachtrag:

... cursor="pointer";

funktioniert in mehr Browsern.
Ist aber für das eigentliche Problem irrelevant.

Die schließende Klammer am Ende ist definitiv zu viel. Oder es fehlt eine öffnende Klammer. Aber das Script enthält noch mehr Fehler. Die Zeile

tuer[a].onclick=function() {oeffne(this);};

ist auf jeden Fall falsch. Ich vermute, das soll

tuer[a].onclick=oeffne(this);
};

Statt getmonth muss man getMonth() schreiben.

Außerdem enthält das Script recht viel, was ich für nutzlos halte. Es werden einige Objekte angelegt, die nicht gebraucht werden. Die Zuweisung der Url durch die href-Attribute ist zwar eine gute Idee, aber imho zu aufwändig-

area-Elemente dürfen nicht gleichzeitig die Attribute href und nohref haben. Hier bekommen sie im Html-Teil das nohref-Attribut und im Script zusätzlich das href-Attribut. Statt dessen würde ich von vorn herein href einbauen und als Ziel die Funktion advent() zuweisen. Dadurch wird auch die fragwürdige Zeile

window.onload=advent;

überflüssig.

Der Eventhandler onload ist beim window-Objekt nicht erlaubt. Er kann nur bei body oder frameset stehen. Ich würde den Html-Teil also wie folgt verändern:

<map name="Map"><area shape="rect" coords="242,473,357,571" href="javascript:advent(1)" title="1">
<area shape="rect" coords="59,736,173,840" href="javascript:advent(2)" title="2"></map>
<area shape="rect" coords="64,210,177,309" href="javascript:advent(3)" title="3"></map>
...

Das Script könnte dann wie folgt lauten:

<script type="text/javascript">
<!--
var heut=new Date();
heute = heut.getTime();
var test=10;
heut=new Date(heute+(86400000*test));
var tag=heut.getDate();

function advent(tuer) {
  if (heut.getMonth()==11 && tuer<=tag) {
    location.href= tuer +".htm";
  } else alert("Wer wird denn so ungeduldig sein?\nHeute ist erst der "+tag+"."+heut.getMonth()+".");
};
//-->
</script>

Die beiden Zeilen

var test=10;
heut=new Date(heute+(86400000*test));

werden nur zum Testen gebraucht. Du kannst bei

var test=10;

statt der 10 eine beliebige Zahl eintragen. Um diese Zahl geht der Kalender dann vor. Heute ist der 23.11. Wenn du dort 10 einträgst, wie in meinem Beispiel, geht das Script davon aus, dass heute der 3.12. ist. Wenn du mit dem Testen fertig bist, solltest du entweder bei var test= eine 0 eintragen oder die beiden Zeilen löschen.

Ich habe zusätzlich eine Alertbox eingebaut, die eine Meldung ausgibt, wenn man versucht ein nicht-erlaubtes Türchen zu öffnen.

Das Script erwartet, dass es im selben Ordner die Seiten 1.htm bis 24.htm gibt. Ich empfehle, in diese Seiten jeweils einen Link zurück zur Kalenderseite ein zu bauen. Schließlich sollte man wieder zum Kalender navigieren können, wenn man das Türchen vom Vortag geöffnet hat.

Ich habe die Antworten 12 und 13 nicht gesehen, bevor ich meine Antwort geschrieben habe.

das ist einfach falsch.
Selbstverständlich ist onload auch für window zulässig, ebenso für img und etliche andere Objekte.

SelfHTML ist im Bereich JavaScript nicht auf dem letzten Stand und bedarf dringlichst der Überarbeitung und Aktualisierung.

Lieber Friedel,

mein Script würde durch deine Änderungen verschlechtert, da die saubere Trennung von HTML und JavaScript wegfiele (Stichwort unobstrusive JavaScript). Sowas machten JavaScriptler vor 10 Jahre für Netscape 2-4:

Kommentarzeile <-- //--> um JavaScript für Netscape 2 zu verbergen

href="javascript:advent(1)" weil damalige Browser onclick gar nicht oder nur für wenige Tags kannten.

globale Variablen, weil die Feinheiten der Informationsübergabe zwischen Funktionen und weil anonyme Funktionen generell unbekannt waren.
Aber das muss nicht mehr sein. Leider wird dies in SelfHTML - wie schon erwähnt - nur unzureichend dargestellt.

Mein Script ist aber valide und funktioniert. Und ich vermische Script mit Html genau so wie du. Die Kommentierungen braucht man nicht für Netscape 2 sondern für Browser, in denen JavaScript deaktiviert ist. Mir sind keine Gründe bekannt, warum man heute keine globalen Variablen mehr verwenden sollte.

Deine Idee, den areas durch das Script die href-Attribute zu verpassen, halte ich für, gut. Aber ich habe sie nicht übernommen, weil sie die Sache komplizierter macht. Und die Methode, mit der du das gemacht hast, ist definitiv nicht standardkonform. Wenn dir das href="javascript:advent(1)" nicht gefällt, kann man natürlich auch nohref onclick="advent(1)" verwenden. Aber window.onload=advent; geht jedenfalls nicht. onclick kann man in recht vielen Elementen benutzen und darf es laut Standard auch. Aber nicht onload.

Danke Danke, hab jetzt alles eingebaut und das Script klappt, hab aber noch ein paar kleinere Problemchen:

Wenn man mit dem Mauszeiger über die gültigen Türen geht verwandelt er sich nicht in eine Hand - hab schon mit "pointer" und "hand" getestet.

Ich hab mir noch ein Schneeflocken-Script (http://www.javarea.de/index.php3?opencat=Javascript&subcat=sons...) aus dem Internet dazu gebastelt aber beide Scripte funktionieren nicht "nebeneinander" - also immer das was zuerst im head-bereich kommt wird ausgeführt und das andere "ignoriert".

...und der else-zweig der Abfrage geht auch nicht so richtig -die alert-Meldung von Friedel find ich gut aber wenn man

else tuer[a].title="Dies Türchen bleibt noch zu";

mit

else alert("Wer wird denn so ungeduldig sein?\nHeute ist erst der "+tag+"."+heut.getMonth()+".");

ersetzt erscheit sie am Anfang 2 mal und sonst nicht mehr.

hab jetzt doch komplett auf friedels script gewechselt weil dann alle Problemchen die ich genannt habe gelöst sind. Trotzdem großen Dank an beide !!!

@Friedel:
klar geht das. Übrigens wird im Script, das der Threaderöffner in Antwort 19 meint ebenfalls window.onload benutzt.
Den Hinweis auf die Überalterung vom SelfHTML-JavaScript-Kapitel solltest du mehr beherzigen.
Google mal zum Thema "unobstrusive JavaScript" (oder der deutschen Übersetzung "barrierefreies JavaScript").

Aktuelle Browser mit deaktiviertem JavaScript ignorieren script-Bereiche komplett, HTML-Kommentare brauchen die erst recht nicht.

nun, die Zusammenführung meines Scripts und das Schneeflockenscripts ist nur möglich, weil ich keine globalen Variablen nutze, und daher nicht die Gefahr besteht, dass meine Funktionen zB aus Versehen eine Lawine auslösen, indem sie irgendeinen Wert ändern.

@Zivi:
du kannst window.onload nur einmal eine Funktion zuweisen.
Wenn du dies Schneescript mit übernehmen willst kannst du das nur so lösen:

setze an den Anfang des JavaScript-bereichs das Schnee-Script ohne

 if (browserok)
	window.onload = initsnow;

(letzte Zeilen)
danach meins und ändere darin die letzte Zeile in folgendes:

window.onload=function () {
advent;	
initsnow;
}

Keine Garantie, da das Scneeflockenscript schlampig geschrieben ist. Allerdings verwendet meins keine globalen Variablen, so dass ich nicht annehme, dass sie sich in die Quere komen.

@advent: Vielleicht geht window.onload in einigen Browsern. Jedenfalls geht es nicht in allen Browsern. (In meinem z.B. nicht). Nicht mal in den gängigen. Ich habe Selfhtml nicht mal erwähnt, aber es ist imho nicht überholt. Die letzte Neuauflage des Standards für JavaScript ist die 3. Ausgabe von Standard ECMA-262 ECMAScript Language Specification vom Dezember 1999. Die gilt bis heute und es gibt weder eine neuere noch eine andere, die auch gilt. Ich weiß nicht, was zu dem Thema in Selfhtml steht, aber da du es als veraltet beschreibst, wird es wohl nicht dem entsprechen, was du für richtig hältst. Entscheidend ist jedenfalls weder Selfhtml noch deine Meinung, sondern nur der gültige ECMA-Standard (wobei man imho davon abweichen sollte, wenn gängige Browser den Standard nicht umsetzen können).

@derZivi: Schön, dass es jetzt geht. :-)

.ich weiß nicht was bei dir gängig ist, wenn nicht IE 5-7, Opera 7-9, Firefox 1-2 (und Verwandte), Safari. Bislang laufen alle meine Seiten problemlos mit window.onload. Vielleichst machst du einen Fehler bei der Umsetzung? Beliebt ist folgender:

function fertigGeladen() {
alert("Fertig");
}
window.onload=fertigGeladen();

statt

window.onload=fertigGeladen;

Unterschied gesehen? Übergeben wird die Referenz auf die Funktion, daher ohne Klammern*, ansonsten wird window.onload der Rückgabewert der Funktion (hier gar nichts) zugewiesen. Dann passiert auch nichts.

Probier das einfach mal aus. Einfach ein bisschen HTML drumherumgebastelt und im Browser geladen. Bitte berichte hier das Ergebnis, evtl. mit deinem Code und der genauen Browserbezeichnung, noch besser mit den Meldungen der Firefox-JavaScript-Konsole, im Falle dass es irgendwo nicht laufen sollte.

PS: wo steht im ECMA-262-Standard überhaupt etwas zu DOM-Objekten und deren events?

*alternativ eine anonyme Funktion mit Klammern - siehe Antwort 22