mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 05.12.2016 19:39 Benutzername: Passwort: Auto-Login

Thema: Layer ein- und ausblenden vom 15.08.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Layer ein- und ausblenden
Seite: 1, 2  Weiter
Autor Nachricht
Luvshining
Threadersteller

Dabei seit: 04.08.2005
Ort: Bayern
Alter: 37
Geschlecht: Weiblich
Verfasst Mo 15.08.2005 14:31
Titel

Layer ein- und ausblenden

Antworten mit Zitat Zum Seitenanfang

Hallo,

ich stehe nun seit einer geraumen Zeit vor einem Problemchen, dass sich offensichtlich nicht so leicht klären lässt, wie ich es gehofft hatte. (Für viele sicherlich lächerlich Meine Güte! )

(a.)
Ich bin auf der Suche nach einer "Funktion" die es mir ermöglicht, dass z.B. beim mit der Maus über ein Bild fahren (OnMouseOver), automatisch an einer bestimmten, anderen Stelle der Internetseite ein Fenster (vorgegebene Größe) aufblendet, in welchem Textinformationen zu finden sind.

(b.)
Die selbe "Funktion", aber nicht beim herüberfahren mit der Maus, sondern beim klicken mit der Maus (onClick).

Mit Fenster meine ich in beiden Fällen kein PopUp, sondern glaube, dass man es galant über das Ein- und Ausschalten von Layern regeln kann- also eine Mischung aus JS und CSS. Ist dem so?

Kann mir jemand von euch auf die Sprünge helfen?

Über eure Hilfe würde ich mich freuen.

Viele Grüße
Nadine
  View user's profile Private Nachricht senden
Anti78

Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 38
Geschlecht: Männlich
Verfasst Mo 15.08.2005 14:35
Titel

Antworten mit Zitat Zum Seitenanfang

Würde auch als Tooltipp mit JS funktionieren.

http://www.walterzorn.de/tooltip/tooltip.htm

Oder hier mit CSS.

http://www.grammiweb.de/html/html088.shtml


Zuletzt bearbeitet von Anti78 am Mo 15.08.2005 14:36, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Luvshining
Threadersteller

Dabei seit: 04.08.2005
Ort: Bayern
Alter: 37
Geschlecht: Weiblich
Verfasst Mo 15.08.2005 14:42
Titel

Antworten mit Zitat Zum Seitenanfang

Das war genau das was ich gesucht habe.... schon Woooooooooooochen!

Herzlichen Dank für die Hilfe, ich werde mich damit jetzt mal beschäftigen! Lächel

Viele Grüße
Nadine
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Di 16.08.2005 00:26
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Das war genau das was ich gesucht habe.... schon Woooooooooooochen!

Wo hast du denn Wochen gesucht...? Mit Google hättest du das sicherlich in Minuten
statt Wochen geschafft... Grins

Ich empfehle dir diese Lektüre hier: http://de.selfhtml.org/
Sollte jeder kennen, der mit HTML, CSS, JavaScript, etc. arbeitet.
Da findest Du eigentlich alles drin, von den elementarsten Grundlagen
angefangen.
  View user's profile Private Nachricht senden
addy

Dabei seit: 22.01.2003
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 16.08.2005 06:57
Titel

Antworten mit Zitat Zum Seitenanfang

dies Layer blenden die auch trotz PopUp Blocker auf? Oder werden die da auch geschluckt?
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Di 16.08.2005 08:16
Titel

Antworten mit Zitat Zum Seitenanfang

Ein Popup-Blocker kann da gar nichts machen.
Der kann die Ausführung der Funktion window.open() unterbinden.
Aber das Einblenden von Layern kann kein Popup-Blocker
verhindern.
  View user's profile Private Nachricht senden
addy

Dabei seit: 22.01.2003
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 17.08.2005 14:02
Titel

Antworten mit Zitat Zum Seitenanfang

also ich hab bis jetzt immer mit Tab. gearbeitet, langsam nervt mich das verschachteln, hab aber noch nie weiter mit Layern gearbeitet,also verzeiht meine dummen Fragen *hehe*

das ist der Code aus eurem Bsp.:
Code:

<html><head>
<style type="text/css">
a.info { border-bottom: 1px dashed #800000; text-decoration: none }
a.info:hover { cursor: help; background: #FFFFFF }
a.info span { visibility: hidden; position: absolute; left: 20em; margin-top: 1em; padding: 1em; text-decoration: none }
a.info:hover span { visibility: visible; border: 4px solid #800000; color: #800000; background: #F8F9B9 }
</style>

</head><body>

<p>Eine Infobox rein in CSS <a class="info" href="#">(?)
<span>
<b>Information:</b><br><br>
Cascading Style Sheets
</span>
</a> realisiert.</p>

</body>


ich möchte aber das er sich das Layer zeigt beim drüber fahren, sondern erst beim klicken, wie änder ich den Code so ab? Soll aber ohne JS gehen weil es sich auch noch beim Popupblocker usw. öffnen soll.

Und wo im Web gibt es gute Tuts zu diesem thema.

DANKE.
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 39
Geschlecht: Männlich
Verfasst Mi 17.08.2005 23:36
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
beim drüber fahren, sondern erst beim klicken

Das läßt sich nicht so bewerkstelligen, wie du es gerne hättest. Du benutzt die Pseudoklasse hover.
Das funktioniert wunderbar, aber für einen Klick gibt es da keine Pseudoklassen. Hier müßte dann
JavaScript zum Einsatz kommen (z.B. den Eventhandler onclick nutzen).

Zitat:
Soll aber ohne JS gehen weil es sich auch noch beim Popupblocker usw. öffnen soll.

Das funkioniert aber nicht ohne JS...
Vor einem Popupblocker mußt du dir allerdings keine Sorgen machen. Das habe ich ja bereits
geschrieben.
Ein Popupblocker verhindert - wie der Name schon sagt -, daß sich neue Fenster öffnen. Du veränderst
aber nur die Sichtbarkeit einiger Elemente.
Aber wie auch immer - der grundgedanke ist ja schon einmal gut. Die Site sollte natürlich auch ohne
JS funktionieren. Zumindest sollte die Navigation problemlos ohne JS möglich sein.
Weitere zusätzliche Spielereien müssen nicht unbedingt funktionieren. Wer JS abgeschaltet hat, der
bekommt dann halt keine Spielereien. Hauptsache, die Grundfunktionalität ist gegeben. Das ist auch
für User mit Textbrowsern oder Screenreadern wichtig.
Du kannst einfach auf das Einblenden der Infoboxen verzichten, wenn sie nur ein paar zusätzliche
und nicht unbedingt notwendige Informationen enthalten. Wenn diese Infoboxen Texte enthalten, auf
die der User nicht verzichten kann, dann mußt du das für Textbrowser/Screenreader-User halt einfach
immer einblenden.
Aber hier bietet dir CSS eine schöne Möglichkeit, wie du das regeln kann. Du kannst mit verschiedenen
Stylesheets arbeiten, die über einen Mediatype für verschiedene Ausgabemedien gekennzeichnet sind.
So bindest Du einmal - ganz normal und wie gewohnt - ein ganz normales Stylesheet für die normalen User
ein (media="screen").
Dann nimmst Du ein weiteres Stylesheet für den Druck (media="print"), wo Du die Zusatzinformationen
dann immer einblendest. Elemente wie die Navigation braucht man auf einem Ausdruck nicht. Deswegen
kannst Du diese dann ausblenden. Dazu solltest du aber nicht die visibility auf hidden setzen, weil dann
der Platz reserviert bleibt. Dadurch würden dann leere Stellen entstehen.
Setze display:none;. Dadurch verschwindet ein Element dann komplett, ohne das ein Leerraum gedruckt
wird.
Für User, die Screenreader (media="aural") verwenden, kannst Du dann auch wieder ein Extra-Stylesheet
festlegen. CSS bietet dir sogar die Möglichkeit, Formate zum Hören festzulegen. Betonungen, Sprechge-
schwindigkeit, Lautstärken, Pausen, Hintergrundgeräusche, etc..
Blinde User, die sich die Site mit Hilfe einer Braille-Zeile (Blindenschrift) ausgeben lassen, erreichst Du dann
mit media="embossed".
Für solche User, sollte man dann möglichst alles ausblenden, was nicht unbedingt sein muß...
Dann könntest Du noch weitere Stylesheet für die Ausgabe auf Fernsehern, Projektoren, Handhelds, u.a.
festlegen.
Ich würde empfehlen, ersteinmal ein Stylesheet für alle Ausgabemedien (media="all") einzubinden und
dann eins für den Druck, wo Du halt einiges ausblendest...
In SelfHTML findest Du alles, was Du dazu wissen mußt!


Zitat:
Und wo im Web gibt es gute Tuts zu diesem thema.

Da hatte ich ja bereits was zu geschrieben und durch die Benutzung einer Suchmaschine findest Du
Tausende an Tutorials, Referenzen, ... zum Thema.
Sicherlich findet man hier im Forum auch einiges. Die Suchfunktion wird helfen. Ich bin sicher, daß
es einige Threads gibt, wo schon eine Menge an guten links zusammengetragen wurden.

Aber ich will trotzdem noch mal schnell die Highlights aufführen.

SELFHTML von Stefan Münz
Also als erstes solltest Du SelfHTML lesen. Ich schätze mal, daß jeder hier, der im Nonprint-Bereich
arbeitet, damit angefangen hat...
Das ist halt das Standardwerk bezüglich HTML, CSS, JS, etc.. Da findest Du im Prinzip alles,
was Du brauchst. Es ist gut erklärt und es sind eine Menge Beispiel darin. Auch für Profis ist es
noch geeignet. Es ist die Referenz! - Man kann ja nicht alles im Kopf haben...
Seit der letzten Version ist auch noch ein schöner Teil über's "Tabellen-Design" (und wie man's besser
macht mit CSS), hinzugekommen.
http://de.selfhtml.org/

Als zweites, sehr gutes, Dokument ist die
Einführung in XHTML, CSS und Webdesign von Michael Jendryschik

Das ist natürlich nicht so umfangreich wie SelfHTML, aber es soll halt auch nur eine Einführung sein und
kein allumfassendes Standardwerk.
Auch wenn das Ding "Einführung" heißt, so ist es trotzdem auch für Fortgeschrittene geeignet.
Neben notwendigem Hintergrundwissen werden auch Designprinzipien vermittelt.
Auch hier findet man zu allem wieder Beispiele.
http://jendryschik.de/wsdev/einfuehrung/

Und als letzten Tip, möchte ich dir
CSS 4 you - Die deutsche Seite für Cascading Stylesheets von Thomas Pehlgrim
nahelegen.
Die Site bietet eine sehr ausführliche und übersichtliche CSS-Referenz. Sie ist für Einsteiger wie
dich geeigent, aber ebenso für Profis, die nachschlagen wollen.
Neben der Referenz findet man eine Menge Tipps und Tricks. Die Unterschiede (und Bugs) der
verschiedenen Browser werden aufgeführt. Es wird extra auf die Eigenheiten der "großen" Browser
IE, Mozilla und Opera in Extra-Kapiteln eingegangen und auch zu den nicht so verbreiteten Browsern
werden einige Besonderheiten aufgeführt.
Zu allem findet man wieder schöne Beispiele und es gibt ein paar Workshops. Du solltest dort einmal
beginnen.
Es gibt bei den Workshops ein langes (ausführliches und gutes) Kapitel "Wie fange ich an?".
Dann solltest Du den Workshop "Layouten ohne Tabellen" lesen, wenn Du moderne Seiten mit CSS
erstellen möchtest. Wo nun der große Vorteil von CSS-Design liegt, wird natürlich auch ausführlich
beschrieben.
Man findet dort auch einige Layouts bzw. Layout-Beispiele, die man sich gut anpassen könnte.
Den Workshop zum Box-Modell sollte man auch in jedem Fall lesen - und verstehen. Das Verstehen
davon ist für jedes CSS-Design unerläßlich.
Auch den Workshop zum Doctype-Switch solltest Du lesen...
Was sonst noch..? Bei den Tipps und Tricks findet man eine Reihe netter Dinge, die auch für den einen
oder anderen Profi interessant sind.
Für Profis finden sich auf der Site noch weitere Dinge, die von Interesse sind. Dazu gehört als erstes
natürlich die umfangreiche Referenz sowie die Kurzreferenz.
Dann kommen aber auch noch Tabellen zur Browserkompatibilität, wo genau aufgeführt wird, welcher
Browser was kann, welche Selektoren, Eigenschaften, ... er nicht kennt, usw..
http://www.css4you.de/
  View user's profile Private Nachricht senden
 
Ähnliche Themen "1 Layer einblenden / 4 Layer ausblenden"-Problem
Layer ausblenden?
[JS/CSS] Layer ein- und ausblenden?
Div,Layer mit JS ein- oder ausblenden
1 klick = 1 frame öffnen + layer ein-/ausblenden?
mehre div layer einblenen und ausblenden
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.