[GastForen Programme Web/Internet Adobe Dreamweaver "Ebene" ein- und ausblenden

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Web/Internet - Webdesign, eForms
Themen
Beiträge
Moderatoren
Letzter Beitrag

"Ebene" ein- und ausblenden

Roly
Beiträge gesamt: 77

7. Apr 2010, 16:17
Beitrag # 1 von 5
Bewertung:
(6792 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo HDS-Community
Ich bräuchte mal einen kurzen Denkanstoss von euch... um folgende Problematik handelt es sich dabei:

Zu einer Liste mit - sagen wir mal Hauptkategorien - soll, wenn man darauf clickt, eine "Ebene" eingeblendet werden, die einerseits alles darunterliegende überblendet und andererseits detailliertere Informationen zu dieser Hauptkategorie (Bilder/Texte) enthält. Durch einen "Schliessen"-Link wird die Ebene wieder zum verschwinden gebracht und eine neue Hauptkategorie kann geöffnet werden aus der Liste usw...

Wie würdet ihr das angehen? Kann man divs durch Link anclicken ein- und ausblenden? Oder gibts da 'ne ganz andere schlauere Methode?

Danke für euren Input... :-)
Gruess Roly
X

"Ebene" ein- und ausblenden

SabineP
Beiträge gesamt: 7586

7. Apr 2010, 16:47
Beitrag # 2 von 5
Beitrag ID: #438582
Bewertung:
(6778 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Roly,

hier ein Beispiel, es funktioniert allerdings mit hover und nicht mit click:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>

<style type="text/css">
a {color:#c00;}
a b {display:none;}
a:hover {border:0; position:relative; z-index:10; text-decoration:none;}
a:hover b {display:block; position:absolute; top:20px; left:0px; padding:5px; font-weight:normal; color:#000; border:1px solid #f00; background:#0f0; width:300px;}
</style>
</head>

<body>
<a href="http://example.com">Hauptkategorie<b>detailliertere Informationen zu dieser Hauptkategorie (Bilder/Texte)</b></a>
</body>
</html>


als Antwort auf: [#438581]

"Ebene" ein- und ausblenden

Roly
Beiträge gesamt: 77

7. Apr 2010, 23:01
Beitrag # 3 von 5
Beitrag ID: #438598
Bewertung:
(6735 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Vielen Dank für Deine Hilfe! Hmm, das funktioniert zwar - ist allerdings nicht gerade das, was ich mir wirklich vorgestellt habe, da die Informationen dann natürlich sofort ausgeblendet werden wenn der Cursor den Bereich wieder verlässt...

Habe nun auch ein bisschen weitergebastelt und nun das ausgetüftelt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<p><a href=# onclick=javascript:document.getElementById('test1').style.visibility='visible'>Kategorie 1</a></p>
<p><a href=# onclick=javascript:document.getElementById('test2').style.visibility='visible'>Kategorie 2</a></p>
<div id="test1" style="position:absolute; left:135px; top:65px; width:441px; height:308px; z-index:1; background-color: #FF6699; layer-background-color: #FF6699; border: 1px none #000000; visibility: hidden;">
<p>Kategorie 1</p>
<p>detailliertere Informationen zu dieser Hauptkategorie (Bilder/Texte)</p>
<p><a href=# onclick=javascript:document.getElementById('test1').style.visibility='hidden'>[X]</a></p>
</div>
<div id="test2" style="position:absolute; left:135px; top:65px; width:441px; height:308px; z-index:2; background-color: #669933; layer-background-color: #669933; border: 1px none #000000; visibility: hidden;">
<p>Kategorie 2</p>
<p>detailliertere Informationen zu dieser Hauptkategorie (Bilder/Texte)</p>
<p><a href=# onclick=javascript:document.getElementById('test2').style.visibility='hidden'>[X]</a></p>
</div>
</body>
</html>

Wäre jetzt nur noch schön, wenn man irgendwie auf das # verzichten könnte, sodass das Rauten-Zeichen in der Adress-Zeile die URL nicht verändert...

Und was auch nützlich wäre, wenn es irgendwie machbar wäre, dass wenn man eine andere Kategorie anclickt die erstere von selbst wieder geschlossen wird... jetzt ist es so, dass die zweite Kategorie über die erste geöffnet wird und wenn man die erste wieder anclickt diese natürlich unter der zweiten verborgen bleibt! Man ist also gezwungen, erst die aktuelle Kategorie zu schliessen, bevor man eine Kategorie sehen kann, die "darunter" liegt - was für die User natürlich nicht ersichtlich und logisch ist!


als Antwort auf: [#438582]
(Dieser Beitrag wurde von Roly am 7. Apr 2010, 23:18 geändert)

"Ebene" ein- und ausblenden

SabineP
Beiträge gesamt: 7586

8. Apr 2010, 13:28
Beitrag # 4 von 5
Beitrag ID: #438701
Bewertung:
(6681 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Roly,

verwende doch einfach zwei Javascript-Funktionen zum ein- und ausblenden der Divs.

Hier ein Beispiel.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
#test1{background-color:#f00;visibility:hidden;position:absolute;width:100px;height:100px}
#test2{background-color:#0f0;visibility:hidden;position:absolute;width:100px;height:100px}
</style>

<script type="text/javascript">
function ein(divid){document.getElementById(divid).style.visibility="visible";}
function aus(divid){document.getElementById(divid).style.visibility="hidden";}
</script>
</HEAD>

<BODY>
<a href="#" onclick="ein('test1'),aus('test2')">test1 sichtbar, test2 unsichtbar</a>
<br>
<a href="#" onclick="ein('test2'),aus('test1')">test2 sichtbar, test1 unsichtbar</a>
<div id="test1">Inhalt von test1</div>
<div id="test2">Inhalt von test2</div>
</BODY>
</HTML>

>> wenn man irgendwie auf das # verzichten könnte

onclick kannst Du auch für andere HTML-Elemente verwenden, also nicht nur für das A-Element:

http://de.selfhtml.org/...thandler.htm#onclick


als Antwort auf: [#438598]
(Dieser Beitrag wurde von SabineP am 8. Apr 2010, 13:29 geändert)

"Ebene" ein- und ausblenden

Roly
Beiträge gesamt: 77

8. Apr 2010, 22:17
Beitrag # 5 von 5
Beitrag ID: #438764
Bewertung:
(6652 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Alles klar, das wars! :-)

Vielen Dank für Deine super Hilfe!

Liebe Grüsse

Roly


als Antwort auf: [#438701]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!