Teile eines IMG mit hover versehen, welches jew. ein DropDown-Menü anzeigt

  • 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. :S


    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:



    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? ?(

  • 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? :huh: )

    Code
    <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.
    :wacko:

  • 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:


  • Zitat

    Jetzt müssen meine Menüs nur noch visible bleiben, bis ich die "Menü-Fläche" oder die auslösende area im Hauptbild verlasse...

    Das verstehe ich nicht: Dass das Menü beim Verlassen der Area wieder unsichtbar wird, hast Du doch schon programmiert. Aber wenn das so ist, ist das Menü doch gar nicht bedienbar, weil es ja verschwindet, wenn man die Maus dorthin bewegt.
    Oder möchtest Du, dass das Menü erscheint, wenn man mit der Maus die Area betritt und erst verschwindet, wenn man mit der Maus das Menü verlässt?


    Du hast es jetzt zwar mit dem Wechsel des Bildes gelöst, aber man kann das Einfärben der Bereiche auch dynamisch mit Javascript machen:
    http://www.netzgesta.de/mapper/


    Das wäre zu empfehlen, wenn Du später noch weitere Areas hinzu fügen möchtest, dann musst Du nicht jedes Mal ein neues Bild anfertigen.



    Hast Du auch bedacht, was auf Touch-Geräten passiert, die kein Mouseover haben?

  • Hi Sempervivum,


    erstmal Danke! Genau... mit

    Code
    ........ 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. 8|
    Ändere ich den o.g. code nun in

    Code
    ........ 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.

  • Dann mach es doch so:

    HTML
    <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');"/>
    HTML
    <div id="menu4" onmouseout="this.style.display = 'none';"> 
             Menu 4 
            <a href="link1.htm">Link1</a> 
            <a href="link2.htm">Link2</a> 
            <a href="link3.htm">Link3</a>    </div>

    Eleganter wäre es jedoch, das Menü so zu positionieren, dass es die Area überlappt, so dass man ohne Unterbrechung von einem zum anderen hovern kann.

  • 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:

    Code
    <div id="menu4" onmouseout="this.style.display = 'none';"> 
             Menu 4 
            <a href="link1.htm">Link1</a> 
            ...
            ...
            </div>


    und meiner alten area-definition

    Code
    <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 ?(

  • Hier mal ein Beispiel

  • Ich habe da mal etwas ausgearbeitet:
    https://jsfiddle.net/ao6Le32x/3/


    Damit brauchst Du nur ein zusätzliches, rot eingefärbtes Bild.
    Statt einer image-map habe ich für jeden Bereich ein div über das Bild gelegt. Das funktioniert natürlich nur mit rechteckigen Bereichen, aber ich glaube, das trifft bei dir zu.
    Schau mal, ob das das ist, was Du dir vorgestellt hast.

  • 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 :thumbup:

  • 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?


    -> 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? ?(

  • Manche sagen "geht nicht - gibt' nicht" und ich bin ganz optimistisch, dass sich dein Vorhaben realisieren lässt. Allerdings verstehe ich nicht richtig, was Du vor hast und wo das Problem liegt. Du hast da zwei fiddles gepostet, das erste mit einem Aufklappmenü links und Content rechts. Das zweite mit dem Bild und den hover-Menüs an den Bereichen. Soll jetzt dieser Inhalt aus dem zweiten fiddle der Content im ersten werden?

  • Danke Sempervivum!


    Ganz genau so! 8o
    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 :huh:


    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 ?(

  • So funktioniert es:
    https://jsfiddle.net/Sempervivum/tazpjqwk/6/


    Ich habe lediglich das HTML des zweiten Fiddle, ohne #wrapper, in das div#content1 hineinkopiert und dem div#content1 zusätzlich die Klasse .content gegeben. Danach waren die area-divs zunächst nicht sichtbar. Das lag an dieser CSS-Anweisung:

    CSS
    #content  div {    padding: 10px;    display: none;}

    Sie macht auch die area-divs unsichtbar. So funktioniert es:


    CSS
    #content > div {    padding: 10px;    display: none;}

    Dies macht nur das unmittelbare Kindelement in der ersten Stufe unsichtbar.


    Um bei mehreren content-Containern und ihren Inhalten den Überblick zu bewahren, empfehle ich eine zweistufige Nummerierung, so wie ich es im Fiddle gemacht habe:
    Z. B. area1-3 im ersten div#content1, entspr. dann z. B. area2-4 im zweiten div#content2.
    (War es dies, was Du mit hover-Nummer meintest?)
    Das HTML und das CSS ist jetzt so umfangreich geworden, dass es schwer fällt, in den kleinen Fenstern des Fiddle den Überblick zu behalten.

  • Sorry djheke... ich habe mich wirklich bisschen unglücklich ausgedrückt.


    Sempervivum GENAU!! Das haut soweit hin - besten dank (mal wieder)! :S


    Das einzige Problem ist jetzt nur noch, dass ich mit

    Code
    .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 ?

  • Wenn Du es so gemacht hast:

    CSS
    .area:hover {
        position: absolute;
        border: 0.5px dotted red;
    }.area1:hover {   background-image: url("http://wallpaper-gallery.net/images/wallpaper-red/wallpaper-red-17.jpg");
    }

    würde ich eigentlich erwarten, dass es funktioniert. Wenn nicht, dass lege doch mal ein Fiddle oder eine Testseite mit zwei content-Containern an, damit man es testen kann.

  • Übrigens:

    Zitat

    auf meiner Seite liegen nachher ca. 20 verschiedene hover-Bilder natürlich dann auch mit jeweils unterschiedlichen areas und ausgehenden Verweisen

    Wenn es so viele sind, könntest Du überlegen, die Daten in einer Liste abzulegen und daraus das HTML bzw. DOM zu generieren, entweder mit JS oder mit PHP. Etwa so:

    JavaScript
    var data = [{    image: "url des Bildes",    bg_hover; "url des Hintergrundbildes bei Hover",    areas: [{        top: obere Position,        left: linke Position,        width: Breite,        height: Höhe,        linklabel: Beschriftung des Links im Menü        linkurl: URL des Links        },{        top: obere Position des zweiten Bereichs;           left:
            }]    }, {    Daten für den zweiten Content
    }];

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!