Можно ли нарисовать мышь на карте изображения с помощью CSS?

У меня есть изображение на веб-странице, где также требуются ссылки. Я использую карту изображения для создания ссылок, и мне интересно, есть ли способ стилизовать форму области при наведении курсора для незначительного касания интерактивности. Возможно ли это?

Я пробовал это без успеха:

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; }

Любые предложения?

Ответ 1

Только CSS:

Размышляя об этом по дороге в супермаркет, вы, конечно же, можете пропустить идею всего изображения и использовать :hover для элементов поверх изображения (сменили div на a-blocks). Что делает вещи намного проще, не нужно jQuery...

Краткое объяснение:

Изображение находится внизу
2 x a с дисплеем: блок и абсолютное позиционирование + непрозрачность: 0
Установите непрозрачность 0,2 при наведении указателя мыши

Пример:

.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" />

Ответ 2

Я не думаю, что это возможно, просто используя CSS (не перекрестный браузер, по крайней мере), но плагин jQuery ImageMapster будет делать то, что вам нужно. Вы можете очертить, покрасить или использовать альтернативное изображение для зависания/активных состояний на карте изображения.

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

Ответ 3

Здесь, который является чистым css, который использует следующий селектор +, :hover и pointer-events. Он не использует технику imagemap, но концепция rect полностью переносится:

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

Ответ 4

Извините, что на этот вопрос встал в конце игры, но у меня есть ответ на нерегулярные (не прямоугольные) фигуры. Я решил использовать SVG для создания масок, где я хочу связать это событие.

Идея состоит в том, чтобы присоединить события к встроенным SVG, супер дешевым и даже удобным для пользователя, потому что есть множество программ для создания SVG. SVG может иметь слой изображения в качестве фона.

http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/

Ответ 5

Вы можете использовать Canvas

в HTML, просто добавьте canva

<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>

И в Javascript (только пример, который нарисует прямоугольник на картинке)

var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image(); 
img.src = '{main_photo}';
img.onload = function() {    // after the pic is loaded
    ctx.drawImage(this,0,0); // add the picture
    ctx.beginPath();         // start the rectangle
    ctx.moveTo(50,50);
    ctx.lineTo(200,50);
    ctx.lineTo(200,200);
    ctx.lineTo(50,200);
    ctx.lineTo(50,50);

    ctx.strokeStyle = "sienna"; // set color
    ctx.stroke();               // apply color
    ctx.lineWidth = 5;
    // ctx.closePath();
};

Ответ 6

Вы можете сделать это, просто изменив html. Вот пример:

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