내 웹 사이트에 내비게이션 막대로 이미지가 있고 다른 페이지에 링크 할 수있는 핫스팟이 있습니다. 문제는 텍스트가 이미지의 일부이기 때문에 마우스를 올리면 텍스트의 스타일을 변경할 수 없습니다. 마우스 오버시 텍스트/핫스팟이 눈에 띄기를 원하는 반면 배경색은 마우스 오버시 변경 될 수 있습니다. 그게 가능하니? 지역 또는지도를 사용하여 CSS에서이를 수행 할 수있는 방법이 있습니까? Javascript를 사용해야하는 경우 누군가가 나를 도와 줄 수 있습니까?마우스를 올려 놓을 때 이미지 맵의 배경을 변경하십시오.
하나의 이미지를 탐색 표시 줄로 사용한 이유가 있습니까?
핫 스폿이있는 단일 이미지 대신 각 탐색 링크에 개별 이미지를 사용하고 싶습니다. 그렇게하면 호버에서 쉽게 이미지를 변경하거나 CSS 이미지 위치 지정을 사용할 수 있습니다. 이 여기에 설명되어 있습니다 :
http://css-tricks.com/video-screencasts/7-three-state-menu/
많은 다른 장소와 함께 나는 확신한다.
이미지 맵이나 개별 이미지를 사용하지 않는 것이 좋습니다.
대신 CSS 스프라이트를 사용하십시오 : 단일 이미지 파일을 메뉴 링크에 배경 이미지로 추가하지만 배경 이미지의 위치를 다르게 지정하십시오. 자세한 내용은 this Line 25 tutorial을 참조하십시오.
그게 내가 CSS 이미지 위치에 의해 의미, 그냥 적절한 용어를 사용하지 않았어, 미안 해요. –
오, 기다려, 꽤 동일하지 않아. 이 기법은 비슷하지만 이미지의 두 가지 버전과 세 가지 위치를 포함하는 각 메뉴 선택에 대한 개별 이미지가 있습니다. 당신은 하나의 이미지를 사용하고 수평 및 수직 오프셋을 변경합니다. 이것 좀 더 읽어야합니다. –
2015 년이고 대부분의 브라우저가 SVG를 지원하기 때문에 이미지 맵 대신 SVG 맵을 사용하는 것이 좋습니다. CSS를 사용하여 핫스팟 스타일을 지정할 수 있습니다. 예 : 'svg a {fill : palegoldenrod; } svg a : hover {fill : papayawhip; }' –