어서 노를 저어라!

2009/07/03

ImageMap 에 컬러 입히기 – 텍스트큐브

Online Image Map Editor
이미지맵을 즉석에서 만들어주는 사이트이다.

이미지위에 네모난상자를 그리고 거기에 링크를 걸거나,
메시지를 띄우는것을 요즘 보아왔다.
Flickr나 옥션등에서 봐왔는데,
html은 이미지맵으로 설정한 상자나 모양을 볼수 없는데,
자바스크립트나 css를통해 숨어있는 이녀석을
보여주게 할수있다.

css로의 처리는 여기에있다.
물론 여기에는 자바스크립트를 이용한 방법도 함께있다.

대충
<head><style type=”text/css” media=”screen”>

dl#imgExplanationMap{
 margin: 0;
 padding: 0;
 background: transparent url(office.jpg) top left no-repeat;
 height: 261px;
 width: 446px;
 position: relative;
}
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

dd#imgExpDef1{ top: 65px; left: 10px; }
dd#imgExpDef1 a{ position: absolute; width: 410px; height: 70px; text-decoration: none; border: 3px solid #FFFF00; }
dd#imgExpDef1 a span{ display: none; }
dd#imgExpDef1 a:hover {}
dd#imgExpDef1 a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: relative;
 border: 1px solid #BCBCBC;    // 외곽선 설정
 bottom: -50%;
 margin: 0;
 padding: 5px;
 width: 85%;
}
</style></head><body>

<div id=”imgExplainMap” style=”MARGIN-LEFT: auto; WIDTH: 446px; MARGIN-RIGHT: auto; TEXT-ALIGN: center”>
 <dl id=”imgExplanationMap”>
  <dd id=”imgExpDef1″><a href=”#”><span>자이제 설명을 시작해보실까?</span></a></dd>
 </dl>
</div>

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: