본문 바로가기

.NET

css 화면 클릭 => 새로운 레이어 띄우기

<!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
css 화면 클릭 => 새로운 레이어 띄우기  (2) 2007.08.18
1~100까지 소수 구하기  (0) 2007.08.17
오버로딩과 오버라이딩  (0) 2007.08.17
3X3 마방진  (1) 2007.08.14