Как правильно использовать usemap с :hover?

339

12 декабря 2016, 10:10

Можно ли, чтобы картинка ( например, 200 х 100 ) увеличивалась при :hover, и при этом срабатывал usemap, т.е. совместить два кода:

<head> 
<style>
img.zoom {
  cursor: pointer;
  min-height:100px;
  }
img.zoom {  
  max-width: 100px;
}
img.zoom:hover {
  max-width: none;
}
</style>
<head> 
<body>
<img src="map.gif"   class='zoom'  />  <!--код 1 -->
<br/><br/><br/>
<img src="map.gif"  usemap="#map"  />  <!--код 2 -->
<map name="map">
  <area shape="RECT"   coords="0,0,109,100"  title="красный" />
  <area shape="RECT"   coords="109,2,197,100"  title="желтый"/>
</map>
</body>
Titles должны появляться только при увеличении картинки.

Answer 1

Я использую http://davidlynch.org/projects/maphilight/docs/

Там и демки есть.

Без плагинов не выйдет сделать красивый ховер. По моему area map и ховеры особо не дружат.

Что-то подобное как Вам нужно я реализовывал вот тут --- http://pirogovoland.ru/index.php/component/content/article?id=9

По ховеру на area блок делается display:block

хтмл:

<img src="img/map/map_colored1000.png" usemap="#map2_2" class="mapped_img podskazki" >
<map name="map2_2">
<area shape="poly" id='text_3' class="areablock" coords="66,143,56,148,64,150,73,153,77,154,82,155,92,153,102,150,91,145,81,140,79,139,77,137">
</map>
<div class="textblock" id="text_3textblock"><b>Участок № 3</b><br>Площадь участка: 788.66 м<sup>2</sup><br>Статус: свободен</div>

css:

.big_img.mapp.wrapper .mapped_img.podskazki {
    z-index: 5;
}
.big_img.mapp.wrapper .textblock {
position: absolute;
display: none;
z-index: 4;
}

js:

// Вывод всплывающих окон
var curView = '';
jQuery(document).ready(function() {
    switchToView(curView);
    jQuery('.areablock').mouseenter(function() {
        var id = '#' + jQuery(this).attr('id');
        switchToView(id);
        return false;
    });
    jQuery('.areablock').mouseleave(function() {
        jQuery(curView + 'textblock').hide();
    });
});
function switchToView(id) {
    if (curView != id) {
        jQuery(curView + 'textblock').hide();
    }
    jQuery(id + 'textblock').show();
    curView = id;
}
// позиционирование всплывающих окон
var id2 = '#' + jQuery(this).attr('id');
        var position = $(this).attr('coords').split(',');
        x = +position[0] + 20;
        y = +position[1] + 40;
        $(id2 + 'textblock').css('top', y + "px");
        $(id2 + 'textblock').css('left', x + "px");
    });

Это довольно сложный пример. Я, надеюсь, что все части кода из примера, чтобы функционировало, выдрал))

Но, если и нет - это все должно натолкнуть на мысль как делать.