Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon derZivi vom 13.11.2019, 12:51 Options

Online Weinachtskalender

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

Antwort schreiben

Antwort 1 von advent vom 13.11.2019, 14:07 Options

<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) .... [i]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[/i]
}
window.onload=advent;
}
</script>

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

Antwort 2 von advent vom 13.11.2019, 14:09 Options

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

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

Antwort 3 von advent vom 13.11.2019, 14:54 Options

Zitat:
Sie studiert z.Z in Mexico also müsste auch die dortige Zeit beachtet werden.

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.

Antwort 4 von derZivi vom 13.11.2019, 17:19 Options

vielen Dank für die Hilfe

Antwort 5 von derZivi vom 22.11.2019, 15:06 Options

<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

Antwort 6 von derZivi vom 22.11.2019, 15:07 Options

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

Antwort 7 von advent vom 22.11.2019, 15:34 Options

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.

Antwort 8 von advent vom 22.11.2019, 15:46 Options

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

Antwort 9 von derZivi vom 22.11.2019, 15:53 Options

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

Antwort 10 von derZivi vom 22.11.2019, 15:56 Options

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

Antwort 11 von advent vom 23.11.2019, 07:52 Options

Zitat:
Ansonsten mit dem fertigen code hier nochmals melden.

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

Antwort 12 von advent vom 23.11.2019, 09:25 Options

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>

Antwort 13 von advent vom 23.11.2019, 09:35 Options

Nachtrag:

... cursor="pointer";

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

Antwort 14 von Friedel vom 23.11.2019, 09:54 Options

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.

Antwort 15 von Friedel vom 23.11.2019, 09:58 Options

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

Antwort 16 von advent vom 23.11.2019, 10:40 Options

Zitat:
Der Eventhandler onload ist beim window-Objekt nicht erlaubt.

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.

Antwort 17 von advent vom 23.11.2019, 11:08 Options

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.

Antwort 18 von Friedel vom 23.11.2019, 12:10 Options

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.

Antwort 19 von derZivi vom 23.11.2019, 12:22 Options

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

Antwort 20 von derZivi vom 23.11.2019, 12:32 Options

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

« Zurück
1
2
Weiter »

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken