Imagemap mit PHP echo ausgeben, wie geht das ?

[Logan500]

Hi,

ich habe vor einen Osterkalender zu programmieren für meine Hompage.
Das Image Map war schnell erstellt und nach einigen kurzen Überlegungen auch das Ausgabe Script. Allerdings bin ich noch ein Neuling und suche verzweifelt eine Möglichkeit das Image Map mit der echo Ausgabe zu verbinden.
Wisst ihr vielleicht eine Lösung ?

Hier mein Script:

<img src="kalender1.png" width="1150" height="300" border="0" usemap="#kalender" />

<map name="kalender">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Logan -->

<area shape="poly" coords="42,248,44,246,14,244,13,271,68,293,83,242,55,228" href="tag5.html"/>
<area shape="poly" coords="112,116,126,131,94,115,83,135,46,116,36,157,89,213,105,229,135,182,141,153,129,129" href="tag8.html"/>
<area shape="poly" coords="198,157,242,175,261,110,235,87,220,95,218,114,185,107,182,135" href="tag3.html"/>
<area shape="poly" coords="204,195,188,174,155,186,145,211,159,254,177,288,241,241,246,205,227,184,202,200" href="tag12.html"/>
<area shape="poly" coords="323,157,293,141,278,161,276,191,292,221,329,246,341,258,364,217,370,187,376,155,356,124,334, 133,322,160,299,143" href="tag7.html"/>
<area shape="poly" coords="439,177,423,160,404,170,398,202,411,233,452,267,476,219,483,175,474,156,452,153" href="tag1.html"/>
<area shape="poly" coords="598,206,567,189,552,211,557,238,609,289,643,221,636,191,611,179,592,199" href="tag4.html"/>
<area shape="poly" coords="539,88,515,82,503,104,510,133,527,147,558,165,578,175,593,100,588,81,573,68,550,73,546,90,54 8,104,540,93" href="tag13.html"/>
<area shape="poly" coords="630,30,622,65,654,139,705,93,714,67,711,36,693,23,671,38,654,14" href="tag2.html"/>
<area shape="poly" coords="767,105,762,89,735,83,718,95,710,115,716,138,720,162,724,183,749,180,768,172,790,163,808,153 ,812,137,803,115,787,102,764,108" href="tag11.html"/>
<area shape="poly" coords="943,153,930,145,906,143,892,155,892,172,894,189,906,200,923,217,939,224,952,234,964,241,982, 213,996,186,1003,165,998,143,987,129,965,126,948,137" href="tag9.html"/>
<area shape="poly" coords="404,86,397,73,374,72,365,89,375,109,385,136,429,119,434,101,421,86" href="tag10.html"/>
<area shape="poly" coords="856,36,832,22,816,39,815,69,839,99,881,128,903,97,913,69,917,43,906,22,885,11,868,23,860,39" href="tag6.html"/>
<area shape="poly" coords="1057,47,1037,30,1017,20,998,39,994,61,1002,84,1027,103,1051,128,1064,141,1083,119,1104,100,1 117,73,1113,41,1091,25,1072,25" href="tag14.html"/>
</map>


<?php
$heute=date("j");

$tag=1;
switch(true)
{
case($tag == $heute):
echo
break;
case($tag < $heute):
echo "früher";
break;
case($tag > $heute):
echo "später";
break;
}

So habe ich dann insgesamt 14 Tage erstellt.
Doch wie setze ich hinter echo die imagemap, damit stets zum richtigen Tag sich die richtige Datei öffnet ?

Ich danke euch im voraus für eure Hilfe.

[ArneDrews]

Hallo,

Ich habe leider nicht ganz verstanden, was Du am Ende vorhast?

Willst Du die gesamte Map ausgeben?
Lege die Map-Definition in eine Variable oder verwende HereDoc bzw. HereNow "Streaming".
Dann gibst Du die Variable einfach mit echo aus.

Willst Du den Link aus dem href öffnen aus der Image-Map?
Hier würde ich sagen, Deine Vorgehensweise ist von Grund auf suboptimal.


Aber vielleicht kannst Du mir ja mit einer etwas genaueren Erklärung helfen, Dir zu helfen?!


Gruß Arne

[Logan500]

Gerne erkläre ich es genauer.
Ich habe vor einen Osterkalender zu programmieren, so wie einen Adventskalender, nur halt für Ostern. Anstatt 24 Tage wollte ich ihn 14 Tage laufen lassen.

Ja, ich dachte, das ich so nur irgendwie den Imagemap Code eingeben müsste, damit sich die Türen automatisch öffnen und schließen. Doch habe ich inzwischen auch festgestellt, das dies so nicht die allerbeste Idee war.

Daher habe ich nachgedacht und es neu programmiert:


<img src="kalender1.png" width="1150" height="300" border="0" usemap="#kalender" />
<?php


$params = array(
array("coords" => "42,248,44,246,14,244,13,271,68,293,83,242,55,228", "href" => "tag5.html"),
array("coords" => "112,116,126,131,94,115,83,135,46,116,36,157,89,213,105,229,135,182,141,153,129,129", "href" => "tag8.html"),
array("coords" => "198,157,242,175,261,110,235,87,220,95,218,114,185,107,182,135", "href" => "tag3.html"),
array("coords" => "204,195,188,174,155,186,145,211,159,254,177,288,241,241,246,205,227,184,202,200", "href" => "tag12.html"),
array("coords" => "323,157,293,141,278,161,276,191,292,221,329,246,341,258,364,217,370,187,376,155,356,124,334,133,322 ,160,299,143", "href" => "tag7.html"),
array("coords" => "439,177,423,160,404,170,398,202,411,233,452,267,476,219,483,175,474,156,452,153", "href" => "tag1.html"),
array("coords" => "598,206,567,189,552,211,557,238,609,289,643,221,636,191,611,179,592,199", "href" => "tag4.html"),
array("coords" => "539,88,515,82,503,104,510,133,527,147,558,165,578,175,593,100,588,81,573,68,550,73,546,90,548,104,5 40,93", "href" => "tag13.html"),
array("coords" => "630,30,622,65,654,139,705,93,714,67,711,36,693,23,671,38,654,14", "href" => "tag2.html"),
array("coords" => "767,105,762,89,735,83,718,95,710,115,716,138,720,162,724,183,749,180,768,172,790,163,808,153,812,13 7,803,115,787,102,764,108", "href" => "tag11.html"),
array("coords" => "943,153,930,145,906,143,892,155,892,172,894,189,906,200,923,217,939,224,952,234,964,241,982,213,996 ,186,1003,165,998,143,987,129,965,126,948,137", "href" => "tag9.html"),
array("coords" => "404,86,397,73,374,72,365,89,375,109,385,136,429,119,434,101,421,86", "href" => "tag10.html"),
array("coords" => "856,36,832,22,816,39,815,69,839,99,881,128,903,97,913,69,917,43,906,22,885,11,868,23,860,39", "href" => "tag6.html"),
array("coords" => "1057,47,1037,30,1017,20,998,39,994,61,1002,84,1027,103,1051,128,1064,141,1083,119,1104,100,1117,73, 1113,41,1091,25,1072,25", "href" => "tag14.html")
);
?>

<map name="kalender">

</map>


Ich dachte mir, ich packe das jetzt in eine for Schleife.
Ungefähr so:
for ($i = 0; $i < count($params); $i++) {
$akttag = $i + 1;
if ($akttag <= $heute) {
$href = $params[i]["href"];
} else {
$href = "zufrueh.html";
}
echo '<area shape="poly" coords="' . $params[i]["coords"] . '" href="' . $href . '">' . "\n";
}

Doch wo setzte ich die Zeiten (Datum) ? Wie programmiere ich die Türen, das sie automatisch zum richtigen Zeitpunkt auf und zugehen ?

[wahsaga]

Mir ist immer noch unklar, was du eigentlich wissen willst …

Doch wo setzte ich die Zeiten (Datum) ?

Welche Zeiten? Wo? Für was?

Wie programmiere ich die Türen, das sie automatisch zum richtigen Zeitpunkt auf und zugehen ?

Wenn du willst, dass sich „in“ deinem Bild was ändert – dann musst du entweder das komplette Bild austauschen, oder ein Element mit dem richtigen Ausschnitt an der richtigen Stelle über dem Map-Bild platzieren.

[Logan500]

Mein Ziel ist, das sich am 14. März Tag 1. meines Imagemap öffnet, das heißt, wenn ich darauf klicke, man zu der html Seite von Tag 1 weiter geleitet wird.
Am 15. März lässt sich dann Tag 2 öffnen usw.

Das dies automatisch geschieht bekomme ich jedoch einfach nicht hin.
Und meine Frage ist daher, wie schaffe ich es, das sich an dem richtigen Tag die richtige Tür öffnet.

Danke für die Hilfe

[wahsaga]

Na dann fragst du halt einfach ab, ob das Datum der Tür kleinr gleich dem aktuellen ist – wenn ja, gibst du das <area> Element für dieses Datum aus, andernfalls nicht …

[Logan500]

In der Programmierung bin ich leider noch ein Anfänger.
Kannst Du mir bitte zeigen, wie das aussieht ?

Ich habe bisher nur Websiten angfertigt, auch mit Eingaben, die sich automatisch abspielen, das zu gewissen Uhrzeiten keiner da ist usw.
Doch stehe ich hier noch ein wenig im Wald.

Wie genau würde solch eine Abfrage aussehen hierfür ?

[wahsaga]

Schau dir als erstes die Datums- und Zeit-Funktionen von PHP an.

[ArneDrews]

Haben die Türchen auch Zahlen? Dann mach daraus doch einfach entsprechende Links, mit etwas CSS kriegst Du die auch über das ganze Türchen ausgebreitet. Server seitig musst Du dann halt nur noch prüfen, ob der Tag bereits geöffnet werden darf. Dafür gibt es die DateTime-Klasse in PHP.

Gruß Arne

[Logan500]

Ja, die Türchen haben zahlen, welche ich mit einer Image Map festgelegt habe.
Mit Zeiten habe ich noch nicht so viel gearbeitet.

date_default_timezone_set("Europe/Berlin");
$timestamp = time();
if (date("d") == 14 {
echo "Tür offen";
}



Zuerst wollte ich es auf diese Art uns weise festlegen, doch funktioniert das leider nicht.

[ArneDrews]

Ich kann Dir nachher mal ein kleines Beispiel erstellen, sobald ich etwas Luft habe.

[Logan500]

Das wäre ganz toll, vielen Dank !

[ArneDrews]

Sorry, hat etwas gedauert... Familienzwang...

Ich habe mal schnell eine Logik zusammengewürfelt, auf der man das aufbauen kann:

$sContentPattern = __DIR__ . '/day{d}.html';
$sMainPage = file_get_contents( __DIR__ . '/main.html' );

$aCalenderDoors = array_combine( range(1, 14), range(14, 27) );
$iDoorClicked = isset( $_GET['door'] )? (integer)$_GET['door']: null;


$oNow = new DateTime( null, new DateTimeZone('Europe/Berlin') );
$iRangeIdent = (integer)$oNow->format( 'ymd' );
$iTodayIdent = (integer)$oNow->format( 'd' );

$bIsValidRange = ( $iRangeIdent > 20160413 && $iRangeIdent < 20160428 );
$bIsValidDoor = ( !is_null($iDoorClicked) && $iTodayIdent === $aCalenderDoors[$iDoorClicked] );


$sContent = ( $bIsValidRange && $bIsValidDoor )? str_replace( '{d}', (string)$aCalenderDoors[$iDoorClicked], $sContentPattern ): 'default.html';
$sDocument = str_replace( '{#CONTENT#}', file_get_contents(__DIR__ . '/' . $sContent), $sMainPage );


echo $sDocument; 

Dazu erforderlich ist die Datei main.html mit dem Document-Wrapper:

<!DOCTYPE html>
<html>
<head>
<title>Osterkalender</title>
</head>

<body>

{#CONTENT#}

</body>
</html>

Was Du noch benötigst ist die default.html, die Deine Links darstellt:

<div class="ostern">
	<ul>
		<li><a href="./index.php?door=1" target="_self">1</a></li>
		<li><a href="./index.php?door=2" target="_self">2</a></li>
		<li><a href="./index.php?door=3" target="_self">3</a></li>
		<li><a href="./index.php?door=4" target="_self">4</a></li>
		<li><a href="./index.php?door=5" target="_self">5</a></li>
		<li><a href="./index.php?door=6" target="_self">6</a></li>
		<li><a href="./index.php?door=7" target="_self">7</a></li>
		<li><a href="./index.php?door=8" target="_self">8</a></li>
		<li><a href="./index.php?door=9" target="_self">9</a></li>
		<li><a href="./index.php?door=10" target="_self">10</a></li>
		<li><a href="./index.php?door=11" target="_self">11</a></li>
		<li><a href="./index.php?door=12" target="_self">12</a></li>
		<li><a href="./index.php?door=13" target="_self">13</a></li>
		<li><a href="./index.php?door=14" target="_self">14</a></li>
	</ul>
</div>

Naja und für den Rest benötigst Du nur noch pro Tag eine Datei ( day14.html bis day27.html ), die den jeweiligen Tages-Content beinhalten.
Den Rest macht das Script allein. Mit ein bisschen CSS kannste das auch schick machen.

Ein Beispiel findest Du hier: Osterkalender
Natürlich landen die Links immer wieder auf der Startseite, weil wir den 14. März ja noch nicht haben

[Logan500]

Wow, vielen Dank für die Hilfe.

Ich werde das gleich umsetzen, vielen Dank noch mals !