通过使用“onmouseover”是否可以在地图上堆叠透明 png？

Question

很抱歉打扰了一些可能完成起来很愚蠢的事情，但我被困住了。 我已经尝试了很多方法来让“鼠标悬停”在地图图像上堆叠一张透明图片，但我做错了。 我已经放弃了使用 PNG 图像的可能性，我使用 JPG 图片来制作我的地图，但结果很差，因为我正在制作一个巨大的国家地图，并且压缩 8 位 PNG 可以节省很多在这种情况下的空间，与压缩的 JPG 相比，后者丑陋且尺寸更大（至少在这种情况下）。 顺便说一句，这里是一个示例地图的代码，使用 Javascript 来调整它的大小。 请注意，JS 在小提琴中不起作用，但它对我的原始地图起作用。我不得不把它留下来说明清楚，因为我真的需要它，任何可能的解决方案都应该考虑到它。

代码如下：

<area id="planA" alt="" title="planA" href="#" shape="rect" coords="184,122,408,322" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('choices-map-img').src= 'http://www.clker.com/cliparts/a/5/8/e/1298546227709322759png-transparency.png';" onmouseout="if(document.images) document.getElementById('choices-map-img').src= 'http://blogs-images.forbes.com/jacobmorgan/files/2015/03/Choice.jpg';"  />

<area id="planB" alt="" title="planB" href="#" shape="rect" coords="572,125,796,318" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('choices-map-img').src= 'http://www.clker.com/cliparts/a/5/8/e/1298546227709322759png-transparency.png';" onmouseout="if(document.images) document.getElementById('choices-map-img').src= 'http://blogs-images.forbes.com/jacobmorgan/files/2015/03/Choice.jpg';"  />
</map>

Here's the fiddle with JS.

总之，我想看到的是背景图像上的骰子，透明效果很好。 非常感谢任何帮助。

Answer 1

PNG 是一种可行的方法，因为它们可以包含 Alpha 通道的数据，这与任何其他图像格式不同。为什么它们需要是 JPG？您说自己 8 位 PNG 在某些情况下会节省空间。如果是我，我会将它们更改为 PNG。

Answer 2

这可以通过将图像一个接一个地堆叠来完成。我还需要 JQuery 库来使用鼠标悬停和鼠标悬停。

DEMO

$( "#planA" ).mouseover(function() {
    $("#plan_a").css("display","block");
    $("#plan_a").css("width","1000");    
  })
  .mouseout(function() {
     $("#plan_a").css("display","none");
  });

$( "#planB" ).mouseover(function() {
    $("#plan_b").css("display","block");
    $("#plan_b").css("width","1000");    
  })
  .mouseout(function() {
     $("#plan_b").css("display","none");
  });

.main
{
	display:block;
	width:100%;
}

.main img
{
	float:left;
	left:0px;
	position:absolute;
	width:1000;
}

#plan_a, #plan_b
{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
	<img id="main_img" src="http://blogs-images.forbes.com/jacobmorgan/files/2015/03/Choice.jpg" usemap="#choices" alt=""/>
	<map name="choices" id="choices-id">
		<area id="planA" alt="" title="planA" href="#" shape="rect" coords="184,122,408,322" style="outline:none;" target="_self" />
		<area id="planB" alt="" title="planB" href="#" shape="rect" coords="572,125,796,318" style="outline:none;" target="_self" /> 
 	</map> 
	<img id="plan_a" src="http://www.clker.com/cliparts/a/5/8/e/1298546227709322759png-transparency.png" usemap="#choices" />
	<img id="plan_b" src="http://www.fnordware.com/superpng/pnggradHDrgba.png" usemap="#choices" />
</div>

注意：图像的堆叠可以有多种方式，我的就是这个。去 任何你喜欢的适合你的东西。