光標不改變USEMAP /地區的情況下指針

我有以下的HTML代碼，我不能在所有瀏覽器完全正確的工作：光標不改變USEMAP /地區的情況下指針

<div id ="right_header">  
     <img id = "usemapsignin" src="/images/sign-in-panel-wo-FB.png" usemap = "#signin"> 
</div>  
     <map name = "signin" > 
      <area shape = "rect" coords = "30,10, 150, 50" target = "_blank" alt = "signin" id="signin" 
        onMouseOver="document.images['usemapsignin'].style.cursor='pointer'" 
      onMouseOut="document.images['usemapsignin'].style.cursor='auto'"/> 
      <area shape = "rect" coords = "0,113, 172, 150" target = "_blank" alt = "restowner" id = "restowner" 
       onclick = "alert('Hello Restaurant Owner!')" /> 
     </map>

我想，當移到改變光標指針這是usemap的一部分。但它不適用於Chrome/Safari。

任何幫助將不勝感激。

來源

2011-07-05 nitin

Chrome和Safari不支持更改地圖或區域元素的CSS。在區域上獲得鼠標指針的唯一直接方法是：

<area ... href="javascript:void(0);" />

來源

2011-08-19 18:39:06

完美！謝謝 –

IE不支持在區域標籤中更改光標。

你要做的就是用JS來欺騙它。

<img id="someimage" scr="images/image.jpg" usemap="#myareamap" /> 

<map name="myareamap"> 
    <area shape="poly" alt="test" title="test" coords="0,0, 50,50, 50,100, 0,100, 0,0" onmouseover="changeimage('someimage', 'newimagesrc')" /> 
</map>

這是你的JavaScript

function changeimage(id, imagesrc){ 
    document.getElementById(id).src = imagsrc; 
    if (imagesrc = "images/image.jpg"){ 
     document.getElementById(id).style.cursor = "default"; 
    } else { 
     document.getElementById(id).style.cursor = "pointer"; 
    } 
}

這將做兩件事情：

將讓你很容易把它們滾動在圖像映射改變圖像。
會給你一個錯覺，只有區域地圖的一部分會改變光標。

來源

2012-07-31 20:36:06 Webmaster

，但它只想改變光標而不是整個圖像的光標。 – Jirapong

這是我的最佳答案。當鼠標離開區域時，光標不再是指針，當懸停時則是。這是非常簡單和聰明的解決方案，我沒有任何錯誤。 – ivkremer

這應該適用於IE，Firefox，Chrome和Safari。

<img id="img_id" src="image.gif" border="0" usemap="#map4" /> 
<map id ="map4" name="map4"> 
    <area shape ="poly" coords="5, 0, 100, 10, 94, 66, 0, 50" 
      href="javascript:void(0);" 
      onmouseover="document.getElementById('img_id').style.cursor='pointer';" 
      onmouseout="document.getElementById('img_id').style.cursor='';"> 
</map>

來源

2012-08-27 10:32:49 Jirapong

在IE中運行良好。在鉻 - 你需要使用@elDuderino答案。我正在使用twise – inon

這應該是公認的答案，在Chrome的最新版本中工作正常 – Kira

我有類似的問題。解決方案是將屬性href="#"添加到該區域，而不是執行CSS hack。

來源

2012-09-24 11:58:52 aromerooca

這適用於IE –

所有這些解決方案都是不好用的黑客（對我來說他們根本沒有工作）。經過多次研究和更多思考後，我確定問題在於瀏覽器不知道如何渲染區域元素，因此無法設置樣式。如果您使用HTML5元素，您應該熟悉這一挑戰。這是當燈泡熄滅..

爲了解決這個問題，只需將區域標記設置爲塊級元素。然後你可以根據需要來設計它。對我很好：

area { 
    display: block; 
    cursor: pointer; 
}

來源

2013-04-16 21:12:13 elDuderino

Welp，這不會在IE中工作（去圖）..我會更新我的解決方案時我可以圈回來解決我們的老朋友IE。 – elDuderino

不錯 - Webkit排序沒有JS - iE，誰在乎呢？ – T4NK3R

對我來說，似乎像Safari一樣，顯示它確實需要顯示的指針光標：block – dijipiji

我發現了一個很好的解決方案，使用Jquery！

$('area').hover(function(){ 
    //Set your cursor to whatever 
    $('body').css('cursor', 'help'); 
}, function() { 
    //set your cursor back to default 
    $('body').css('cursor', 'initial'); 
})

來源

2015-09-15 18:15:21 Davis

光標不改變USEMAP /地區的情況下指針

回答

相關問題