Zwischen Bildebenen wechseln

[tfp]

Hallo,

ganz sicher bin ich nicht, ob ich jetzt in der richtige Unterforum gepostet habe, falls ja bitte ich um Entschuldigung.

Ich möchte eine Karte mit verschiedenen Overlays anzeigen, die man auswählen kann.

Die einfachste Möglichkeit ist das ganze durch ein kleines Javascript zu realisieren z.B. so:

<table>  
<tr>  
<td>  
  
<img src="1.gif" name="image" alt="Karte">  
  
</td>  
<td>  
  
<input type="button" value="Grundkarte"  
  
onclick="document.image.src='1.gif'"><br>  
  
<input type="button" value="Ansicht1"  
  
onclick="document.image.src='2.gif'"><br>  
  
<input type="button" value="Ansicht2"  
  
onclick="document.image.src='3.gif'"><br>  
  
<input type="button" value="Alles"  
onclick="document.image.src='4.gif'">  
</td>  
</tr>  
</table>

Hierbei wird allerdings nur das Overlay vorgetäuscht, was das ganze ein wenig unflexibel macht - zudem passt mir aufgrund der Javascriptproblematik diese Lösung nicht ganz.

Zu einen wäre ja ein vorgaukeln durch html eine Lösung weg vom Javascript, aber das macht alles nicht gerade einfacher (ehr noch aufwendiger zu verändern), da ich mit sehr vielen Seiten arbeiten müsste.

Aber PHP sollte doch auch eine flexible Möglichkeit bieten das ganze zu realisieren. Leider habe ich aber dafür keine Infos in den weiten des Internets gefunden. Kann mir hier jemand weiterhelfen?

[LSpreee]

Ich möchte eine Karte mit verschiedenen Overlays anzeigen, die man auswählen kann.

Heisst das sowas wie Layer in einem GIS? Gehts um geographische Karten?
Frage dahinter: sind es rechteckige Images, die durchsichtige Bereiche haben (alpha-Kanal von gif?).

Soll man nur einzelnen Layer an/ausschalten oder auch die Reihenfolge ändern?

<img src="1.gif" name="image" alt="Karte">
<input type="button" value="Ansicht1"
onclick="document.image.src='2.gif'"><br>

Hierbei wird allerdings nur das Overlay vorgetäuscht, was das ganze ein wenig unflexibel macht.

Meinst Du, dass Du noch nicht wirklich Karten übereinander legst, sondern nur jeweils eines anzeigst? Das tust Du aktuell. Du kannst mehrere Bilder wirklich übereinander legen, indem du sie mittels CSS position:absolute formatierst. Es gibt da einen guten Artikel im Wiki.

• zudem passt mir aufgrund der Javascriptproblematik diese Lösung nicht ganz.

Nun, du musst dir überlegen, ob du das Klientseitig (JS) machst oder serverseitig (php). In letzterem Fall muss die Seite allerdings jedesmal einen Refresh absolvieren.

LG,
LSpreee

[tfp]

Hallo LSpree und vielen dank für Deine Antwort. Ja es sind im Grunde Geografische Karten, die einen Alphakanal haben, in meinem Javascripteispiel, das ehr eine Skizze wie es mal aussehen soll ist - als der Prototyp, habe ich erst mal keine reinen Overlays benutzt (ich wusste nicht wie das geht bzw. wie ich es anwenden sollte.

Ich wuerde eine PHP-haltige serverseitige Lösung bevorzugen, da dies mittlerweile ja keinen wirklich großen Aufwand mehr bedeutet.

[tfp]

Was ich noch vergessen habe zu schreiben, wenn man die einzelnen Layer ein und aus schalten könnte bzw. auch mehrere gleichzeit einschalten kann. (und Entschuldigung wegen des Doppelposts)

[LSpreee]

Wie sieht es damit aus....

  
<?php  
  
// define layers  
$Layers = array();  
$Layers["layerA"] = "1.gif";  
$Layers["layerB"] = "2.gif";  
$Layers["name_3"] = "3.gif";  
$Layers["usw__4"] = "4.gif";  
  
  
// evaluate form  
$ShowLayers = array();  
foreach($Layers as $LayerKey => $Layer){  
  
  if(isset($_POST[$LayerKey])){  
  
    if($_POST[$LayerKey]) == "show") $ShowLayers[] = $LayerKey;  
  
  } else $ShowLayers[] = $LayerKey;  
  
}  
  
  
// output layers  
foreach($ShowLayers as $LayerKey){  
  echo "<img src=".$Layers[$LayerKey]." class='maplayer' alt=".$LayerKey.">";  
}  
  
?>  

  
<form action="./" method="post">  
  
  <?php  
  foreach($Layers as $LayerKey => $Layer){  
    echo "<input type="checkbox" name="$LayerKey" value="show"> $LayerKey<br>  
  }  
  ?>  
  
  <input type="submit" value="Refresh Map">  
  
</form>  
  

Nicht vergessen in der CSS-Klasse maplayer mit position:relative zu positionieren.

LG,
LSpreee

[tfp]

vielen vielen dank für die gute Hilfe.

Leider bekomme ich es immer noch nicht ganz gebacken. Ich habe Deinen Code in eine standart-HTML-Datei gepackt, die am Anfang und am Ende noch die PHP-Tags ergänzt und im Header per CSS den Maplayer eingefügt, aber irgendwie will es dennoch nicht, hab ich was vergessen?

[LSpreee]

standart-HTML-Datei

(persönliches Anliegen) bitte, es heisst standard :)

(...)im Header per CSS den Maplayer eingefügt

was heisst das genau?

aber irgendwie will es dennoch nicht

was geschieht denn?

hab ich was vergessen?

• stimmen die Pfade, können die Bilder geladen werden.
• erscheint die Form
• werden die Formulardaten erkannt? Schreib doch mal ein
    var_dump($_POST); in den Code und klick auf absenden.
• wie sieht der Quelltext aus, wenn du die form absendest?
    erscheinen die <img> tags?

LG,
LSpreee

[tfp]

Hallo LSpreee,

es geschieht leider garnichts. Sobald ich die Datei aufrufe kommt ein weißes Bild auf dem Browser (ich habe die Datei auch mal ohne den Quelltext auf den Server geladen, da geht alles fehlerfrei).

Hier mal mein Quelltext:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">
<head>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Text">
<meta name="author" content="Kanexo">
 <meta name="keywords" content="HTML, Meta-Informationen,Suchprogramme, HTTP-Protokoll">
<meta name="date" content="2010-12-14T23:49:37+02:00">
<title>Titel</title>
<link href="Bob.css" rel="stylesheet" type="text/css">
 </head>
<body>
<div id="box" >
 <Ueberschrift>
Kanexo
 </Ueberschrift>
<br>
 <links>
<element style="position: relative; center: 40px;">
LINKS
</element>
 </links>
 <br>
 <br>
 <text>
<?php
// define layers
$Layers = array();
$Layers["layerA"] = "A.png";
$Layers["layerB"] = "B.png";
$Layers["layerC"] = "C.png";
$Layers["layerD"] = "D.png";
$Layers["layerE"] = "E.png";

// evaluate form
$ShowLayers = array();
foreach($Layers as $LayerKey => $Layer){

if(isset($_POST[$LayerKey])){

if($_POST[$LayerKey]) == "show") $ShowLayers[] = $LayerKey;

} else $ShowLayers[] = $LayerKey;

}

// output layers
foreach($ShowLayers as $LayerKey){
  echo "<img src=".$Layers[$LayerKey]." class='text' alt=".$LayerKey.">";
}

?>

<form action="./" method="post">

foreach($Layers as $LayerKey => $Layer){
    echo "<input type="checkbox" name="$LayerKey" value="show"> $LayerKey<br>
  }
  ?>
  <input type="submit" value="Refresh Map">
  <?php
</form>
</text>
<br>
 <br>
<br>
<unten>
<p align="center">
Text Unten
 <p>
</unten>
</div>
</body>
 </html>