在文本前面设置图像映射
set an Image-map in front of a text
我有这张图片的 img 和图片映射。
现在我想将文本放置在图像映射后面,但在图像前面 css-属性: z-index.
文本仍然可以点击并且不在图像映射后面。
这是代码:
<div style="position:relative;">
<img src="/images/bildungssystem_notext.png" alt="Bildungssystem" style="margin-top:2px;" usemap="#uebersicht"/>
<map name="uebersicht" id="uebersicht">
<area shape="poly" coords="365,55,398,56,432,58,431,53,450,53,450,59,521,62,521,52,542,53,542,64,558,65,558,52,544,52,496,51,494,37,395,36,394,52" id="Sonderschule" alt="Sonderschule" onclick="return false;" href="#" target="_self" />
</map>
<div class="text-layer volksschule" >Primary School (Volksschule)</div>
</div>
</div>
为了更好的监督,我删除了一些元素。
这里是文本层的 CSS class:
position: absolute;
color: #fff;
z-index: 1;
地图的 z-index 为 2,Image 为 -1
请帮帮我,
伯恩哈德
我用不同的方法解决了我的问题。
我忽略了 z-index 并使用 css-属性 "pointer-events" 并将其设置为 none.
pointer-events: none;
我有这张图片的 img 和图片映射。
现在我想将文本放置在图像映射后面,但在图像前面 css-属性: z-index.
文本仍然可以点击并且不在图像映射后面。 这是代码:
<div style="position:relative;">
<img src="/images/bildungssystem_notext.png" alt="Bildungssystem" style="margin-top:2px;" usemap="#uebersicht"/>
<map name="uebersicht" id="uebersicht">
<area shape="poly" coords="365,55,398,56,432,58,431,53,450,53,450,59,521,62,521,52,542,53,542,64,558,65,558,52,544,52,496,51,494,37,395,36,394,52" id="Sonderschule" alt="Sonderschule" onclick="return false;" href="#" target="_self" />
</map>
<div class="text-layer volksschule" >Primary School (Volksschule)</div>
</div>
</div>
为了更好的监督,我删除了一些元素。
这里是文本层的 CSS class:
position: absolute;
color: #fff;
z-index: 1;
地图的 z-index 为 2,Image 为 -1
请帮帮我,
伯恩哈德
我用不同的方法解决了我的问题。 我忽略了 z-index 并使用 css-属性 "pointer-events" 并将其设置为 none.
pointer-events: none;