jQuery ImageMapster：突出顯示的問題

我在使ImageMapster突出顯示我的地圖區域時遇到了一些麻煩。在閱讀文檔時，我的印象是，只需使用$（'img'）.mapster（）;我應該可以看到我的地圖區域鼠標懸停。jQuery ImageMapster：突出顯示的問題

我沒有看到這種情況發生。我可以選擇區域，但不會將鼠標懸停。

但是，如果我在地圖上放置了onMouseOver和onMouseOut屬性區域，那麼我可以使高亮功能起作用。

這是我的問題的關鍵。當我試圖將ImageMapster與一些動態C＃代碼集成時，我無法在地圖區域放置onMouseOver和onMouseOut屬性。 C＃對象WebControls.CircleHotSpot不支持自定義屬性。

所以我的問題是雙重的：

我怎樣才能獲取地圖區域突出，只有ImageMapster代碼工作？
有沒有辦法給C＃對象添加屬性WebControls.CircleHotSpot？

這裏是我正在使用的JavaScript和HTML標記。

的JavaScript：

$(document).ready(
    function() 
    { 
     $('#Image1').mapster({ 
      fillOpacity: 0.5, 
      mapKey: 'alt', 
      staticState:true, 
      render_highlight: 
      { 
       fillColor: '2aff00', 
      }, 
      render_select: 
      { 
       fillColor: 'ff000c', 
      } 
     }); 

     $('#Image2').mapster({ 
      mapKey: 'alt', 

      stroke: true, 
      strokeOpacity: 1.0, 
      strokeColor: '000000', 
      strokeWidth: 2, 

      fill: true, 
      fillColor: '0000ff', 
      fillOpacity: 0.25, 

      render_select: 
      { 
       fillOpacity: 0.75, 
       fillColor: 'ff0000' 
      }, 
      render_highlight: 
      { 
       fillOpacity: 0.5, 
       fillColor: '00ff00' 
      } 
     }) 
    } 
);

標記：

<img id="Image1" src="bicycleparts.png" usemap="#ImageMap1" /> 

<map name="ImageMap1" id="ImageMap1"> 
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1" onMouseOver="$('#Image1').mapster('highlight','1')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2" onMouseOver="$('#Image1').mapster('highlight','2')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3" onMouseOver="$('#Image1').mapster('highlight','3')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4" onMouseOver="$('#Image1').mapster('highlight','4')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5" onMouseOver="$('#Image1').mapster('highlight','5')" onMouseOut="$('#Image1').mapster('highlight',false)" /> 
</map> 

<img id="Image2" src="bicycleparts.png" usemap="#ImageMap2" /> 

<map name="ImageMap2" id="ImageMap2"> 
    <area shape="circle" coords="100,50,50" href="" title="1" alt="1"/> 
    <area shape="circle" coords="200,100,50" href="" title="2" alt="2"/> 
    <area shape="circle" coords="300,150,50" href="" title="3" alt="3"/> 
    <area shape="circle" coords="400,200,50" href="" title="4" alt="4"/> 
    <area shape="circle" coords="500,250,50" href="" title="5" alt="5"/> 
</map>

來源

2012-10-12 Benjamin Higgins

一位朋友建議用'$（window）.load'代替'$（document）.load'，表示圖像尚未加載。這沒有奏效。 –

對此的解決方案是確保href是不是空白。如果在我的情況下，我設置href =「＃」然後ImageMapster工作正常 - 突出顯示沒有mouseover/mouseout功能的標籤。

現在對於C＃，我可以設置CircleHotSpot.NavigateURL =「＃」它以編程方式解決了我的解決方案。

感謝@joshingaround的解決方案。

來源

2012-10-16 14:32:21

謝謝你分享你的答案。 – gibberish

謝謝，你救了我很多時間:) –

jQuery ImageMapster：突出顯示的問題

回答

相關問題