融合图交换

Question

我试图做一个融合图交换，但asp不喜欢这样做。所以下一个最好的事情就是融合图表渲染，然后用onmousedown代替图表。只有这一点不太好。我曾尝试在代码中添加div并使用id，但交换不起作用。我在document.popChartDiv.src中使用了'popChartDiv'，但是这个ID是调用Literal3的渲染。我不知道如何切换Literal3与它下面的2格（testimage.png和testimage1.png）。看起来图表是焦点，图像无法覆盖图表。我也尝试过使用z-index，但那不起作用。所以我卡住了。

<div style="width:798px; margin-left:auto; margin-right:auto; height:250px; float:left; overflow:hidden;" id="popChartDiv"> 
    <script src="../../Dashboard/Charts/FusionCharts.js" type="text/javascript"></script> 
    <div id="popChartContainer"></div> 
    <asp:Literal ID="Literal3" Visible="true" runat="server"></asp:Literal> 
     <div id="line3ChartContainer"></div> 
     <asp:Literal ID="Literal9" Visible="true" runat="server"></asp:Literal> 
     <img src="/images/testimage.png" width="798" height="250" name="swap"/> 
</div> 
<div style="width:38px; height:250px; float:left;"> 
    <img src="../../images/labortab.png" style="float:left; width:38px; height:125px;" id="labor" onmousedown="document.swap.src='/images/testimage.png';"/> 
    <img src="../../images/odctab.png" style="float:left; width:38px; height:125px;" id="odc" onmousedown="document.swap.src='/images/testimage1.png';"/> 
    <script type="text/javascript"> 
     $('#labor').hover(function() { 
      $(this).attr('src', '/images/labortabhover.png'); 
     }, function() { 
      $(this).attr('src', '/images/labortab.png'); 
     }); 

     $('#odc').hover(function() { 
      $(this).attr('src', '/images/odctabhover.png'); 
     }, function() { 
      $(this).attr('src', '/images/odctab.png'); 
     }); 


     </script> 
</div> 

Answer 1

如果您呈现基于Flash的图表，它可能是窗口模式（wMode）设置为window。有一个Adobe help article on SWF stacking order，指出当窗口模式参数设置为window时，SWF对象的z索引将被忽略。

在纯ASP.NET（C＃）中，如果您使用的是RenderChart方法，那么将第九个参数设置为true（或false）应该会对您有所帮助。请参阅creating first chart using C# documentation article of FusionCharts中的相关章节。

如果您使用JavaScript更加舒适，可以尝试在图表上调用setTransparent(false);以将wMode设置为不透明或透明。

假设你的病历ID是line3Chart，代码将

<script type="text/javascript"> 
    // Add this code snippet. Make sure to replace 
    // "line3Chart with correct chart id 
    FusionCharts("line3Chart").setTransparent(false); 

    $('#labor').hover(function() { 
     $(this).attr('src', '/images/labortabhover.png'); 
    }, function() { 
     $(this).attr('src', '/images/labortab.png'); 
    }); 

    $('#odc').hover(function() { 
     $(this).attr('src', '/images/odctabhover.png'); 
    }, function() { 
     $(this).attr('src', '/images/odctab.png'); 
    }); 
</script>