마우스 오버 이미지에 대한 툴팁

현재 2 가지 기능을 수행 중입니다. 나는 이미지를위한 이미지 맵을 만들었고 누군가가 이미지의이 부분을 가리키면 오른쪽에 가격이 표시되고 마우스 아래에 "발견"이라고 쓰여진 툴 팁이 나타나기를 바란다.마우스 오버 이미지에 대한 툴팁

는 지금은 다음

<!DOCTYPE html> 
<html> 

<script> 
function writeText(txt) { 
    document.getElementById("test").innerHTML = txt; 
} 
</script> 
</head> 

<body> 
<img src ="test.png" alt="Jacket" usemap="#jacket" /> 

<p id="test"></p> 
<map name="jacket"> 
    <area shape="poly" coords="174,361,149,350,180,203,217,213"href="test"; title="Discover" alt="Shop Now" onmouseover="writeText('$60')" /> 
    <map name="Map" id="Map"> 
    <area href="test"; title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" /> 
</map> 
</map> 

</body> 
</html>

그러나 몇 가지 문제가 있습니다

고객이 제가 드릴 수 없습니다
지역 위에 마우스를하지 않을 경우 가격은 사라지지 않는다 툴팁을 표시합니다.

누구든지 이러한 문제를 해결하는 방법에 대해 알고 있습니까? 나는 당신의 도움에 감사

출처

2014-11-08 Rika

당신은 가격을 제거하려면 다음 속성을 추가 할 수 있습니다 : 당신이 당신의 제목이 표시되지 함께 문제가있을 수 있습니다 추가 세미콜론이,

onmouseout="writeText('')"

합니다. 대신이 시도 :

<map name="jacket"> 
    <area shape="poly" coords="174,361,149,350,180,203,217,213" href="test" title="Discover" alt="Shop Now" onmouseover="writeText('$60')" onmouseout="writeText('')" /> 
<map name="Map" id="Map"> 
    <area href="https://jerry123.myshopify.com/products/product1" title="Shop Now" alt="Discover" shape="poly" coords="221,215,183,218,190,164" onmouseover="writeText('$60')" onmouseout="writeText('')" />

출처

2014-11-08 00:32:36 Keith

제목 나는이 마우스 아래에 나타나는 작은 상자에가되고 싶어요 그러나이 나타납니다. – Rika

제목은 어떻게 표시됩니까? 브라우저 툴팁에 대해 이야기하고 있습니까? 다른 팁을 표시하고 마우스를 추적하려면 훨씬 더 진보 된 것을해야 할 것입니다. – Keith

그건 분명히 "고급"의 예입니다. jQuery (또는 equiv)를 사용하고 마우스 움직임을 추적하고 팁을 이동/표시/숨기기해야합니다. Net-a-porter는이를 위해 jQuery를 사용합니다. 그것이 도움이된다면 제 대답을 받아주십시오. – Keith

마우스 오버 이미지에 대한 툴팁

답변

관련 문제