Verwenden einer Bild-UseMap mit einem benutzerdefinierten HTML-Element?

Im folgenden Codebeispiel versuche ich, mein eigenes benutzerdefiniertes Element zu definieren, <custelem>, und ich kann es gut formatieren; aber ich würde auch einen Image-Map, um es zuweisen möge - aber mein Versuch unten ausfällt, da es nie per Mouse over auf den Hotspots in Firefox:Verwenden einer Bild-UseMap mit einem benutzerdefinierten HTML-Element?

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

Kann ich irgendwie ein usemap mit einem benutzerdefinierten Elemente verwenden - entweder über CSS oder JS?

Quelle

2016-04-11 sdaau

Gibt es Gründe, eine benutzerdefinierte Element verwenden möchten? Wenn Sie Ihrem img-Element ein src eines transparenten 1px-Gifs geben, können Sie dann das 'img'-Element mit einem CSS-Hintergrund so formatieren, als wäre es Ihr benutzerdefiniertes Element. –

Es ist keine UseMap, es ist eine Image-Map. Dies erklärt, warum es nur für Bilder funktioniert.
Aber man kann dies mit JS beheben:

[].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); 
});

und ein wenig css:

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

https://jsfiddle.net/u8n6fygz/

Quelle

2016-04-11 21:54:52 Thomas

wow @Thomas, vielen Dank dafür - genau die Art von Lösung, nach der ich gesucht habe! PS: für diejenigen, die sich wundern, wie man das OP mit dieser Lösung verändert, stellen Sie einfach sicher, dass das JS innerhalb 'window.onload = function (e) {...}' Cheers! – sdaau

Da dieser Code das 'usemap'-Attribut vom' custelem' entfernt, können Sie diesen Code ohne Nebenwirkungen immer wieder aufrufen. Nur für den Fall, dass Sie beabsichtigen, Ihr Dokument zu ändern und neue/mehr 'custelem's zu erstellen. – Thomas

Verwenden einer Bild-UseMap mit einem benutzerdefinierten HTML-Element?

Antwort

Verwandte Themen