<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*레이어 관련 클래스 */
.gallerycontainer
{
/* relative: BOX 위치가 기준위치*/
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img
{
border: 3px double red; /*선이 더블 색깔 빨강 */
margin: 0 5px 5px 0;
}
.thumbnail:hover /* :hover 링크 배경이미지를 투명하게*/
{
background-color: transparent;
}
.thumbnail:hover img /* 이미지위의 테두리 블루*/
{
border: 1px solid blue;
}
.thumbnail span/* 이미지위의 테두리 블루 span: 동일한 기능을 적용시킬 컴럼의 수*/
{ /*CSS for enlarged image*/
/*위치를 고정*/
background-color: lightyellow;
padding: 5px;
left: 50px;
top: 50px;
border: 1px dashed gray; /*사이즈 스타일 컬러*/
visibility: hidden; /*hidden, visible */
/*color: black;*/
text-decoration: none;
}
.thumbnail span img
{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span
{ /*CSS for enlarged image*/
visibility: visible;
top: 250;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
/*글자 관련 클래스*/
.eng
{
font-family: verdana;
color: red;
font-size: 13pt;
font-weight: bold;
}
.ko
{
/*
font-family: 돋움;
font-size: 19pt;
font-weight: bold; */
/* 스타일, 사이즈, 글꼴 */
font: bold 19pt 돋움;
color: blue;
}
</style>
</head>
<body>
<TABLE>
<TR>
<TD><a class="thumbnail eng" href="#thumb">
<img src="ha01.jpg" width="100px" height="66px" border="0" /><span>
<img src="ha01_1.jpg" /><br />Simply beautiful.</span></a></TD>
</TR>
<TR>
<TD><a class="thumbnail eng" href="#thumb">
<img src="MONO7.jpg" width="100px" height="66px" border="0" /><span>
<img src="MONO_7.jpg" /><br />So real, it's unreal. Or is it?</span></a></TD>
</TR>
<TR>
<TD><a class="thumbnail ko" href="#thumb">
<img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span>
<img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> </TD>
</TR>
<TR>
<TD><a class="thumbnail ko" href="#thumb">
<img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span>
<img src="media/horses.jpg" /><br />Run wild with horses.</span></a>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
'.NET' 카테고리의 다른 글
| Ajax와 DOM이용해서 웹 구현 2 (3) | 2007.08.20 |
|---|---|
| Ajax와 DOM이용해서 웹 구현 1 (0) | 2007.08.20 |
| 1~100까지 소수 구하기 (0) | 2007.08.17 |
| 오버로딩과 오버라이딩 (0) | 2007.08.17 |
| 3X3 마방진 (1) | 2007.08.14 |