Display von Div-Elementen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adressat
anzeigen
attribut
benutzen
bestimmte elemente
code
container
demonstration
display
element
form
frage
http
klasse
probier
quatsch
test
url
vergeben
versorgen
-
Hallo. Ich bin noch nicht so JavaSCRIPT erfahren. Eigentlich gar nicht. Ich hab bisher immer nur mit onMousehover, -click u.Ä. gearbeitet. Nun möchte ich eine DIV-Box anzeigen, wenn man mit der Maus über einen Link geht. Bisher ging das immer mit einem "this.style..." oder bei anderen Objekten wie Bildern "name.style...". Nun funktioniert das aber bei der divbox so nicht. Ich gebe der
einen Namen und schreibe dann in den link-tag<div name=test style=visibility:hidden;>
onMouseover="test.style.visibility='visible';"
Allerdings passiert nichts. Müsste ich dafür irgendeine Funktion in den Header schreiben? Ansonsten hat das doch auch geklappt!?!!?! Ich finde im Internet nur Lösungen mit Header Einbezug, aber wie gesagt, woanders geht’s doch auch!?
Grüße
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
erstmal vorweg: Java ist nicht JavaScript
Das Problem könnte darin liegen, dass du keine Ainführungszeichen bei der Definition des div-Containers verwendest.
Richtig wäre
.<div name="test" style="visibility:hidden;">
Ausserdem kannst du (zumindest im Firefox) die JavaScript-Fehlerkonsole für auftretende Fehler zu rate ziehen. (Firefox: Strg+Umschalt+J)
mfg -
Da kam mir jemand zuvor... trotzdem noch ein paar Ergänzungen / Wiederholungen:
1. Passt nicht ins Java-Forum, da JavaScript und Java zwei verschiedene Dinge sind.
2. onMouseOver nicht onMousehover
3. um späteren Fehlern vorzubeugen solltest du dir angewöhnen, in html mit Anführungszeichen zu arbeiten:
<div name="test" style="visibility:hidden;">
4. als Antwort auf deine Frage:
wenn du mit Javascript arbeitest, sind IDs besser geeignet:
Dann kannst du auf das Div in Javascript mit "document.getElementById('test')" zugreifen:<div id="test" style="visibility:hidden;">
<div id="test" style="visibility:hidden;">TEXTTEXTTEXT</div> <a onmouseover="documten.getElementById('test').style.visibility = 'visible';">anzeigen</a>
5. Für solche Fehler gibt es - zumindest im FF - die Fehlerkonsole.
6. Auch dein "name.style..." solltest du durch IDs ersetzen, da "name.style" nicht dem Standard entspricht und nicht alle Browser dies als "document.getElementsByName('name')[0]" interpretieren und dies auch noch einmal in verschiedenen Browsern unterschiedlich interpretiert wird... (http://help.dottoro.com/ljlfpmux.php)
7. Falls du den Unterschied zwischen visibility und display nicht kennst: mit "display: none;" und "display: block;" kannst du das Div wirklich verbergen (Beispiel) - Nur als kleine Ergänzung
lg ole -
Viele gute Tips. Danke dafür.
1. Java und Javascript, get it.
2. onMouseover war klar, das oben war quatsch. Im Code wars ja over.
3. Ich arbeite meist ohne Krokodilzähne, weil die einfach unnötig sind. Daran liegts auch nicht, ist ja kein Leerzeichen dazwischen. Das inStyle war auch nur zur demonstration, sonst natürlich css-Adressierung.
4. IDs, ok ich probiers. Bin gespannt :)
5. Fehlerkonsole, habs bisher nur für css benutzt. JS ist anscheinend auch dabei, nice.
6. Mir ist es wieder eingefallen, bei FORM-Elementen ging das mit dem name.action immer problemlos.
7. visibility ist auch quatsch. Ist mir in dem Fall nicht aufgefallen weil der container absolut gesetzt wurde und sich so nichts verschoben hat.
Noch eine Frage: Die Div-Container haben meist eine CSS-ID, kann ich die dann auch als Adressat für JS benutzen? Bevor jetzt kommt "Warum keine Klassen", ich habs mir angewöhnt bestimmte Elemente mit ID und andere mit CLASS zu versorgen.
OK Also habs gerade ausprobiert und es geht leider auch nicht. Auch dein Zweizeiler haut so nicht hin. Ich probier noch mal weiter ...
Beitrag zuletzt geändert: 27.8.2011 10:23:59 von h4nni -
h4nni schrieb:
OK Also habs gerade ausprobiert und es geht leider auch nicht. Auch dein Zweizeiler haut so nicht hin. Ich probier noch mal weiter ...
Sorry, habe mich in meinem Zweizeiler ein wenig vertippt, das muss "document" heißen, nicht "documten"
Dann funktioniert es, gerade getestet...
Noch einmal richtig:
<div id="test" style="visibility:hidden;">TEXTTEXTTEXT</div>
<a onmouseover="document.getElementById('test').style.visibility = 'visible';">anzeigen</a>
6. Mir ist es wieder eingefallen, bei FORM-Elementen ging das mit dem name.action immer problemlos.
Ja, das hat seine Richtigkeit, da bei Form-Elementen das Name-Attribut seine besondere Bedeutung hat (wird ja auch für die Benennung der übergebenen Variablen verwendet), inwiefern sich das auf verschiedene Bereiche auswirkt, weiß ich nicht.
Dennoch würde ich von deiner Schreibweise in JS abraten, da dies u.U. in anderen Browsern nicht funktioniert.
IDs werden in (fast) allen Browsern akzeptiert.
Noch eine Frage: Die Div-Container haben meist eine CSS-ID, kann ich die dann auch als Adressat für JS benutzen? Bevor jetzt kommt "Warum keine Klassen", ich habs mir angewöhnt bestimmte Elemente mit ID und andere mit CLASS zu versorgen.
Diese "CSS-Id" ist identisch mit der Id, mit der du das Element über Javascript findest.
Allgemein kannst du in HTML IDs (und Klassen) vergeben, mit deren Hilfe du in CSS und JS (vermutlich noch in anderen Script-Sprachen, die ich nicht verwende) die Elemente wiederfinden kannst.
Sich angewöhnen, die HTML-Attribute "class" und "id" beide zu verwenden, ist keine Schwäche von dir, im Gegenteil: Eine ID sollte einmalig im gesamten Code vergeben werden und Klassen können viele Elemente umfassen, sowie auch jedes Element verschiedenen Klassen angehören kann.
Aufgrund dieses Unterschiedes sollte man auf jeden Fall je nach Verwendungszweck zwischen den Beiden auswählen und es auf keinen Fall an den Script-Stil anbinden.
3. Ich arbeite meist ohne Krokodilzähne, weil die einfach unnötig sind. Daran liegts auch nicht, ist ja kein Leerzeichen dazwischen. Das inStyle war auch nur zur demonstration, sonst natürlich css-Adressierung.
Ich wollte nur darauf Aufmerksam machen, dass du es nicht so lernst und dich später wunderst, dass es nicht funktioniert, da ein Leerzeichen dazwischen ist.
Diese Art ohne Anführungszeichen verbietet es - meines Wissens nach - zum Beispiel, einem Element verschiedene Klassenzugehörigkeiten zu geben und natürlich, den Code übersichtlicher zu machen.
Zum zweiten Teil: Sehr gut, das gibt dem Code eine gute Strukturierung und macht ihn dadurch um einiges übersichtlicher.
lg Ole -
h4nni schrieb:
ich habs mir angewöhnt bestimmte Elemente mit ID und andere mit CLASS zu versorgen..
Das solltest Du dir wieder abgewöhnen IDs und Classes haben unterschiedliche Aufgaben!
Eine ID identifiziert ein eindeutiges Element im Dokument, während eine Class eine Gruppe von Elementen definiert.
Beides kann sehr nützlich sein und darf für ein Element auch parallel verwendet werden.
Ach ja, hier noch ein funktionierendes Beispiel zu deinem Visibility Problem. *click*.
Dort wird auch noch die unterschiedliche Wirkung von "display" (Container 2) und "visibility" (Container 3) gezeigt.
FF
Edit: link gefixt
Beitrag zuletzt geändert: 27.8.2011 13:31:48 von fatfreddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
