묻고답하기
css에서요... 마우스를 가져가면.. 블릿이미지를...
2003.12.16 11:16
css에서요. 링크걸린 문자'위에 마우스를 가져가면.. 글씨가 굵어지면서
앞에 지정한 블릿아이콘 이미지가 붙게 하고 싶거든요.
혹시 이게 가능할까요?
스타일 시트로 하거나 아니면 자바스크립트라도 그럼 조언부탁드립니다.
앞에 지정한 블릿아이콘 이미지가 붙게 하고 싶거든요.
혹시 이게 가능할까요?
스타일 시트로 하거나 아니면 자바스크립트라도 그럼 조언부탁드립니다.
그 다음에 스타일에 추가합니다.
<style>
a:hover.o1 { text-weight: bold; }
</style>
..이렇게 하면 그 링크에 마우스를 올릴때마다 굵게 나옵니다.
불릿이 나오는 것은 여러가지 방법이 있습니다만, 작은 메뉴에서 불릿 아이콘이 모두 똑같은 경우는 간단하게 스크립트 하나 만들어주는
것도 괜찮습니다.
<head><script>
function onBullet (idName) { idName.src = "마우스 올렸을 때 나오는 이미지" ; }
function offBullet (idName) { idName.src = "마우스 올리지 않았을 때 나오는 이미지" ; }
</script></head>
그리고, 불릿 이미지를 두장 준비하시거나 한장은 투명으로 준비하세요...
편의상 마우스를 올리지 않았을 때나 처음에 보여주는 불릿을 'b_off.gif', 마우스가 올라갔을 때 보여지는 불릿을
'b_on.gif'라고 하죠. 그럼 이제 <a>부분에 적용해주시면 됩니다.
<img src="불릿_off" id=b1><a href="#" onMouseOver="onBullet(b1)" onMouseOut="offBullet(b1)">클릭하세요</a>
이렇게 하면 링크된 '클릭하세요'에 마우스를 올리게되면 불릿 이미지가 b_on.gif로 바뀝니다.
이미지의 아이디값을 다르게 주시고, onBullet()과 offBullet()에 들어가는 인수는 이미지의 아이디값을 넣어주면 됩니다.
제가 언뜻 생각한 가장 간단한 방법이 아닐까 합니다 ^^*