Hi @all...
ein Neuling ist unter euch... Vor ca. 4 Wochen habe ich angefangen mich mit dem Thema der Homepage Erstellung zu beschäftigen und bin soweit eigentlich auch sehr zufrieden mit den Ergebnissen. http://www.weltraum-visionen.de
Vor allem auch Dank dieses Forums, wo ich seit dieser Zeit begeisterter Leser bin. Die ersten rudimentären Kenntnisse in Sachen HTML, CSS und nun Javascript sind nun vorhanden, zumindest wenn es um das Verständniss geht. Allerdings fehlt mir nach der kurzen Zeit leider manchmal immer noch die richtige Synthax um das gewünschte Ergebniss zu erzielen.
Diesmal versuche ich gerade mit Javascript zu spielen. Die Codeschnipsel dafür habe ich mir aus diversen Foren zusammen gelesen, kopiert und leicht individuell angepasst. In Summe funktioniert es sogar wie gewünscht, aber halt noch nicht gaaaanz exakt wie gewollt.
Also:
Ziel ist ein ausklappender Hintergrund für das Textfeld auf der Startseite, obwohl das Script auch auf andere Elemente anwendbar wäre. Das Script soll bei onMousover eines Bildes auf der Seite mit einem implementierten Link erfolgen. Dazu habe ich erstmal im CSS das <div> deklariert:
<style type="text/css">
#box {
display:block;
position:relative; top:10px; left:10px;
height:240px;
width:200px;
background-image:url("file:///C:/Programme/NetObjects/NetObjects Fusion 10.0/User Sites/CSSTest/Assets/grey2.gif");
background-repeat:no-repeat;
background-position:top center;
overflow:hidden;
border:0px solid #999999;
padding-left:20px;
padding-right:20px;
padding-top:5px;
z-index:1;
}
</style>
Die ID "box" habe ich dem Textfeld zugewiesen. Anschliessend nun das Javascript für das ausklappen des Hintergrundes (wobei ja eigentlich das ganze Textfeld aufgeklappt wird und nicht nur der Hintergrund):
<script type="text/javascript">
var pixel = 0;
function test() {
var elem = document.getElementById("box").style;
elem.height = pixel ;
pixel = pixel + 4;
if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...
clearInterval(neu);
}
}
window.onload = function() { neu = window.setInterval("test()", 20) };
</script>
Das ist eigentlich schon alles an Code bisher und es funktioniert auch wunderbar. Aber: Ich möchte das script nicht beim laden der Seite ausführen. Ich habe 5 Infotexte, die ich per onMouseOver einbelnden möchte mit diesem Script. Und eigentlich bei onMouseOut auch wieder ausblenden. Alles in demselben Textobjekt.
Für das wechelsen des Textes werde ich mit .innerHTML arbeiten und das funtioniert auf der Startseite auch bereits.
Für das ausblenden werde ich das Script einfach kopieren und statt + mit -px ausstatten. Aber wie muss ich nun obiges Script abändern, das es sozusagen "in Bereitschaft ist" beim laden der Seite und erst bei onMouseOver startet?
Meine Fragen zu obigem Code sind somit nun folgende:
a) wie muss obiges Script richtig abgeschlossen/verändert werden, das es in Bereitschaft ist mit laden der Seite und
b) wie rufe ich anschliessend im Link die Funktion korrekt auf?
c) wie verkette ich die einezlenen Anweisungen bei onMouseover? (.innerHTML Text wechseln UND Aufruf der Funktion zum aufklappen)?
d) Kann ich zwei onMouseOver-Events aufmachen und zwei onMouseOut-Events in einem Link die chronologisch abgearbeitet werden?
e) es hat bei mir noch nicht wirklich "Klick" gemacht, wann ich in Anweisungen Bereiche mit ' ' oder mit " " einschliesse.
Die Funktionen und Abläufe kann ich im Regelfall grundsätzlich nachvollziehen, egal ob hier, CSS oder HTML... Aber wenn man neu dabei ist, fehlt einem halt ab und zu die richtige Synthax... Das ganze entwickelt sich halt gerade zu einem neuen Hobby.
In der Hoffnung auf kompetente Hilfe... Gruss Mac