Ist es möglich, einen Mouseover auf einer Bildkarte mit CSS zu gestalten?

Question

Ich habe ein Bild auf einer Webseite, die auch Links erfordert. Ich verwende eine Image-Map, um die Links zu erstellen, und ich frage mich, ob es eine Möglichkeit gibt, die Form des Bereichs bei Mouseover zu gestalten, um einen kleinen Hauch von Interaktivität zu erzeugen. Ist dies möglich?

Ich habe dies ohne Erfolg versucht:

html

<img src="{main_photo}" alt="locations map"  usemap="#location-map" />
<map name="location-map">
    <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
    <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
    <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>

css

area { border: 1px solid #d5d5d5; }

Irgendwelche Vorschläge?

Answer 1

Nur CSS:

Wenn ich auf dem Weg zum Supermarkt darüber nachdenke, könnte man natürlich auch die ganze Idee mit der Bildkarte weglassen und stattdessen die :hover auf die Elemente über dem Bild (die divs wurden zu a-Blöcken). Was macht die Dinge verdammt viel einfacher, keine jQuery benötigt...

Kurze Erklärung:

• Das Bild befindet sich unten
• 2 x a mit display:block und absoluter Positionierung + opacity:0
• Deckkraft beim Schweben auf 0,2 setzen

Exemple :

.area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
}
#area2 {
    left:320px;
}
#area1:hover, #area2:hover {
    opacity:0.2;
}

<a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />

Originalantwort mit jQuery

Ich habe gerade etwas Ähnliches mit jQuery erstellt, ich glaube nicht, dass man das nur mit CSS machen kann.

Kurze Erklärung:

• Das Bild befindet sich unten
• Divs mit Rollover (Bild oder Farbe) mit absoluter Positionierung + display:none
• Transparentes gif mit der aktuellen #map ist oben (absolute Position) (um den Aufruf von mouseout wenn die Rollover erscheinen)

• jQuery wird verwendet, um die Divs anzuzeigen/auszublenden

  $(document).ready(function() { if ($('#location-map')) { $('#location-map area').each(function() { var id = $(this).attr('id'); $(this).mouseover(function() { $('#overlay' + id).show();

    });
  
    $(this).mouseout(function() {
      var id = $(this).attr('id');
      $('#overlay' + id).hide();
    });
  
  });

  } });

  body, html { margin: 0; }

  emptygif {

  position: absolute; z-index: 200; }

  overlayr1 {

  position: absolute; background: #fff; opacity: 0.2; width: 300px; height: 160px; z-index: 100; display: none; }

  overlayr2 {

  position: absolute; background: #fff; opacity: 0.2; width: 300px; height: 160px; top: 160px; z-index: 100; display: none; }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" /> <div id="overlayr1"> </div> <div id="overlayr2"> </div> <img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" /> <map name="location-map" id="location-map"> <area shape="rect" coords="0,0,300,160" href="#" id="r1" /> <area shape="rect" coords="0,161,300,350" href="#" id="r2"/> </map>

Ich hoffe, es hilft

Answer 2

Mit Pseudoelementen.

HTML:

<div class="image-map-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
    <div class="map-selector"></div>
</div>

<map name="image-map" id="image-map">
    <area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
    <area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
    <area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
    <area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
    <area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
    <area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>

etwas CSS:

.image-map-container {
    position: relative;
    display:inline-block;
}
.image-map-container img {
    display:block;
}
.image-map-container .map-selector {
    left:0;top:0;right:0;bottom:0;
    color:#546E7A00;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
    color:#546E7A80;
}

.map-selector:after {
    content: '';
    position: absolute;
    top: inherit;right: inherit;bottom: inherit;left: inherit;
    background: currentColor;
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: top, left, right, bottom, background;
    pointer-events: none;
}

JS:

$('#image-map area').hover(
    function () { 
        var coords = $(this).attr('coords').split(','),
            width = $('.image-map-container').width(),
            height = $('.image-map-container').height();
        $('.image-map-container .map-selector').addClass('hover').css({
            'left': coords[0]+'px',
            'top': coords[1] + 'px',
            'right': width - coords[2],
            'bottom': height - coords[3]
        })
    },
    function () { 
        $('.image-map-container .map-selector').removeClass('hover').attr('style','');
    }
)

https://jsfiddle.net/79ebt32x/1/

Answer 3

Ich glaube nicht, dass dies nur mit CSS möglich ist (zumindest nicht browserübergreifend), aber das jQuery-Plugin ImageMapster wird das tun, was Sie wollen. Sie können umreißen, Farbe in oder verwenden Sie ein alternatives Bild für Hover / aktive Staaten auf einer Bildkarte.

http://www.outsharked.com/imagemapster/examples/usa.html

Answer 4

Hier ist eine, die rein css ist, die die + nächsten Geschwisterselektor, :hover y pointer-events . Es verwendet technisch gesehen keine Imagemap, aber die rect Konzept wird vollständig übernommen:

.hotspot {
    position: absolute;
    border: 1px solid blue;
}
.hotspot + * {
    pointer-events: none;
    opacity: 0;
}
.hotspot:hover + * {
    opacity: 1.0;
}
.wash {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.6);
}

<div style="position: relative; height: 188px; width: 300px;">
    <img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">

    <div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>
    <div>
        <div class="wash"></div>
        <div style="position: absolute; top: 0; left: 0;">A</div>
    </div>

    <div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>
    <div>
        <div class="wash"></div>
        <div style="position: absolute; top: 0; left: 0;">B</div>
    </div>
</div>

Answer 5

Sie können dies tun, indem Sie einfach die HTML-Datei ändern. Hier ist ein Beispiel:

<hmtl>
  <head>
    <title>Some title</title>
  </head>
  <body> 
  <map name="navigatemap">
    <area shape="rect"  
          coords="166,4,319,41" 
          href="WII.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverWII).png'" 
    />
    <area shape="rect"
          coords="330,4,483,41" 
          href="OT.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOT).png'" 
    />

    <area shape="rect" 
          coords="491,3,645,41" 
          href="OP.htm"  
          onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" 
          onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOP).png'" 
   />
  </map> 

  <img src="Assets/NavigationBar(OnHome).png" 
     name="navbar" 
     usemap="#navigatemap" />
  </body>
</html>