Frage Imagemap, alle klickbaren Bereiche bei Mouseover anzeigen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CFJH

Neues Mitglied
3 Oktober 2020
5
0
1
54
Hallo,
ich habe eine (Anfänger-)Frage bzgl imagemap bzw. visueller Anzeige der area-Tags.

Definiert ist ein Bild mit imagemap und entspr. anklickbaren Bereichen (sind alles Rechtecke in unterschiedlichen Größen). Es geht um vorgerechnete Fraktal-Bilder, wo man sich dann durch die einzelnen Vergrößerungen klicken kann.

Nun möchte ich daß diese Rechtecke auf der Grafik sichtbar werden, sobald man mit der Maus über die Grafik fährt. Dabei soll folgendes beachtet werden:
1. das Ganze soll nicht durch eine 2. Grafik erfolgen, die dann nachgeladen wird. Es soll(te) idealerweise mit reinem HTML (und evtl CSS) umgesetzt werden (notfalls auch mit Javascript)
2. alle klickbaren Bereiche sollen auf einmal angezeigt werden, sobald der Mauszeiger über die Grafik bewegt wird. Ich habe reichlich Beispiele im Internet und hier im Forum gefunden, wo der Bereich erst angezeigt wird, wenn man innerhalb eines klickbaren Bereiches ist. Da die aber teilweise sehr klein sind und vereinzelt auf der Grafik liegen, sind die schwer zu finden.

Welche Lösungsmöglichkeiten gibt es dafür ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Da sehe ich verschiedene Lösungen:

1. Ich habe da diesen Highlighter gefunden:
Javascript hier:
Dieser hat eine Option, dass die Bereiche immer an sind: alwaysOn
Im Javascript Zeile 295 bis 317 findet man den Code, der alle Bereiche hervor hebt. Da müsstest Du jetzt nur noch einen Eventlistener auf die gesamte Map registrieren, der diesen Code ausführt.

2. Du schreibst, dass die Bereiche alles Rechtecke sind. Dann könntest Du auf die Imagemap verzichten und die Rechtecke durch HTML-Elemente erzeugen. Bei denen ist es dann eine Kleinigkeit, sie beim Hover hervorzuheben, indem Du den Rand einschaltest und/oder eine Hintergrundfarbe setzt. Das wäre dann eine Lösung nur mit HTML und CSS.

Ergänzung zu 2.: Eine Imagemap hat den Nachteil, dass sie nicht responsiv ist. Dieses Problem wird z. B. bei Selfhtml besprochen:
Die Lösung 2. kann dagegen problemlos responsiv ausgelegt werden.

Bei Selfhtml wird eine 3. Lösung angegeben, nämlich keine Imagemap sondern eine SVG-Grafik zu verwenden, die dann ebenfalls responsiv ausgelegt werden kann.

Ein weiteres Problem ist, dass es auf Touch-Geräten kein Hover gibt und auch keinen befriedigenden Workaround wenn ein Link auf dem betr. Element liegt. Eine Lösung könnte sein, in diesem Fall einen Button vorzusehen, der das Hervorheben ein- uns ausschaltet.
 
Zuletzt bearbeitet:

CFJH

Neues Mitglied
3 Oktober 2020
5
0
1
54
Erst einmal danke für die Info.

Allerdings sind das genau die Lösungen die ich nicht möchte. Diese Beispiele hatte ich schon im Vorfeld bei meinen Suchen gefunden.

Wie gesagt, es sollen alle klickbaren Bereiche gleichzeitig hervorgehoben werden, sobald die Maus irgendwo über der Grafik ist, auch außerhalb der klickbaren Bereiche.
Das wäre einfach mit einer 2. Grafik zu lösen, welche identisch zur 1. ist, nur daß da schon die entspr Bereiche markiert sind. Wg Speicherplatzbegrenzung auf meinem Webspace will ich die 2. Grafik vermeiden. Momentan überlege ich, ob ich die 2. Grafik per PHP aus der 1. Grafik erzeuge, die Rechtecke einzeichne und diese dann für die Umschaltung verwende. Aber das muß doch eleganter gehen ...

Jürgen
 

basti1012

Senior HTML'ler
26 November 2017
1.476
158
63
39
Minden
sebastian1012.bplaced.net
Leider ist es nicht möglich, area-Elemente mit CSS so zu stylen, dass sie beim Überfahren mit der Maus oder Anklicken farblich gekennzeichnet werden.
Deswegen wäre die Lösung von Sempervivum sehr gut, du baust es gleich mit HTML und CSS zusammen dann wäre es am einfachsten
2. Du schreibst, dass die Bereiche alles Rechtecke sind. Dann könntest Du auf die Imagemap verzichten und die Rechtecke durch HTML-Elemente erzeugen. Bei denen ist es dann eine Kleinigkeit, sie beim Hover hervorzuheben, indem Du den Rand einschaltest und/oder eine Hintergrundfarbe setzt. Das wäre dann eine Lösung nur mit HTML und CSS.

Sind deine Bilder und Imagemap schon alle fertig oder kannst du es noch mit HTML und CSS umbauen?
Wenn gar nichts mehr geht, kannst du die Area before Elemente nutzen.
Area Position auslesen, Werte in das before Element setzen und dann stylen.
Mit Rect und Circle geht das eigentlich recht gut.

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Wg Speicherplatzbegrenzung auf meinem Webspace will ich die 2. Grafik vermeiden.

Meine Lösung Nr. 2 braucht keine 2. Grafik, nur die HTML-Elemente mit ein wenig HTML- und CSS-Text, deren Speicherbedarf minimal ist.

Und Lösung 3. benutzt zwar eine Grafik, aber diese wäre SVG und vektorbasiert und die Elemente für die Bereiche würden ebenso nur ein wenig Text mit minimalem Speicherbedarf brauchen. Informiere dich darüber bevor Du diese Lösung ablehnst.

Und die Lösung Nr. 1 benutzt ein Canvas-Element, das zwar genau genommen eine Grafik ist, aber diese wird dynamisch auf dem Client erzeugt und braucht überhaupt keinen Webspace, nur das bisschen Javascript.

D. h. wenn der Haupteinwand ist, dass eine zweite Grafik zu viel Platz auf dem Webspace belegt, greift dieser bei keiner der 3 Lösungen.
 
Zuletzt bearbeitet:

CFJH

Neues Mitglied
3 Oktober 2020
5
0
1
54
Hallo,
ich habe mal eine Beispielseite erstellt, was ich möchte:
http://www.cfjh.de/mandel/jrn/test_div.html
Diese Lösung verwendet allerdings eine 2. Grafik zum Umschalten.
(wobei ich hier gerade das Problem festgestellt habe, daß die Markierungen wieder verschwinden, wenn man mit dem Mauszeiger darüber kommt, das soll nicht sein).

Mit allen bisher genannten Lösungen habe ich das nicht hinbekommen, bzw. die Areas werden erst sichtbar, wenn man mit der Maus darüber ist oder sie sind von vornherein sichtbar.
Da ich mich mit HTML kaum und mit java(script) garnicht auskenne, gibt es evtl. ein Beispiel, wo man sich das abgucken kann ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Ich habe mal eine Demo mit meinem 2. Vorschlag gemacht. Wenn Du die Breite des Browserfensters veränderst, verändert sich die Größe des Bildes und die Overlays, die die Bereiche hervor heben, passen sich an.
Code:
<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        #container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        #container img {
            width: 100%;
            height: auto;
        }

        .area {
            position: absolute;
            border: 2px solid transparent;
        }

        /* Beim Hover über den Container
        schalten wir das Hervorheben durch die Overlays ein */
        #container:hover .area {
            border: 2px solid darkgray;
            background-color: rgba(127, 127, 0, 0.3);
        }

        /* Im folgenden werden die Abmessungen und die Positionen
        der Bereiche definiert */
        #area1 {
            top: 5%;
            left: 5%;
            width: 15%;
            height: 8%;
        }

        #area2 {
            top: 20%;
            left: 30%;
            width: 10%;
            height: 10%;
        }

        #area3 {
            top: 50%;
            left: 75%;
            width: 20%;
            height: 15%;
        }

        #area4 {
            top: 75%;
            left: 30%;
            width: 15%;
            height: 8%;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="images/0a.jpg">
        <!-- Die Overlays, die die Bereiche hervor heben -->
        <div id="area1" class="area"></div>
        <div id="area2" class="area"></div>
        <div id="area3" class="area"></div>
        <div id="area4" class="area"></div>
    </div>

</body>


</html>
 

CFJH

Neues Mitglied
3 Oktober 2020
5
0
1
54
Hallo
ich habe jetzt eine funktionierende Lösung.
In deinem Beispiel habe ich jetzt noch die Links nachgetragen, brauchte dafür noch einen zusätzlichen Style, damit die vollflächig anklickbar sind.
Das wird wohl die Lösung werden, mit der ich das umsetzte.
Soweit einmal vielen Dank an alle, die mir geholfen haben.

Code:
<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Test</title>

    <style>
        #container {
            position: relative;
            display: inline-block;
            /*width: 100%;*/
        }

        #container img {
            /*width: 100%;
            height: auto;*/
        }

        .area {
            position: absolute;
            border: 1px solid transparent;
        }

        /* Beim Hover über den Container
        schalten wir das Hervorheben durch die Overlays ein */
        #container:hover .area {
            border: 2px solid darkgray;
            background-color: rgba(127, 127, 0, 0.3);
        }

        /* damit die Links vollflächig im div-Element klickbar sind*/
        div a {
          display:block;
          width: 100%;
          height: 100%;
        }

        /* Im folgenden werden die Abmessungen und die Positionen
        der Bereiche definiert */
        #area1 {
            top: 10px;
            left: 20px;
            width: 250px;
            height: 100px;
        }
        #area2 {
            top: 20%;
            left: 30%;
            width: 10%;
            height: 10%;
        }

        #area3 {
            top: 50%;
            left: 75%;
            width: 20%;
            height: 15%;
        }

        #area4 {
            top: 75%;
            left: 30%;
            width: 15%;
            height: 8%;
        }
    </style>
</head>

<body>
    <div id="container">
        <img src="0a.jpg">
        <!-- Die Overlays, die die Bereiche hervor heben -->
        <div id="area1" class="area"><a href="http://www.wetterstation-porta.info"></a></div>
        <div id="area2" class="area"><a href="http://www.linux.org"></a></div>
        <div id="area3" class="area"><a href="nirgends"></a></div>
        <div id="area4" class="area"><a href="unbekannt"></a></div>
    </div>

</body>
</html>
Jürgen
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Wie man das Thema in diesem Forum als "gelöst" markiert weiß ich nicht, es gibt jedoch den Like-Button unten rechts, den kannst Du gern drücken, wenn dir ein Beitrag geholfen hat :smile: