Highlight Rechteck in Imagemap

Bit von einem Newbie Frage und nicht viel kommt mit Google ans Licht, zumindest nichts Neues.Highlight Rechteck in Imagemap

Ich habe eine Imagemap, die einfach eine horizontale Symbolleiste ist. Was ich letztendlich tun möchte, ist ein rgba Rechteck über den Bereich zu ziehen, wenn die Maus darüber schwebt.

Aber ich kann hier nicht viel erreichen. Es scheint, dass Bereichselemente ein bisschen anders funktionieren. Wie mache ich das bitte in reinem Javascript? Keine Frage.

<html> 
<body> 
<script> 
    function tellname(txt){ 
    document.getElementById("info").innerHTML=txt; 
    } 
</script> 
<style> 
    .highlight:hover { 
     outline: 1px solid orange; 
    } 
</style> 
    <img src="toolbar.png" usemap="#toolbar" /> 
    <map name="#toolbar"> 
     <area class="highlight" shape="rect" coords="0,0,25,25" onclick="tellname('Centre')"/> 
     <area class="highlight" shape="rect" coords="25,0,50,25" onclick="tellname('Reset Camera')" /> 
     <area class="highlight" shape="rect" coords="50,0,75,25" onclick="tellname('Camera Preset')" /> 
     <area class="highlight" shape="rect" coords="95,0,120,25" onclick="tellname('Stop Render')" /> 
     <area class="highlight" shape="rect" coords="120,0,145,25" onclick="tellname('Restart Render')" /> 
     <area class="highlight" shape="rect" coords="160,0,185,25" onclick="tellname('Pause Render')" /> 
     <area class="highlight" shape="rect" coords="190,0,205,25" onclick="tellname('Start Render')" /> 
    </map> 
    <div id='info'</div> 
</body> 
</html>

Quelle

2017-03-17 Matt

Bereiche haben keinen Stil. Erstellen Sie eine echte Symbolleiste. Die Verwendung von Bildern zum Layout ist seit Jahrzehnten veraltet. – Thomas

<map name=#toolbar"> sollte <map name="toolbar"> sein.

Allerdings spielte ich mit Karte und Bereich eine Weile, konnte aber nicht so arbeiten, wie Sie brauchen. Es gibt ein Problem beim Setzen des Hover für <map> und <area>. Vielleicht kann ein Experte erklären warum.

(1) Hier ist eine Alternative, mit getrennten Bildern für Ihre Links:

<html> 
<head> 
<style type="text/css"> 
    img:hover { 
    border:2px solid red; 
} 
</style> 

</head> 
<body> 
<a href="page1.html"><img src="img_1.jpg" /></a> 
<a href="page2.html"><img src="img_2.jpg" /></a> 
<a href="page3.html"><img src="img_3.jpg" /></a> 
</body> 
</html>

(2) Oder finden Sie in diesem Beitrag: Make a border to the areas in the image maps , die einen Verweis auf ImageMapster umfasst, eine sehr flexible Bibliothek für die Erstellung von Bildkarten vieler Arten.

Ich benutze ImageMapster, um dynamisch Bildkarten von Explosionsdiagrammen zu erstellen. Für jedes Bild wird die zugehörige Karte aus den Kartenkoordinaten in einer Datenbank erstellt. Wenn ich über die Bildbereiche blät- tere, werden Details des zugeordneten Bereichs in einem Textfeld angezeigt, genau wie mit der Funktion tellname(txt).

Quelle

2017-03-17 03:47:13

Highlight Rechteck in Imagemap

Antwort

Verwandte Themen