HTML5 - Mouseover über <li> soll auf Image-Map Bereich hervorheben

Foxbone · 10 Mai 2017

Hallo Zusammen,

ich bin neu, unerfahren, verzeifelt und brauche den Rat ;-)

Ich möchte anhand dem angefügten Code über die Teile links mit der Mause gehen und auf dem Bild rechts, die dargelegten Bereiche hervorheben, als wenn ich per hover mit der Maus direkt darauf gehen würde.

Beispiel:
1. If hover "Grundplatte" ; then "hervorheben" rect links
2. If hover "Metallträger" ; then "hervorheben" rect mitte
3. If hover "Metallwinkel" ; then "hervorheben" rect rechts

Des Weitern möchte ich aber bei Klick ein hinterlegtes Bild öffnen bzw. gerne als Königsdisziplin genau dort wo das aktuelle Bild ist, das neue Bild in der gleichen Größe öffnen (aber dies wäre Schritt zwei)

Bitte wenn möglich keine großen Ausschweifungen, es geht genau um diesen Sachverhalt.

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
</head>
<body>
   <div >
       <table >
           <td style="width: 200px" >
                         <br>
                         <li style="margin-left:10px">
                             <a href="Bilder/2-1.jpg" >Grundplatte
                             </a>
                         </li>
                           <li style="margin-left:10px">
                               <a href="Bilder/5-1.jpg" >Metallträger
                               </a>
                           </li>
                           <li style="margin-left:10px">
                               <a href="Bilder/6-1.jpg" >Metallwinkel
                               </a>
                           </li>
                           <td >
<!-- SVG Bild --><div>
                       <svg viewBox="0 0 400 325">
                           <defs>
                               <style>
                                   rect:hover {
                                   fill: yellow;
                                   opacity: 0.3;
                                   }
                                   circle:hover {
                                   fill: green;
                                   opacity: 0.1;
                                   }
                                   ellipse:hover {
                                   fill: blue;
                                   opacity: 0.1;
                                   }
                               </style>
                           </defs>              
                           <image id="B1" href="[URL]https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3nQlcrnJwSFr3b4fUvgPXUkonCGSZLnuWeL-ePhZYwBhh6kAp[/URL]" width="300" height="220" alt="Teile-MAP"
                           title="Teileuebersicht - Details bitte klicken">
                           </image>
                           <a href="Bilder/9-1.jpg" >
                           <rect x="15" y="22" opacity="0.1" width="45" height="140">
                           </rect>
                           </a>
                           <a href="Bilder/4-1.jpg"  >
                           <rect x="240" y="45" opacity="0.1" width="45" height="125">
                           </rect>
                           </a>
                           <a href="Bilder/6-1.jpg"  >
                           <rect x="130" y="90" opacity="0.1" width="40" height="35">
                           </rect>
                           </a>
                      
                       </svg>
                   </div>
                   </td>
       </table>
   </div>
   </body>

</html>

MrMurphy · 10 Mai 2017

Hallo

Desktopbildschirme mit Maus sind bereits in der Minderheit mit stetig sinkendem Anteil. Touchscreengeräte kennen keine hover-Effekt.

Deshalb sollte zunächst geklärt werden wie Touchscreen-Anwender die Seite benutzen können? Hast du dir dazu etwas ausgedacht?

Gruss

MrMurphy

Foxbone · 11 Mai 2017

Hallo.
Danke für den Hinweis, die Alternative könnte dann nur ein Klick sein und den SVG-Bereich dann mit einem Link zu versehen.

Kannst Du generell dabei helfen oder ist dies ohne JS gar nicht möglich ?

scbawik · 11 Mai 2017

Foxbone schrieb:
Hallo.
Danke für den Hinweis, die Alternative könnte dann nur ein Klick sein und den SVG-Bereich dann mit einem Link zu versehen.

Kannst Du generell dabei helfen oder ist dies ohne JS gar nicht möglich ?

Möglich schon, Google mal nach "Checkbox/Radio Hack".
Alternativ dazu gibt es auch noch den ":target"-Selector.

Während es zwar ganz lustig/herausfordernd sein kann, unterschiedlichste Dinge CSS-only umzusetzen, erzeugt es es in der Praxis nur unnötigen "Code-Smell". Mach es deshalb einfach mit JS - sauber, unkompliziert, flexibel.

SpiceLab · 11 Mai 2017

scbawik schrieb:
Während es zwar ganz lustig/herausfordernd sein kann, unterschiedlichste Dinge CSS-only umzusetzen, erzeugt es es in der Praxis nur unnötigen "Code-Smell". Mach es deshalb einfach mit JS - sauber, unkompliziert, flexibel.

Ganz genau :)

Deshalb lautet meine Empfehlung:

jQuery-Plugin ImageMapster -> Bind the image map to an external list -> boundList
Fiddle-Demo: Example of using boundList
Weitere Features & Fiddles: Demos

Lustig: Der letzte Release (v1.2.10) fiel auf meinen Geburtstag

Foxbone · 12 Mai 2017

scbawik schrieb:
Möglich schon, Google mal nach "Checkbox/Radio Hack".
Alternativ dazu gibt es auch noch den ":target"-Selector.

Während es zwar ganz lustig/herausfordernd sein kann, unterschiedlichste Dinge CSS-only umzusetzen, erzeugt es es in der Praxis nur unnötigen "Code-Smell". Mach es deshalb einfach mit JS - sauber, unkompliziert, flexibel.

@ scbawik

Super Hinweis, der bringt mich schon wieder etwas weiter - DANKE :) !

Warum ich JS nicht möchte hat den Hintergrund, dass ich nicht gewährleisten kann, dass jeder Nutzer JS installiert hat und es auf Android Geräten auch nicht zwanghaft funktioniert, soweit ich es bisher in Erfahrung bringen konnte. Leider fehlt mir bisher dazu die Erfahrung....

Kann man generell sagen das eine Homepage mit JS auch Ohne Installation funktioniert oder besteht da das Risiko dass es nicht angezeigt wird und dann den Hinweis - Kein JS installiert, Anzeige nicht möglich - erhält ?

Ich möchte einfach nicht der Tatsache unterliegen wie es bei Flash ist .... oh sie haben kein Flash installiert und es ist nichts mehr auf der Seite zu lesen ... war das verständlich ???

Spicelab schrieb:
Ganz genau :)

Deshalb lautet meine Empfehlung:

jQuery-Plugin ImageMapster -> Bind the image map to an external list -> boundList

Fiddle-Demo: Example of using boundList

Weitere Features & Fiddles: Demos

Lustig: Der letzte Release (v1.2.10) fiel auf meinen Geburtstag

@Spicelab
Auch dir vielen Dank für die Links und Hilfe, aber auch hier bleibt besteht meine Frage, was mache ich wenn jemand kein JS installiert hat ? Analog zu Flash ... nicht installiert, keine Anzeige oder kann man es gewährleisten dass es immer geht???

scbawik · 12 Mai 2017

Foxbone schrieb:
@ scbawik

Super Hinweis, der bringt mich schon wieder etwas weiter - DANKE :) !

Warum ich JS nicht möchte hat den Hintergrund, dass ich nicht gewährleisten kann, dass jeder Nutzer JS installiert hat und es auf Android Geräten auch nicht zwanghaft funktioniert, soweit ich es bisher in Erfahrung bringen konnte. Leider fehlt mir bisher dazu die Erfahrung....

Kann man generell sagen das eine Homepage mit JS auch Ohne Installation funktioniert oder besteht da das Risiko dass es nicht angezeigt wird und dann den Hinweis - Kein JS installiert, Anzeige nicht möglich - erhält ?

Ich möchte einfach nicht der Tatsache unterliegen wie es bei Flash ist .... oh sie haben kein Flash installiert und es ist nichts mehr auf der Seite zu lesen ... war das verständlich ???

Umso mehr Websites JS einsetzen, umso nutzloser wird das Internet für JS-Verweigerer.
Ehrlichgesagt haben nur extrem komische Menschen JS deaktiviert und machen gegenüber der Masse nur einen Promillewert aus. Von 100.000 Nutzern haben vielleicht 2 JS deaktiviert.

Anders als Flash ist JS direkt in jedem Browser (Auch Android) verankert. "Installiert" hat es also jeder.

SpiceLab · 12 Mai 2017

Foxbone schrieb:
@Spicelab
Auch dir vielen Dank für die Links und Hilfe, aber auch hier bleibt besteht meine Frage, was mache ich wenn jemand kein JS installiert hat ? Analog zu Flash ... nicht installiert, keine Anzeige oder kann man es gewährleisten dass es immer geht???

Wie schon @scbawik darauf hinwies, ist JavaScript in jedem Browser verankert, sowie per Voreinstellung aktiviert, und muß vom User explizit in den Einstellungen deaktiviert werden.

Die Firefox-Entwickler haben schon vor Jahren diesen direkten Weg aus der GUI genommen, und man muß nun den Umweg über about:config in der Adreßzeile einschlagen, um den Eintrag javascript.enable true auf false zu setzen, oder ein Addon wie "NoScript", "Toggle JS" installieren, um wieder auf kurzem Wege diese Option zu erreichen.

Selbstverständlich darf eine Seite nicht darunter leiden, wenn JS im Browser deaktiviert ist, und sollte so konzipiert sein, dass auch in diesem Fall die Inhalte für den Besucher erreichbar sind.

https://de.wikipedia.org/wiki/Unobtrusive_JavaScript

Am Ende kann die Zielgruppe das ausschlaggebende Moment sein, ob der Einsatz von JS ratsam ist, oder halt nicht.

Ehrlich gesagt habe ich diese Frage, die noch vor 10 Jahren in den Foren heiß diskutiert wurde, für mich persönlich mit "Pro JS" beantwortet, und habe bis heute kein negatives Feedback einstecken müssen

Die Zahl derer muss so schwindend gering sein, dass es sich nicht lohnt, für diese Gedankenspiele Zeit zu investieren.

Dass Flash in den meisten Browsern nicht mehr zur Verfügung steht, ist seinen -zum Teil kritischen- Sicherheitslücken zu verdanken

Foxbone · 29 Mai 2017

Jetzt habe ich nochmal eine Frage zur Image-Map.
Ich habe den nachfolgenden Code bei mir implementiert, allerdings bekomme ich die SVG-Box nicht zentriert.
Könnt ihr mir dazu einen Tip geben? Habe versucht das DIV als auch das SVG über Style mit Margin:0 auto; oder auch text-align:center zu zentrieren und habe es nicht hin bekommen.

Code:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
div {
   text-align:center;
   margin:0 auto;
}

svg {
   text-align:center;
   margin:0 auto;
   }

</style>



</head>

<body>
                   <div>
                   <svg viewBox="0 0 600 600">
                       <defs>
                               <style>
                                   rect:hover {
                                   fill: yellow;
                                   fill-opacity: 0.3;
                                   }
                               </style>
                       </defs>             
                       <image href="https://santatracker.google.com/images/og.png" width="80%" height="80%" margin-top="300">
                       </image>
                       <rect x="40" y="140" opacity="0.8" width="70" height="50">
                       </rect>
                       <rect x="160" y="140" opacity="0.8" width="70" height="50">
                       </rect>
                       <rect x="280" y="140" opacity="1" width="70" height="50" fill-opacity="0" stroke="red">
                       </rect>
                   </svg>
               </div>
</body>

</html>

Zudem würde mich noch interessieren:
1. ob man nicht nur Formen, sondern auch Text auf die Map legen kann (auch mit einem Link) ?
2. Wenn man das Ganze mit
<map name="Teile-MAP">
<area shape="rect" coords="69, 225, 295, 309"> macht, ob man diesem "rect" auch Farbe und Opacity zuweisen kann? (Hintergrund ist, dass ich mit einem WYSIWYG-Editor schneller die Rect´s verschieben kann und man die Koordinaten nicht herumprobieren muss.

Danke für die Hilfe vorab.

HTML5 - Mouseover über <li> soll auf Image-Map Bereich hervorheben

Foxbone

Neues Mitglied

MrMurphy

Senior HTML'ler

Foxbone

Neues Mitglied

scbawik

Senior HTML'ler

SpiceLab

Mod | ZENmechanic

Foxbone

Neues Mitglied

scbawik

Senior HTML'ler

SpiceLab

Mod | ZENmechanic

Foxbone

Neues Mitglied

Neueste Beiträge