Hi djheke,
ich denke dass sich das hier versteckt, oder?
.rbcontent {
display: none;}
.rbcontent:checked + .content {
display: block !important;}Es funktioniert ja auch alles einwandfrei - bin ganz stolz, auch wenn die Technik sicherlich noch nicht sauber ist - nur dieses Hinruckeln der Accordeon-Einträge nervt mich noch sehr und ich würde sie gerne "fixieren" oder eben erst "erscheinen lassen", wenn die Box ausgeklappt ist?! 
Hallo liebes Forum,
ich habe ein Problem, was vermutlich gar nicht sooo kompliziert ist, aber ich komme nicht weiter und hoffe jmd. von euch hat einen schlauen Hinweis für mich.
Ich habe ein accordeon-Menü erstellt. Es handelt sich um eine kleine Box (in der "Menü" steht), die beim hover ausklappt und die einzelnen Menü-Punkte als labels anzeigt. Das sieht vereinfacht so aus:
<div class="accordion">
<div class="single-accordion1">
<!-- MENU-Button -->
<h2 style="cursor: default;">Menü</h2>
<!-- MENU-Punkte -->
<!-- MENU-Punkt1 -->
<label for="rb1">Menüpunkt1</label>
<br>
<!-- MENU-Punkt2 -->
<label for="rb2">Menüpunkt2</label>
<br>
<!-- MENU-Punkt3 -->
<label for="rb3">Menüpunkt3</label>
<br>
<!-- MENU-Punkt4 -->
<label for="rb4">Menüpunkt4</label>
<br>
</div>
</div>In der CSS ist für das Accordeon eine kleine Ausgangsbreite definiert und eine größere Fläche, die ausklappt, wenn man den Menü-Button hovert:
.accordion {
width: 400px;
padding: 3px;
position: relative;
margin-left:5px;
margin-top:0px; z-index: 2;}
.single-accordion1 {
height: 55px;
width: 95px;
overflow: hidden;
background: #0095FF;
padding: 0px 20px;
-webkit-transition: all 0.1s;
/* Safari */
transition: all 0.1s;
}
.single-accordion1:hover {
height: 610px;
width: 295px;
border-radius: 30px;
background: #CCCCCC;
-webkit-transition: all 0.1s;
/* Safari */
transition: all 0.1s;
}Mein Problem: Die Elemente innerhalb der Box passen sich der Größe der Box an und das sieht man leider. Sprich, wenn die Box "wächst" rutschen die einzelnen Text-Elemente erst an ihre richtige Position. Gibt es die Möglichkeit, den Inhalten eine feste Position zu geben? Evtl. löst man das durch das "Erscheinen" der Menüpunkte NACHDEM die Box ausgeklappt ist (anstatt währenddessen)... nur wie?
Ich hab schon mit display und overflow rumgespielt aber bisher hat nichts zu dem gewünschten Ergebnis geführt.
Ich hoffe ich habe einigermaßen verständlich beschrieben, was das Problem ist. Ich freue mich über einen Tipp...
Danke und schönen Abend noch.
LG
Dori
Hi MrMurphy,
die Seite wird ausschließlich stationär an PCs dargestellt, ich kann also Touchscreens außer Acht lassen.
Dein Vorschlag mit dem Attribut Checket geht in die gleiche Richtung wie Sempervivum schon angemerkt hatte, oder?
LG
Cool, das ist doch ne ganz gute Lösung mit den Radiobuttons...
https://jsfiddle.net/Die_Dori/jx1fcs06/10/
Danke!!
Für meine Zwecke könnte ich sicher das "#contentstart" an die URL anfügen - fand ich nur so unelegant ;). Dachte echt es liegt nur an einer falschen Platzierung meiner <div id="contentstart"> und/oder einem "display: block;" was vergessen wurde...
Java wollte ich bei der Site eigentlich vermeiden aber das automatische Anhängen des "#xy" wäre eine Option. Aber das Beispiel kann ich nicht richtig nachvollziehen bzw für meine Zwecke anpassen
Hi und schon mal Danke!
Habs probiert. Die "Startseite" sieht super aus... allerdings verschwindet sie nicht beim Aufruf des Contents aus dem Menü.
Guck: https://jsfiddle.net/tazpjqwk/11/
Ich glaube mein Anliegen ist sehr simpel aber ich komme einfach nicht drauf und hoffe auf eure Hilfe... (Danke vorab!)
Ich habe eine Seite (yay) welche über ein Accordeon-Menü navigiert wird. Hier vereinfacht im Fiddle: https://jsfiddle.net/tazpjqwk/10/
Hover auf dem "Menü-Button" klappt Menü aus. Klick auf Menü-Eintrag 1 öffnet Content 1. Klick auf Menü-Eintrag 2 öffnet Content 2. Soweit so gut.
Ich möchte jetzt allerdings gerne einen Start-Content festlegen. Sprich Content, der angezeigt wird, noch bevor ich einen Menü-Eintrag anwähle - also eine Startseite quasi.
Wenn ich dann meinen Content im Menü wähle, soll dieser Start-Content natürlich auch wieder verschwinden...
Wie löse ich das?
Ich steh da grad völlig auf dem Schlauch. Wo muss meine <div id="contentstart"> hin? Innerhalb des <section id="content"> tags?
Und wie definiere ich, dass sie beim Aufruf der Seite sichtbar ist, solange bis ein Content aus dem Menü gewählt wird?
Oh man, das klingt echt gut aber da hab ich sowas von keine Ahnung von und wäre absolut (wieder) auf deine Hilfe angewiesen.... es wäre ein Traum, wenn ich die Daten in einer Liste pflegen könnte und dadurch die CSS und auch die HTML-Datei übersichtlicher zu halten.
Genau so! Großartig! VIELEN DANK ! 
Ich setze meine diversen Content-Bereiche zeitnah um und dann schau ich mir nochmal deinen Vorschlag mit der Liste an. Das traue ich mir mit meinem semi-guten Grundwissen noch nicht so zu... wenn ich dich richtig verstehe, kommen die Daten dann in eine Excelei, die dann durch das JS ausgelesen wird?
oha... ja das macht bestimmt Sinn aber ich glaub das probier ich frühestens, wenn ich die unüberschaubare-version zum Laufen gebracht habe... aber danke! 
danke dass du dich meiner annimmst, ehrlich!
Das hatte ich auch schon probiert, aber funzt leider nicht...
Ich hab das jetzt mal versucht überschaubar zu halten:
https://jsfiddle.net/tazpjqwk/8/
In dem fidele hat jetzt das blaue Bild unter #content1 (Ausklapp-Menü-Punkt 1) das gleiche rote hover backkround-image, wie das grüne Bild unter #content2 (Ausklapp-Menü-Punkt2).
Ich möchte jetzt aber, dass das grüne Bild im content 2 ein anderes hover Background-image hat, sagen wir zB ein gelbes -> https://www.wallpaper-gratis.e…ben/gelb006_1400x1050.jpg
Sorry djheke... ich habe mich wirklich bisschen unglücklich ausgedrückt.
Sempervivum GENAU!! Das haut soweit hin - besten dank (mal wieder)! 
Das einzige Problem ist jetzt nur noch, dass ich mit
.area:hover {
position: absolute;
border: 0.5px dotted red;
background-image: url("http://wallpaper-gallery.net/images/wallpaper-red/wallpaper-red-17.jpg");
}
ja das hover-Bild festlege. So ist es ja für alle areas das gleiche background-image beim hover. Das muss für meine diversen content-bereiche mit ihren unterschiedlichen areas aber jeweils anders sein.
Ich dachte jetzt, ich könnte einfach .area1:hover {... , .area2:hover {... etc. schreiben, aber das klappt nicht (bestimmt aus einem sehr guten Grund 
).
Wo/Wie definiere ich für #content1, #content2... die jew. area-background-images ?
Danke Sempervivum!
Ganz genau so! 
Das fiddle #2 mit dem Bild und den hover-Bereichen soll der eigentliche content im ersten fiddle mit dem Aufklappmenü sein. Bekomm ich einfach nicht funktionstüchtig hineingedoktert 
Und die zweite Herausforderung, die ich befürchte ist dann noch die Tatsache, dass jeder menü-Punkt des Aufklappmenüs (fiddle #1) ein anders hover-Bild im content-Bereich öffnen soll. D.h. auf meiner Seite liegen nachher ca. 20 verschiedene hover-Bilder natürlich dann auch mit jeweils unterschiedlichen areas und ausgehenden Verweisen. Wie ich das in meiner einen CSS umsetze, weiß ich grad auch noch nicht
ich muss dazu nochmal was fragen... sry
Meine Seite hat ein Menü auf der linken Seite... die Links darin öffnen den jew. Content rechts im Content-Beriech.
Funktioniert auch. Hier mal in abgespeckt:
https://jsfiddle.net/Die_Dori/gah8o009/2/
Klicke ich im Accordeon jetzt den 1. Link an, öffnet sich Content1! Anstelle vom Bild mit der 1 soll da die hover-Nummer hin, bei der Sempervivum mir hier geholfen hatte.
Hier auch nochmal in meiner abgespeckten Version:
https://jsfiddle.net/Die_Dori/p6tx5v88/
Klar, die beiden css werfe ich erstmal zusammen, aber bei dem html-krempel stelle ich mich gerade etwas dusslig an. Egal wie... ich krieg die hover-Sache einfach nicht funktionstüchtig in meine Seite integriert. Lässt sich das überhaupt 1zu1 in meine Struktur packen oder muss ich da nochmal umdenken? Kann mir da vllt jemand einen Hinweis geben?
<section id="content">
<div id="content1>
<div id="wrapper">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/blue-wallpaper-7.jpg" width="510" height="500">
<div class="area" id="area1">
<ul class="menu" id="menu1">
<li><a href="http://www.google.de">LINK1</a></li>
<li><a href="http://www.google.de">LINK2</a></li>
</ul>
</div>
<div class="area" id="area2">
<ul class="menu" id="menu2">
<li><a href="http://www.google.de">LINK5</a></li>
<li><a href="http://www.google.de">LINK6</a></li>
</ul>
</div>
<div class="area" id="area3">
<ul class="menu" id="menu3">
<li><a href="http://www.google.de">LINK7</a></li>
<li><a href="http://www.google.de">LINK8</a></li>
</ul>
</div>
<div class="area" id="area4">
<ul class="menu" id="menu4">
<li><a href="http://www.google.de">LINK11</a></li>
<li><a href="http://www.google.de">LINK12</a></li>
</ul>
</div>
<div class="area" id="area5">
<ul class="menu" id="menu5">
<li><a href="http://www.google.de">LINK17</a></li>
</ul>
</div>
</div>
</div>
<div id="content2">
<div id="content3">INHALT3</div>
...
</section>
-> klappt nicht.
Und krieg ich nicht auch sowieso Probleme, wenn mein Accordeon-Menü mir den Content rechts ausspuckt, der natürlich immer anders ist, aber ja auf die gleiche css zugreift. Hab ich mich hier jetzt schon in der Struktur der Seite völlig verzettelt?
Geil, ihr habt mir SEHR geholfen. Vielen Dank!! Ich hab mich jetzt an deinem Script orientiert, Sempervivum und nach ein paar minimalen Anpassungen ist jetzt alles so, wie ich es brauche, ganz ohne Java
Danke, Sempervivum. Hab ich mal umgesetzt: So funktioniert der Bildwechsel bei Mouseover einwandfrei und es kommt auch das Ursprungsbild, beim Verlassen der Area. Soweit so gut. Auch das Menü bleibt stehen, wenn ich mit der Mouse drauf bin - allerdings auch, wenn ich bereits auf dem nächsten Menü bin. Beim Überfahren aller areas nacheinander öffnen sich also alle Menüs und bleiben offen (<- doof). Beim Hovern einer neuen area soll auch das Menü der andern area aufgehen und das Menü der vorherigen area soll sich demnach schließen.
Ich hab jetzt die Areas nach unten vergrößert, so dass die Menüs auch mit in der Area liegen. (Finde ich ansicht nicht so elegant, weil der Mouseover jetzt eben auch außerhalb meiner eigentlichen Flächen im Bild aktiv ist. aber geht auch so.) Mit deiner Ergänzung:
<div id="menu4" onmouseout="this.style.display = 'none';">
Menu 4
<a href="link1.htm">Link1</a>
...
...
</div>
und meiner alten area-definition
<area
shape="rect" coords="37,0,195,500" href="javascript:showMenu('menu1');"
onmouseover="changeImage('bild_10.png'); document.getElementById('menu1').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu1').style.display = 'none';"/>
funktioniert das soweit, nur flackert mein overlay-Bild (Bild_10.png) wenn ich über die Links im Menü fahre. Woran liegt das?
djheke: Hab ich versucht! Mit Text-Links kein Ding. Funzt einwandfrei... nur mit Bildern in denen die mouseover-funktion nur auf bestimmten Bereichen aktiv sein soll, hab ich das nicht auf die Reihe bekommen
Hi Sempervivum,
erstmal Danke! Genau... mit
........ document.getElementById('menu1').style.display = 'none';"/>
sage ich dem Menü, dass es beim Verlassen der area verschwinden soll... Soll es ja prinzipiell auch aber - wie du schon sagst - aktuell kann ich das Menü gar nicht bedienen, weil es außerhalb der area liegt. 
Ändere ich den o.g. code nun in
........ document.getElementById('menu1').style.display = 'block';"/>
um, bleibt das Menü zwar stehen und bedienbar, allerdings bleibt es auch sichtbar, wenn ich bereits ein anderes Menü über die jew. area aktiviert habe. Das haut also auch nicht hin.
Es soll sich wie ein ganz normales DropDown verhalten: Erscheinen beim hover auf der area, bleiben wenn auf der area UND/ODER auf dem Menü selbst verweilt wird und verschwinden, wenn das Menü oder die jew. area verlassen werden. Also wie hier am Beispiel vom Text-Links: http://www.w3schools.com/cssre…trycss_sel_hover_dropdown
Touch-Geräte spielen hierbei keine Rolle. Es wird eine Intranet-Seite, die mobil nicht abrufbar sein soll.
So, ich bin schon um einiges weiter gekommen... Es funktioniert soweit. Mein Hauptbild wird durch overlays bei Mouseover ersetzt und unten drunter erscheinen die Menüs. Jetzt müssen meine Menüs nur noch visible bleiben, bis ich die "Menü-Fläche" oder die auslösende area im Hauptbild verlasse...
Wie löse ich das am besten? Ich möchte nur ungern die area vergrößern, da wirklich nur die definierten Bereiche das Menü-auslösen sollen...
Hier mal mein aktueller Stand:
<!DOCTYPE html
<head>
<title></title>
<style type="text/css">
#content {
position: relative}
#content a {
display: block}
#menu1, #menu2, #menu3, #menu4, #menu5 {
display: none}
#menu1 {
position: absolute;
top: 350px;
left: 100px}
#menu2 {
position: absolute;
top: 350px;
left: 250px}
#menu3 {
position: absolute;
top: 350px;
left: 400px}
#menu4 {
position: absolute;
top: 350px;
left: 550px}
#menu5 {
position: absolute;
top: 350px;
left: 700px}
</style>
<script type="text/javascript">
function showMenu(menuId) {
//hide all the menues
document.getElementById('menu1').style.display="none";
document.getElementById('menu2').style.display="none";
document.getElementById('menu3').style.display="none";
document.getElementById('menu4').style.display="none";
document.getElementById('menu5').style.display="none";
//display the menu for this area of the image
document.getElementById(menuId).style.display="block";
}
function changeImage(img) {
document.getElementById('newImage').src=img;
}
</script>
</head>
<body>
<div id="content">
<img src="bild.png" id="newImage" usemap="#patchMap" />
<div id="menu1">
Menu 1
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu2">
Menu 2
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu3">
Menu 3
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu4">
Menu 4
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
<div id="menu5">
Menu 5
<a href="link1.htm">Link1</a>
<a href="link2.htm">Link2</a>
<a href="link3.htm">Link3</a>
<a href="link4.htm">Link4</a>
</div>
</div>
<map name="patchMap" id="patchMap" >
<area
shape="rect" coords="23,129,195,328" href="javascript:showMenu('menu1');"
onmouseover="changeImage('bild_10.png'); document.getElementById('menu1').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu1').style.display = 'none';"/>
<area
shape="rect" coords="194,32,349,328" href="javascript:showMenu('menu2');"
onmouseover="changeImage('bild_20.png'); document.getElementById('menu2').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu2').style.display = 'none';"/>
<area
shape="rect" coords="348,32,511,328" href="javascript:showMenu('menu3');"
onmouseover="changeImage('bild_30.png'); document.getElementById('menu3').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu3').style.display = 'none';"/>
<area
shape="rect" coords="510,32,640,328" href="javascript:showMenu('menu4');"
onmouseover="changeImage('bild_40.png'); document.getElementById('menu4').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu4').style.display = 'none';"/>
<area
shape="rect" coords="639,129,768,328" href="javascript:showMenu('menu5');"
onmouseover="changeImage('bild_50.png'); document.getElementById('menu5').style.display = 'block';"
onmouseout="changeImage('bild.png'); document.getElementById('menu5').style.display = 'none';"/>
</map>
</body>
</html>Hi JR Cologne,
ich könnte mit den overlay-DIVs gut leben. Nur selbst da weiß ich nicht, wie ich den Bereich des Bildes definiere, so dass bei dem Mouseover dann das overlay-Bild UND das DropDown-Menü erscheint. Ich glaub einzeln krieg ich beides irgendwie hin... Das DropDown-Menü wie in meinem ersten Beispiel-Code, das Einfärben beim hover z.B. via imagemap (mach man das noch so? )
<div class="bild">
<img name="Bild"
src="http://www.hunde-fan.de/hundemarkt/wp-content/uploads/2016/03/Hunde-kaufen-verantwortung.jpg" usemap="#imagemap1" />
<map name="imagemap1">
<area shape="rect" onMouseOver="document.Bild.src='http://www.kirasoftware.com/images/Fotolia_19136022_XS.jpg';"onMouseOut="document.Bild.src='hund.jpg';" coords="0,0,111,283" href="google.com" />
<area shape="rect" onMouseOver="document.Bild.src='http://www.gif-bilder.de/weblog/wp-content/uploads/2009/10/hund.jpg';"onMouseOut="document.Bild.src='hund.jpg';" coords="313,0,424,283" href="google.com" />
</map>
</div>Ich dachte ich könnte dieses SVG-Beispiel irgendwie nutzen und mit meinem DropDown kombinieren... aber ich kriegs einfach nicht hin.
Hallo liebes Forum,
ich bin neu hier, also verzeiht bitte, wenn ich ein Thema übersehen habe, welches meine Frage ggf. bereits beantwortet. Verschiebt diesen Thread ggf. gerne an die richtige Stelle.
Ich möchte ein Bild an bestimmten Stellen mit einer hover-Funktion versehen. Bei dem Mouseover soll sich zum einen der jew. definierte Bereich rot verfärben und außerdem soll darunter dann ein DropDown-Menü erscheinen, welches mir eine Handvoll Links anzeigt.
Ich habe mich für das Dropdown-Menü zunächst an diesem Beispiel von w3schools.com orientiert: http://www.w3schools.com/cssre…trycss_sel_hover_dropdown
Daraus habe ich dann folgende Seite erstellt:
<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: none;
border: 1px solid;}
div a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;}
ul {
display: inline;
margin: 0;
padding: 0;}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 400px;
display: none;}
ul li ul li {
background: #555;
display: block;}
ul li ul li a {display:block;}
ul li ul li:hover {background: #666;}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#"><img src="http://www.hunde-fan.de/hundemarkt/wp-content/uploads/2016/03/Hunde-kaufen-verantwortung.jpg"></a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Das funktioniert soweit. Nur jetzt scheitere ich daran, eben nicht das ganze Bild den hover auslösen zu lassen, sondern eben álá image-map nur bestimmte Bereiche (die sich dann auch noch rot verfärben sollen).
In etwa so: Das Bild soll in 3 Teile unterteilt werden:
-> linker Teil des Bildes wird bei Mouseover halbtransparent rot (opacity: 0.5) und zeigt das DropDown-Menü mit Link 1, Link2, Link 3
-> mittlerer Teil des Bildes ... zeigt Link 4, 5 und 6
-> rechter Teil des Bildes ... zeigt Link 7, 8 und 9 an.
Ich dachte, ich könnte das als SVG lösen (http://wiki.selfhtml.org/wiki/…axis/responsive_Imagemaps ), bekomme aber keine sinnvolle Erweiterung meines Codes zustande. Kann mir jemand helfen?