웹 사이트에 그래픽 차트 데이터를 표시해야합니다. 이 차트에는 클릭 할 때 이미지의 더 큰 버전을 표시해야하는 몇 개의 이미지가 있습니다. 차트 자체는 현재 하나의 이미지 파일로 저장됩니다.이미지가 이미지 맵으로 표시되거나 다른 방법이 있습니까?
초기 생각은 이미지 맵을 사용하여 전체 차트 이미지에 이미지가있는 위치를 지정한 다음 jQuery를 사용하여 이미지 가장자리를 강조 표시하는 것입니다. 그런 다음 라이트 박스 또는 팬시 박스와 같은 것을 사용하면 이미지를 클릭 한 더 큰 버전이 표시됩니다.
이것이 바람직한 결과를 얻는 가장 좋은 방법인지 또는 더 나은 기술이 있는지에 대한 약간의 통찰력이 있습니다.
감사합니다.
툴팁을 사용하지 않는 이유는 무엇입니까?
HTML
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="#" title="<img src='sun.gif'>" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="#" title="<img src='merglobe.gif'>" />
<area shape="circle" coords="124,58,8" alt="Venus" href="#" title="<img src='venglobe.gif'>" />
</map>
)
$('area').qtip({
position: {
my: 'left center',
at: 'right center',
target: $('img')
}
});