Question

很抱歉打扰一些可能是如此愚蠢的事情，但我被困住了。我已经尝试过多种方式来获得＆＃34; onmouseover＆＃34;将透明图片堆叠在地图图像的顶部，但我无法正确使用。我已经放弃了使用PNG图像的可能性，并且我已经使用JPG图片来制作我的地图，但结果很差，因为我正在制作一个巨大且压缩的国家的地图8与压缩的JPG相比，在这种情况下，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 Library来使用mouseover＆amp;鼠标移开。

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>

注意：图像堆叠可以通过多种方式完成，我的就是这样。走用你喜欢的任何东西都适合你。

通过使用＆＃34; onmouseover＆＃34;是否可以在地图上堆叠透明的png？

2 个答案: