인터넷정보

이미지 위에 마우스 올리면 테두리 생기게

알 수 없는 사용자 2007. 10. 18. 14:01
<html>
<head>

<style type=text/css>
<!--
.pic { border: solid 1 #FFFFFF }
.deepskyblue { border: solid 1 deepskyblue }
.yellow { border: solid 1 yellow }
.palegreen { border: solid 1 palegreen }
.blue { border: solid 1 blue }
.red { border: solid 1 red }
//-->
</style>

</head>
<body>

<pre style=font-size:9pt;>

<a href="#" onMouseOver="dare.className='deepskyblue'" onMouseOut="dare.className='pic'">
<img id="dare" src="http://oxtag.com/zboard/data/gallery/baby_21.jpg" border="1" class="pic"></a>



- 설명 -

.pic(class이름)에서 테두리의 기본형태를 (여기서는 테두리모양 solid, 굵기1, 색은 #FFFFFF)
.deepskyblue 등에서 마우스가 올라갔을 때의 테두리형태(여기서는 테두리모양 solid, 굵기1, 테두리색은 deepskyblue 등...)를 지정한다.

#은 링크할 주소, 그림에 부여하는 id (dare 라는 이름이 세 번 들어갔다. 세 번 모두 똑같이 써줘야 한다
deepskyblue와 pic은 <head>와 </head>사이에 넣었던 css에서 지정한 class 이름,
다음은 이미지 주소를 써주고
1은 테두리 굵기
이런 식으로 id이름을 정해줘가며 계속 추가해가면 된다.

</pre>
</body>
</html>
반응형