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

Frage Imagemap, alle klickbaren Bereiche bei Mouseover anzeigen

CFJH

Neues Mitglied
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 ?
 
Werbung:
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
 
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.

*** Link entfernt, weil Seite nicht mehr erreichbar ***
 
Zuletzt bearbeitet:
Werbung:
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 ?
 
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
 
Werbung:
Zurück
Oben