Grafik nahtlos mit CSS mouseover nach PHP-Abfrage
Thomas H.
- css
Hallo!
Ich hoffe hier kann mir einer helfen. Hab unmengen an Forums durchgegraben und nichts passendes gefunden. Wie man mit CSS Grafiken nahtlos aneinanderfügt ist mir klar. Nur mit PHP und CSS mouseover-Effekt habe ich bisher noch keine Lösung gefunden.
Zum Eigentlichen: Ich erstelle eine Art Belegungsplan für Fahrzeuge. Oben erscheinen die Wochentage und links in den Zeilen das jeweilige Fahrzeug. Der Zeitraum, in dem ein Fahrzeug belegt ist wird mit einem roten Balken versehen. Realisiert habe ich das mittels einer Abfrage in PHP und zwei Grafiken (ein rotes und ein weißes Stückchen vom Balken). Über PHP frage ich nun ab, ob belegt, wenn ja, roten Abschnitt einfügen, wenn nein, weißen Abschnitt einfügen.
Die Abfrage:
***
while($laeuferTag < $letzterTaginAnsicht){
$Arbeitszeitbeginn = 21600;
$Arbeitszeitende = 61200;
$laeuferZeit = $Arbeitszeitbeginn;
while($laeuferZeit < $Arbeitszeitende){
if (($laeuferTag + $laeuferZeit) >= $anfangDatumZeitReserv && ($laeuferTag + $laeuferZeit) < $endeDatumZeitReserv){
echo "<img src='/gfx/balken_rot.gif'>";
}else{
echo "<img src='/gfx/balken_weiß.gif'>";
}***
Das funktioniert einwandfrei und wird richtig dargestellt. Den Balken möchte ich nun mit einem CSS mouseover-Effekt versehen, der nach Aktivieren weitere Informationen zur Belegung darstellt. Nur erscheinen die Abschnitte nicht nahtlos, sondern mit einem Abstand. Die Infobox wird korrekt mit Inhalt angezeigt. Viele Lösungsvorschläge in den Foren habe ich ausprobiert, funktionierten aber nicht wirklich.
Die CSS-Definiton:
***
a.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
a.infobox:hover { cursor:help; color:#c30; background:white; }
a.infobox span { visibility:hidden; position:absolute; padding:0px; text-decoration:none; }
***
Ich hoffe mir kann diesbezüglich jemand helfen. Wenn jemand eine bessere Lösung (z. B. ohne Grafiken) hat und hierzu eine Alternative hat, wäre ich auch sehr dankbar!!
Schon mal im voraus besten Dank!!!
Gruss
Thomas
Wie die Grafik erstellt wird nützt als Information leider wenig. Hilfreicher wäre ein Ausschnitt aus dem HTML-Quelltext, dann kann man sehen was sich machen lässt. An welcher Stelle nämlich dein Link auftaucht ist für mich jetzt nicht ersichtlich.
Vielleicht hilft es aber als zusätzliche Vorschrift padding: 0 und margin: 0 deiner Infobox zuzuweisen. Für alles weitere bitte ein wenig HTML.
Hallo!
Wie die Grafik erstellt wird nützt als Information leider wenig. Hilfreicher wäre ein Ausschnitt aus dem HTML-Quelltext, dann kann man sehen was sich machen lässt. An welcher Stelle nämlich dein Link auftaucht ist für mich jetzt nicht ersichtlich.
Du hast recht! Anbei der Abschnitt mit dem Link:
while($laeuferTag < $letzterTaginAnsicht){
$Arbeitszeitbeginn = 21600;
$Arbeitszeitende = 61200;
$laeuferZeit = $Arbeitszeitbeginn;
while($laeuferZeit < $Arbeitszeitende){
if (($laeuferTag + $laeuferZeit) >= $anfangDatumZeitReserv && ($laeuferTag + $laeuferZeit) < $endeDatumZeitReserv){
?>
<a class="infobox_kalender" href="#INFO"><?echo "<img src='/gfx/balken_rot.gif'>";?>
<span><h1 class="infobox">Reservierungsinfos</h1>
<table class="infobox_kalender" border='0' cellpadding='0' cellspacing='0'>
<tr><th class="infobox_kalender">Reservierungs-ID</td><td><?=$IDreservierung;?></td>
<tr><th class="infobox_kalender">Mitarbeiter-Nr.</td><td><?=$mitarbeiternr;?></td>
<tr><th class="infobox_kalender">Zielort</td><td><?=$zielort;?></td>
<tr><th class="infobox_kalender">Mitarbeiter-Nr.</td><td><?=$mitarbeiternr;?></td>
<tr><th class="infobox_kalender">Beginn:</td><td><?=$anfangdatum;?></td>
<tr><th class="infobox_kalender"></td><td><?=$anfangzeit;?></td>
<tr><th class="infobox_kalender">Ende:</td><td><?=$endedatum;?></td>
<tr><th class="infobox_kalender"></td><td><?=$endezeit;?></td>
</table>
</span>
</a><?
}else{
echo "<img src='/gfx/balken_weiß.gif'>";
}
$laeuferZeit = $laeuferZeit + 1800;
}
$laeuferTag = $laeuferTag + 86400;
}
Ich hoffe der Code-Abschnitt reicht!?
Der Abschnitt entsteht doch, wenn zwischen den Grafiken ein Leerzeichen oder Zeilenumbruch ist. Kann es sein, dass PHP automatisch durch die Abfrage Leerzeichen einfügt? Der Link zum Ergebnis http://ecarpool.meinkleinesdorf.de/kalender2.php der auf einen Blick mein Problem erläutert!
Vielleicht hilft es aber als zusätzliche Vorschrift padding: 0 und margin: 0 deiner Infobox zuzuweisen. Für alles weitere bitte ein wenig HTML.»»
Das hilft leider nicht. Der Balken wird nach wie vor mit lauter kleinen Abschnitten dargestellt.
Schon mal im voraus Danke!!
Gruß
Thomas