通过使用“onmouseover”，可以在地图上堆叠透明PNG吗？

Question

对不起，有些东西可能是如此愚蠢的完成，但我卡住了。 我尝试过很多方法让“onmouseover”在地图图像上叠加一张透明图片，但我无法弄清楚。 我放弃了使用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通道数据，所以PNGs是一条可行的路。为什么他们需要JPG格式？你说你自己8位PNG节省了他们在某些情况下所做的空间。如果这是我，我会将它们更改为PNG。

Answer 2

这可以通过堆叠图像来完成。另外我需要JQuery库来使用mouseover &鼠标。

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 
 
{ 
 
\t display:block; 
 
\t width:100%; 
 
} 
 

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

 
#plan_a, #plan_b 
 
{ 
 
\t display:none; 
 
}

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

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