Использование изображения usemap с пользовательским элементом HTML?

В приведенном ниже примере кода я пытаюсь определить свой собственный пользовательский элемент, <custelem>, и я могу его хорошо стилизовать; Однако, я хотел бы также назначить изображение карты к нему - но моя попытка ниже терпит неудачу, так как никогда не наведение на горячих точек в Firefox:Использование изображения usemap с пользовательским элементом HTML?

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Test</title> 
    <script type="text/javascript"> 
    </script> 
    <style type="text/css"> 
#myone { 
    border-color: blue; border-width: 3px; border-style: solid; 
    display: block; 
    background-color: #AAA; 
    /* convert -size 300x300 xc:red red.png */ 
    background: #EFEFEF url(red.png) 50% 50% no-repeat padding-box border-box scroll; 
    background-size: contain; 
    width: 300px; 
    height: 300px; 
} 
    </style> 
</head> 

<body> 
    <custelem id="myone" usemap="#TEST"></custelem> <!-- renders the css, but hotspot mouseovers do not work --> 
    <!-- <img src="red.png" id="myone" usemap="#TEST"></img> <!-- works in FF, but has to have src attribute for mouseovers --> 
    <map id="TEST" name="TEST"> 
    <area href="javascript:alert('A1')" id="A1" alt="A1 text" shape="rect" coords="50,50,100,100"/> 
    <area href="javascript:alert('A2')" id="A2" alt="A2 text" shape="rect" coords="150,150,200,200"/> 
    </map> 
</body> 

</html>

Могу ли я каким-то образом используют usemap с настраиваемым элементом - либо через css, либо JS?

источник

2016-04-11 sdaau

Любая причина вы хотите использовать пользовательский элемент? Если вы предоставите элементу img src прозрачного gif 1px, вы можете затем стилизовать элемент 'img' с помощью css-фона так же, как если бы это был ваш пользовательский элемент. –

Это не карта usemap, это карта изображения. Это объясняет, почему он работает только с изображениями.
Но вы можете исправить это с помощью JS:

[].forEach.call(document.querySelectorAll("custelem[usemap]"), function(node){ 
    var img = new Image(); 
    img.className = "image-map"; 
    img.useMap = node.getAttribute("usemap"); 
    img.title = node.getAttribute("title") || ""; 
    img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg=="; // 1x1 transparent png 
    node.removeAttribute("usemap"); 
    node.appendChild(img); 
});

и немного CSS:

custelem { 
    position: relative; 
} 
custelem img.image-map{ 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

https://jsfiddle.net/u8n6fygz/

источник

2016-04-11 21:54:52 Thomas

wow @Thomas, большое спасибо за это - именно такое решение, которое я искал! PS: для тех, кто задается вопросом, как изменить OP с помощью этого решения, просто убедитесь, что JS находится внутри 'window.onload = function (e) {...}' Cheers! – sdaau

Поскольку этот код удаляет атрибут 'usemap' из' custelem', вы можете вызывать этот код снова и снова без побочных эффектов. На всякий случай вы намерены изменить свой документ и создать новый/более 'custelem'. – Thomas

Использование изображения usemap с пользовательским элементом HTML?

ответ

Смежные вопросы