nicht angemeldet
Hilfe 2 Fragen
Hallo
Das ist der Quell Text meiner Seite.
<html>
<head>
<style type="text/css">
<!--
#Aufbau {
position:absolute; top:20%; left:45%; width:90px; height:50px;
font-family:'Arial'; font-size:36px;
color:#000000;z-index:1;
}
#Aufbau1 {
position:absolute; top:27%; left:45%; width:90px; height:50px;
font-family:'Arial'; font-size:12px;
color:#000000;z-index:1;
}
#Link {
position:absolute; top:34%; left:10%; width:90px; height:50px;
font-family:'Arial'; font-size:12px;
color:#000000;z-index:2;
}
#Forum {
position:absolute; top:24%; left:10%; width:90px; height:50px;
z-index:2;
}
#Counter {
position:absolute; top:90%; left:2%; width:90px; height:50px;
}
#Gästebuch {
position:absolute; top:44%; left:10%; width:300px; height:50px;
z-index:2;
}
#Ver {
position:absolute; top:90%; left:45%; width:300px; height:50px;
font-family:'Arial'; font-size:12px;
color:#000000;z-index:1;
}
#links {
position:absolute; top:14%; left:10%; width:300px; height:50px;
font-family:'Arial'; font-size:12px;
color:#000000;
z-index:2;
}
#maillink {
position:absolute; top:54%; left:10%; width:90px; height:50px;
z-index:2;
}
#Button1 {
position:absolute; top:40%; left:3%; width:90px; height:50px;
z-index:1;
}
#Button2 {
position:absolute; top:10%; left:3%; width:90px; height:50px;
}
#Button3 {
position:absolute; top:20%; left:3%; width:90px; height:50px;
z-index:1;
}
#Button4 {
position:absolute; top:30%; left:3%; width:90px; height:50px;
}
#Button5 {
position:absolute; top:50%; left:3%; width:90px; height:50px;
z-index:1;
}
-->
</style>
<title>Home</title>
<meta name="author" content="Kai">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<script type="text/javascript">
standart1 = new Image();
standart1.src = "bild1.jpg";
mouseover1 = new Image();
mouseover1.src = "bild2.jpg";
function change(nummer,object) {
window.document.images[nummer].src = object.src;
}
</script>
<div id="Aufbau">Hallo</div>
<div id="Aufbau1">Diese Seite ist noch im Aufbau!</div>
<div id="link"><a href="umfrage.html">Umfrage</a></div>
<div id="Ver"><u>Ich bin nicht für die Inhalte dieser Seite verandwortlich!</u></div>
<div id="Gästebuch"><a href="http://www.voteonline5.de/book/book.cgi?Seite1&id=57564" onClick='window.open("","clickvote","width=488,height=500,scrollbars=yes,resizable=yes,menubar=no");' target="clickvote">Gästebuch</a></div>
<div id="Counter"><!--Anfang VoteOnline Counter ID=53853--><SCRIPT LANGUAGE="JavaScript">var design=10;var idi=53853; idl=30; dfg=38;</script><script language="JavaScript" src="http://www.voteonline3.de/cgi-real/realcount" type="text/javascript"></script><!--Ende VoteOnline Counter ID=53853--></div>
<div id="Forum"><a href="http://www.voteonline5.de/forum/show.pl?site=24226">Forum</a></div>
<div id="links"><s>Links</s></div>
<div id="maillink"><a href="impressum.html">Mail Me</a></div>
<div id="Button1"><img src="buttonop.gif" width="144" height="52" border="0" alt=""></div>
<div id="Button2"><img src="buttonop.gif" width="144" height="52" border="0" alt=""></div>
<div id="Button3"><img src="buttonop.gif" width="144" height="52" border="0" alt=""></div>
<div id="Button4"><img src="buttonop.gif" width="144" height="52" border="0" alt=""></div>
<div id="Button5"><img src="buttonop.gif" width="144" height="52" border="0" alt=""></div>
<body text="#000000" bgcolor="#FFFFFF" link="#000000" alink="#000000" vlink="#1F00FF">
<a href="http://www.w3c.org/" onMouseOver="change(0,mouseover1)" onMouseOut="change(0,standart1)">
<img src="bild1.jpg" border="0" alt="Home">
</a>
</body>
</html>
Ich wollte einen mous Over machen aber kriege es nicht hin.
Ich kann es nicht verschieben.
meine 2 Frage ist bei CSS ist das ja so wenn man Top:30px; angibt dann íst der Take 30 px von oben endvernd aber wie sieht es bei Java Script aus wie sind da die befehle für so was.
Mec
-
Hallo
Das ist der Quell Text meiner Seite.Ich wollte einen mous Over machen aber kriege es nicht hin.
Ich kann es nicht verschieben.Das MouseOver Beispiel aus SelfHTML:
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm#quelltextGENAU so implementieren.
meine 2 Frage ist bei CSS ist das ja so wenn man Top:30px; angibt dann íst der Take 30 px von oben endvernd aber wie sieht es bei Java Script aus wie sind da die befehle für so was.
Ich verstehe nicht genau, was du machen willst.
Falls du mit Hilfe von Javascript Ränder definieren willst (oder allgemein CSS-Attribute), dann geht das so:
document.getElementById("Aufbau").style.top = "30px";
Das funktioniert halt nicht mit Browsern der 4. Generation und darunter, was aber nicht stören sollte.
Kai
-
Hallo
Es klappt immer noch nicht aber danke das du es
fersucht hast ich glaube ich gebe es auf mir eine seite zu bauen :-(-
Hallo
Es klappt immer noch nicht aber danke das du es
fersucht hast ich glaube ich gebe es auf mir eine seite zu bauen :-(Nicht so schnell die Flinte ins Korn werfen, es ist noch kein Meister vom Himmel gefallen!
Hier ein paar Tipps:
Lagere dein Stylesheet in eine separate Datei aus und binde es mit folgendem HTML-Tag im Header ein:<link rel="stylesheet" type="text/css" href="style.css">
Das macht den Code übersichtlicher!
Bilder evtl. in ein Extra-Verzeichnis (z.B. img).
Das macht einen aufgeräumteren Eindruck des Verzeichnisses.
Den JavaScript als HTML-Kommentar kennzeichnen:
(Es ist zwar kein Fehler, aber Browser, die kein JS unterstützen zeigen den Code sonst an!)<script type="text/javascript">
<!--
/* Hier steht der JavaScript Code */
//-->
</script>Zum MouseOver Button-Effekt:
Du musst ALLE benutzten Bilder für die Knöpfe definieren (aktiv, inaktiv, pressed):
(pressed nur, wenn du eine Änderung bei onClick machen willst)Startseite_inaktiv = new Image();
Startseite_inaktiv.src = "img/nav_inakt_startseite.png";
Startseite_aktiv = new Image();
Startseite_aktiv.src = "img/nav_akt_startseite.png";
Startseite_pressed = new Image();
Startseite_pressed.src = "img/nav_pressed_startseite.png";News_inaktiv = new Image();
News_inaktiv.src = "img/nav_inakt_news.png";
News_aktiv = new Image();
News_aktiv.src = "img/nav_akt_news.png";
News_pressed = new Image();
News_pressed.src = "img/nav_pressed_news.png";[...usw...]
Dann die Funktion swap:
function swap(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}Aufruf für einen Knopf:
<a href="start.html" onFocus="if(this.blur)this.blur()"
onClick="Bildwechsel(1,Startseite_pressed)"
onMouseOver="Bildwechsel(1,Startseite_aktiv)"
onMouseOut ="Bildwechsel(1,Startseite_inaktiv)">
<img src="img/nav_inakt_startseite.png" width=137 height=30 border=0 alt="Startseite"></a>Die 1 kann evtl auch 2 oder 3 oder... sein.
Für den zweiten Knopf:
<a href="news.html" onFocus="if(this.blur)this.blur()"
onClick="Bildwechsel(2,News_pressed)"
onMouseOver="Bildwechsel(2,News_aktiv)"
onMouseOut ="Bildwechsel(2,News_inaktiv)">
<img src="img/nav_inakt_news.png" width=137 height=30 border=0 alt="News"></a>Das mit den Zahlen musst du probieren. Die Bilder werden vom Browser einfach nach vorkommen durchnummeriert (ein evtl. vorhandener, vor deinen Knopfbildern definierter Hintergrund wird mitgezählt!).
Das onFocus mit blur verhindert, dass wenn ein grafischer Knopf den Fokus erhält, er einen Rand bekommt. Falls eine Navigation über Tastatur mit Tabulatoren möglich sein soll, diesen Teil auch weglassen. Ist reine Ästhethik.
Hoffe, das hilft...
Kai-
Kleine Berichtigung:
In den onClick, on MouseOver, etc. muss die aufzurufende Funktion natürlich swap und nicht Bildwechsel heißen. ;-)
Kai
-
-
-