nicht angemeldet
dynamische webseitenanpassen mit knöpfen
Hallo,
habe leider überhaupt keine ahnung von css und javascript, und habe daher versucht mir die notwendigsten dinge aus vorhandenen quellcodes zusammenzustoppeln. Das haut aber leider nicht so ganz hin.
Das Problem ist, dass ich eine dynamisch anpassbare bildschirmhintergrund grafik haben möchte, auf der Knöpfe sein sollen. Wenn ich jetzt über einen Knopf mit cem curser drüber fahre ändert sich der darüberliegende knopf zum "gedrückt status", und nicht der auf den der curser zeigt.
Einzeln funktioniert das das mit den Knöpfen, aber als ich den code für dynamische bildschirmanpassung dazu "integriert" habe ist das problem aufgekommen.
Vielleicht könnt ihr mir ja sagen woran das liegt?
Quellcode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Menue </title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "Neuigkeitenunge.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "Neuigkeitenge.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "Gaestebuchunge.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "Gaestebuchge.gif"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "Fotosunge.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "Fotosge.gif"; /* dritte Highlight-Grafik */
Normal4 = new Image();
Normal4.src = "Speisekarteunge.gif"; /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "Speisekartege.gif"; /* vierte Highlight-Grafik */
Normal5 = new Image();
Normal5.src = "Veranstaltungenunge.gif"; /* 5 Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "Veranstaltungenge.gif"; /* 5 Highlight-Grafik */
Normal6 = new Image();
Normal6.src = "Oeffnungszeitenunge.gif"; /* 6 Standard-Grafik */
Highlight6 = new Image();
Highlight6.src = "Oeffnungszeitenge.gif"; /* 6 Highlight-Grafik */
Normal7 = new Image();
Normal7.src = "Kontaktunge.gif"; /* 7 Standard-Grafik */
Highlight7 = new Image();
Highlight7.src = "Kontaktge.gif"; /* 7 Highlight-Grafik */
function Bildwechsel (Bildnr, Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
</script>
<style type="text/css">
* { margin: 0;
padding: 0;}
/* Höhen- und Breiten 100% anpassen; Scrollbar ausblenden */
body, html{ width: 100%;
height: 100%;
overflow: hidden;}
/* Hintergrundbild auf unterste Ebene anordnen */
#bgImg{ position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1;}
/* Body-Dummy absolut über Hintergrundbild legen; Scrollbar automatisch einblenden */
#bodyDiv{ position: absolute;
top: 10;
left: 0;
z-index: 2;
overflow: auto;
width: 100%;
height: 100%;
/*text-align: center;*/}
</style>
</head>
<body>
<img id="bgImg" src="navilinks.jpg" width="100%" height="100%" width="100%" height="100%">
<div id="bodyDiv">
<table border="1" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="Neuigkeitenunge.gif" border="0" alt="Neuigkeiten"></a><br>
<br>
<a href="..." target="Startseite"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="Gaestebuchunge.gif" border="0" alt="Gaestebuch"></a><br>
<br>
<a href="\Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="Fotosunge.gif" border="0" alt="Fotos"></a><br>
<br>
<a href="/Speisekarte.htm" target="Startseite"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img src="Speisekarteunge.gif" border="0" alt="Speisekarte"></a><br>
<br>
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(4, Highlight5)"
onmouseout="Bildwechsel(4, Normal5)"><img src="Veranstaltungenunge.gif" border="0" alt="Termine"></a><br>
<br>
<a href="/Startseite.htm" target="Startseite"
onmouseover="Bildwechsel(5, Highlight6)"
onmouseout="Bildwechsel(5, Normal6)"><img src="Oeffnungszeitenunge.gif" border="0" alt="Oeffnungszeit"></a><br>
<br>
<a href="/Kontakt.htm" target="Startseite"
onmouseover="Bildwechsel(6, Highlight7)"
onmouseout="Bildwechsel(6, Normal7)"><img src="Kontaktunge.gif" border="0" alt="Kontakt"></a><br>
<br>
</td>
</table>
</div>
</body>
</html>
-
guten Abend
Das Problem ist, dass ich eine dynamisch anpassbare bildschirmhintergrund grafik haben möchte
Dafür brauchst du kein JavaScript, das geht mit CSS alleine. Irgendwo habe ich eine Demo rumfliegen, ich such sie eben raus, Moment.
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(-
Demo gefunden.
Irgendwo habe ich eine Demo rumfliegen
Die Seite hab' ich mal für nen Freund zusammengestümpert, der das erst auch mit JavaScript machen wollte...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Zwei Hintergruende</title> <link rel="stylesheet" type="text/css" href="./layout.css"> <!--[if lt IE 8 ]> <link href="./ie.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <ul class="navigations_liste"> <li><a href="#" class="navii_a" id="nav_aes" ><span class="alttext">Abenteuer- und Erlebnis-Sport</span></a></li> <li><a href="#" class="navii_a" id="nav_uel" ><span class="alttext">Uebungsleiter </span></a></li> <li><a href="#" class="navii_a" id="nav_nawo"><span class="alttext">naechste Woche </span></a></li> <li><a href="#" class="navii_a" id="nav_gal" ><span class="alttext">Bilder-Gallerie </span></a></li> <li><a href="#" class="navii_a" id="nav_fusa"><span class="alttext">Fundsache </span></a></li> <li><a href="#" class="navii_a" id="nav_imp" ><span class="alttext">Impressum und Kontakt </span></a></li> </ul> </body> </html>layout.css
ul.navigations_liste { padding-top: 0px; padding-left: 0px; marging: 0px; position: absolute; left: 0px; Top: 150px; list-style-type:none; z-index:100; } .navii_a { width: 180px; height: 60px; display:block; text-decoration:none; } span.alttext { visibility:hidden; text-decoration:none; } #nav_aes { background-image:url(./grafics/button1a.png); } #nav_aes:hover { background-image:url(./grafics/button1b.png); } #nav_uel { background-image:url(./grafics/button2a.png); } #nav_uel:hover { background-image:url(./grafics/button2b.png); } #nav_nawo { background-image:url(./grafics/button3a.png); } #nav_nawo:hover { background-image:url(./grafics/button3b.png); } #nav_gal { background-image:url(./grafics/button4a.png); } #nav_gal:hover { background-image:url(./grafics/button4b.png); } #nav_fusa { background-image:url(./grafics/button5a.png); } #nav_fusa:hover { background-image:url(./grafics/button5b.png); } #nav_imp { background-image:url(./grafics/button6a.png); } #nav_imp:hover { background-image:url(./grafics/button6b.png); }Also die Positionierung etc. hat natürlich nichts mit der ganzen Sache zu tun. Der Punkt ist mit Pseudoklassen und Hintergrundgrafiken sowie Blockelementen kannst du das ganze bauen.
Die "alttext"-Elemente dienen der Barrierearmut, damit Sehbehinderte und Benutzer mit Textbrowsern da noch irgendwas wahrnehmen (wobei Textbrowser es ggf. auch ausblenden).
Im Code-Zusammenstückeln hast du schon Erfahrung, also schau was du damit anfangen kannst ansonsten bietet das CSS-Kapitel hier auf selfhtml.org alle Informationen die du brauchst. Wie gesagt die Stichworte lauten:
Pseudoklasse(n)
Hintergrundgrafik (oder background-image)
und Blockelement (oder display:block)--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(-
danke!
Werd ich mir gleich mal anschauen.-
is zwar ganz nett, aber das eigentliche problem liegt ja daran, dass ich auf den Hintergrund grafiken ( in meinem fall Knöpfe) draufsetze. Wenn ich mit dem curser über den Knopf drüber fahre, soll er als gedrückt erscheinen. - Funktioniert solange bis ich das dynamische anpassungs script dazu geben.
Wenn ich dann mit dem curser über einen Knopf drüber fahre, erscheint der darüberliegende Knopf als gedrückt, und nicht der auf den der curser zeigt.
Also passt das javascript( sorgt dafür, das wenn man mit dem curser über den knopf fährt, dass er gedrückt erscheint) und das css script( sorgt dafür das die seite dynamisch angepasst wird) nicht zusammen.
Da ist irgendwo ein hund drinnen und ich hab keine ahnung wo.-
korrektur, habs kappiert....
-
-
-
-