イメージの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要素に1pxの透明なgifのsrcを与えると、あなたのカスタム要素と同じようにCSSの背景を持つ 'img'要素をスタイルすることができます。 –

これは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

ワウ@トーマス、これは多くのおかげで、私が探していたソリューションとまったく同じです！ PS：この解決策でOPを修正する方法を知りたい方は、JSが 'window.onload = function（e）{...}'内部にあることを確認してください。 – sdaau

このコードは 'usemap'属性を' custelem'から削除しているので、このコードを副作用なしで何度も何度も呼び出すことができます。あなたの文書を修正し、新しい/より多くの 'custelem'を作成するつもりである場合に備えて。 – Thomas

イメージのusemapをカスタムHTML要素で使用していますか？

答えて

関連する問題