融合圖交換

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>