Hallo zusammen!
Ich hab auf der Homepage für ein Openair eines Kollegen eine Inforamtionsseite gestaltet. Dabei habe ich mit HTML/JavaScript so ein <div> - Bereich gemacht der beim Überfahren mit dem Maus erscheint und die gewünschten Informationen enthält. Das Problem ist jetz dieses, dass dieses Fensterchen so irgendwie halbtranspararent wird. Wie bring ich das mit CSS oder auch HTML weg? Wie kann ich das 'undurchsichtig' machen?
Hier der Link: ***
Danke
saemi
Ich hab auf der Homepage für ein Openair eines Kollegen eine Inforamtionsseite gestaltet. Dabei habe ich mit HTML/JavaScript so ein <div> - Bereich gemacht der beim Überfahren mit dem Maus erscheint und die gewünschten Informationen enthält. Das Problem ist jetz dieses, dass dieses Fensterchen so irgendwie halbtranspararent wird. Wie bring ich das mit CSS oder auch HTML weg? Wie kann ich das 'undurchsichtig' machen?
Hier der Link: ***
Code:
<script>
<!--
var m_x;
var m_y;
function mausbewegt(e) {
e = (e) ? e : ((window.event) ? window.event : "");
if(document.all) {
m_x = e.x+document.body.scrollLeft ;
m_y= e.y+document.body.scrollTop;
} else {
m_x = e.clientX+window.pageXOffset;
m_y= e.clientY+window.pageYOffset;
}
}
document.onmousemove = mausbewegt;
function hidetooltip() {
timeout=window.setTimeout('hidetooltip2()', 250);
}
function hidetooltip2() {
timeout=false;
document.getElementById('tooltip').style.visibility = 'hidden';
}
var timeout = false;
function showtooltip(inhalt) {
try {
window.clearTimeout(timeout);
} catch(e) {};
document.getElementById('tooltip').innerHTML=inhalt;
document.getElementById('tooltip').style.visibility = 'visible';
document.getElementById('tooltip').style.left=m_x;
document.getElementById('tooltip').style.top=m_y;
}
-->
</script>
<div id="tooltip" style="width: 250px; line-height:1.5em; font-family:'Verdana'; text-align: left; position: absolute; color:#000000; visibility: hidden; background-color:#A74909; border-color:black; border-style:solid; border-width:1px; padding:5px; margin:2px;" onmouseover="window.clearTimeout(timeout);timeout=false;" onmouseout="hidetooltip()"> </div>
<div style="z-index:1; display:inline; position:absolute; top:322px; left:218px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Wo viele Leute sind ist auch viel Abfall. Beim Eingang sind Abfallsäcke gratis abzuholen und wer am Ende des Festivals ein voller Abfallsack zurückbringt, erhält ein Erfrischungsgetränk!')">Abfall</div>
<div style="z-index:2; display:inline; position:absolute; top:32px; left:408px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Anreise mit den öffentlichen Verkehrsmitteln bis zum Bahnhof Amriswil. Von dort aus verkehrt ein Shuttlebus bis zum Gelände. Mehr unter [Anfahrt]')">Anfahrt</div>
<div style="z-index:3; display:inline; position:absolute; top:253px; left:154px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Kein Alkohol an unter 16 Jährige. Keine Spirituosen an unter 18 Jährige. Im Zweifelsfall wird der Ausweis (ID) verlangt.')">Alkohol</div>
<div style="z-index:4; display:inline; position:absolute; top:396px; left:320px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Unter dem offiziellen Namen AuenAir’08 besteht ein Verein im Sinne von Art. 60 ff. ZGB. Für die Verbindlichkeiten des Vereins haftet ausschliesslich dessen Vermögen. Bei Bedarf kann Einsicht in die Statuten verlangt werden.')">AuenAir'08</div>
<div style="z-index:5; display:inline; position:absolute; top:337px; left:368px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Das Gelände ist ab dem 20 Juni ab 16.00 Uhr geöffnet. Der Zeltplatz wird schon um 12.00 geöffnet.')">Datum und Einlass</div>
<div style="z-index:6; display:inline; position:absolute; top:52px; left:128px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Das Ticket kostet für zwei Tage 35 Fr; für einen Tag 25 Fr, exklusiv Zeltplatz für 5 Fr. Mehr unter [Ticket]')">Eintrittspreis</div>
<div style="z-index:7; display:inline; position:absolute; top:201px; left:299px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Auf dem Gelände werden zahlreiche Getränke verkauft. Auch für den Hunger ist gesorgt: An den zahlreichen Verkaufsständen bekommst du genug zu essen. Am Morgen steht der Milch-Wagen bereit und bietet dir ein gutes Frühstück an.')">Food and Drinks</div>
<div style="z-index:8; display:inline; position:absolute; top:194px; left:66px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Auf dem Gelände befindet sich ein Infostand, wo du entweder gefundene Sachen abgeben oder verlorene Sachen zurückholen kannst.')">Fundsachen</div>
<div style="z-index:9; display:inline; position:absolute; top:132px; left:465px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Wir bitten alle Besucher, genügend Rücksicht auf Anwohner zu nehmen. Wir verfügen über das Recht, auffällige Personen der Polizei zu melden. Öffnungszeiten und weitere Infos unter [Gelände]')">Gelände</div>
<div style="z-index:10; display:inline; position:absolute; top:374px; left:33px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Auf dem ganzen Gelände ist Glas strikte verboten. Auch Dosen sind nicht erlaubt. Eingangskontrolle!')">Glas und Dosen</div>
<div style="z-index:11; display:inline; position:absolute; top:132px; left:186px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Die Organisatoren übernehmen keinerlei Haftung, ob Sach-, Personen- oder anderem Schaden.')">Haftung</div>
<div style="z-index:12; display:inline; position:absolute; top:111px; left:30px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Allerlei Informationen über das Openair sowie Shop für Bandartikel. Hier befindet sich ebenfalls ein Fundbüro.')">Infostand</div>
<div style="z-index:13; display:inline; position:absolute; top:98px; left:343px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Es befinden sich keine Parkplätze in unmittelbarer Umgebung. Falls dringend notwendig, so nimm doch Kontakt mit uns auf!')">Parkplätze</div>
<div style="z-index:14; display:inline; position:absolute; top:21px; left:65px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Das Mitbringen von Tieren ist auf dem ganzen Gelände sowie auf dem Zeltplatz verboten. Im Interesse des Menschen und des Tieres.')">Tiere</div>
<div style="z-index:15; display:inline; position:absolute; top:312px; left:45px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Auf die Umwelt wird Rücksicht genommen.')">Umwelt</div>
<div style="z-index:16; display:inline; position:absolute; top:265px; left:330px; font-size:20px; font-family:'Verdana';" onmouseout="hidetooltip()" onmouseover="showtooltip('Jeder Besucher ist für seine Versicherung selbst verantwortlich.')">Versicherung</div>Danke
saemi
