[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시

Computer/Design 2012/01/19 22:22
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<style> 
/* --- base --- */ 
a.tooltip { position: relative; text-decoration: underline; } 
a.tooltip:hover { color: #999999; text-decoration: none !important; } 

a.tooltip:hover:after, a.tooltip:hover:before { display: block; } 

/* --- tooltip container --- */ 
a.tooltip:before { 
content: attr(rel); 
display: block; 
width: 140px; 
    position: absolute; 
z-index: 1000; 
    bottom: 150%; 
    left: -10px; 
    padding: 5px 10px 8px 10px; 
text-align: left; 
    color: #ffffff; 
    display: none; 
/* background */ 
background: #404040; /* CSS2 */ 
background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#404040)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */ 
background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); /* IE6-9 */ 
/* border-radius */ 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
/* box-shadow */ 
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
/* text-shadow */ 
text-shadow: 0px 1px 0px #292929; 
} 

/* --- tooltip arrow --- */ 
a.tooltip:after { 
content: ""; 
display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
z-index: 1000; 
bottom: 18px; 
left: -2px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
border-top: 6px solid #404040; 
    display: none; 
background: transparent;
} 
</style> 
</head> 
<body> 
<br><br><br><br> 
<span><a href="#" class="tooltip" rel="이런 저런 내용이나 설명">링크나 제목</a></span> 
</body> 
</html> 



외국사이트 돌아다니다 이런식으로 가능한줄 처음 알았네요 ㅜ.ㅜ 
맨날 Javascript나 레이어 처리만 했었는데 -0- 
여러곳에 사용할때 편할것 같습니다. 

IE9, Chrome16 , FF9 등에서 확인 하였습니다. 
난 너무 최신버전만 좋아해 ㅜ.ㅜ

index.html
 

'Computer > Design' 카테고리의 다른 글

[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012/01/19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007/10/26
이미지 툴바 감추기  (2) 2005/06/25
이메일 네임택 만들어주는 사이트  (1) 2005/05/15
Posted by 알찬돌삐
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

와우.....open-flash-chart 이거 와방 좋네요.

Computer/Design 2007/10/26 18:11

회사에 내부 인트라넷에 통계용 그래프를 이전에는 VML 을 이용해서 작성했었는데

VML 이건 완전 캐노가다. ㅠㅠ.

VML 로직 짜는데 머리 다 빠지는줄. 그런데도 영 볼품은 없고.

그러다가 open-flash-chart 라는걸 알게됨......

이야 와방 굳임.!

굳!굳!굳!


[ 새 창으로 보기 ]


'Computer > Design' 카테고리의 다른 글

[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012/01/19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007/10/26
이미지 툴바 감추기  (2) 2005/06/25
이메일 네임택 만들어주는 사이트  (1) 2005/05/15
Posted by 알찬돌삐
TAG open-flash-chart, openflashchart, VML, 오픈 플래쉬 차트
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

이미지 툴바 감추기

Computer/Design 2005/06/25 01:12
익스플로러버전6 부터 지원되는 이미지툴바를 제어하는 방법입니다.
MSDN에 있는 내용을 간략히 정리해봤읍니다.

관련문서: [ http://msdn.microsoft.com/library/default.asp?url=/workshop/misc/mypictures/mypictures_ovw.asp ]

모든 이미지의툴바 숨김
[CODE]<head> <meta http-equiv="imagetoolbar" content="no"> <!-- 모든 이미지에 툴바가 나타나지 않는다. --> </head> <body> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]


특정 이미지의툴바 보여줌

[CODE]<head> <meta http-equiv="imagetoolbar" content="no"> </head> <body> <img src="1.jpg" galleryimg="yes"> <!-- 이곳 이미지에만 이미지툴바가 나타난다. --> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]


특정 이미지의툴바 감춤

헤데에 http-equiv="imagetoolbar" content="no" 를 선언하지 않고
특정 이미지만 툴바가 나타나지 않도록 설정할 수 있읍니다.

[CODE]<body> <img src="1.jpg" galleryimg="no"> <!-- 특정 이미지만 툴바가 나타나지 않는다. --> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]

출처 : PHPSCHOOL 에서 우정원님의 글

'Computer > Design' 카테고리의 다른 글

와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007/10/26
이미지 툴바 감추기  (2) 2005/06/25
이메일 네임택 만들어주는 사이트  (1) 2005/05/15
한국의 전통색  (0) 2005/03/07
Posted by 알찬돌삐
트랙백 0개, 댓글 2개가 달렸습니다

댓글을 달아 주세요

  1. waitfor 2005/06/25 01:26  댓글주소  수정/삭제  댓글쓰기

    툴바.. 생각보다 거추장스러워보이는 경우가 많아요. 저도 전부터 적용을 해두고 있는데.. 쓸만합니다. :D

  2. crazyidol 2005/06/25 01:38  댓글주소  수정/삭제  댓글쓰기

    waitfor//
    그렇죠... 좀 거추장스럽죠
    헉 출처를 안 밝히고 가져왔네.
    수정해야겠당.

이메일 네임택 만들어주는 사이트

Computer/Design 2005/05/15 22:53
블로그 방문도중 네임택 만들어주는 사이트가 링크되어있어서
방문해봤다.
신기하다 ^_^*
이런거 첨 봐서 ㅎㅎ
나두 하나 만들어봤당.








어떤가 ㅎㅎㅎ

아래로 방문하면 만들어준다
http://cat.powerdb.net/email/custom.php







>>ㅑ 아래 세개는 마루호스팅 커뮤니티에서 만든건데...
귀엽다 ^_^;

'Computer > Design' 카테고리의 다른 글

와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007/10/26
이미지 툴바 감추기  (2) 2005/06/25
이메일 네임택 만들어주는 사이트  (1) 2005/05/15
한국의 전통색  (0) 2005/03/07
Posted by 알찬돌삐
트랙백 0개, 댓글 1개가 달렸습니다.

댓글을 달아 주세요

  1. waitfor 2005/05/15 23:00  댓글주소  수정/삭제  댓글쓰기

    트랙백 보고 왔습니다.
    네임택 심플하고 좋네요~!

한국의 전통색

Computer/Design 2005/03/07 22:57
무채색계(無彩色界)
흑백1D1E2393,89,83,52
백색FFFFFF0,0,0,0
회색A4AAA738,27,31,0
구색959EA245,32,32,0
치색61626472,64,62,4
연지회색6F606E55,58,40,20
설백색DDE7E712,4,7,0
유배색E7E6D29,5,18,0
지배색E3DDCB6,6,17,4
소색D8C8B210,15,26,5
적색계(赤色界)
적색B8264721,98,68,8
홍색F15B5B0,80,60,0
적토색9F494C29,80,64,17
휴색68323540,80,66,44
갈색96614731,61,73,21
호박색BD7F4121,51,84,8
추향색C3886619,48,61,6
육색D7796411,62,59,2
주색CA5E5915,75,62,4
주홍색C2335218,94,60,5
담주색EA84744,59,50,0
진홍색BF2F7B20,94,17,4
선홍색CE5A9E16,79,2,0
연지색BE577B19,77,28,7
훈색D977939,64,20,2
진분홍색DB4E9C9,84,0,0
분홍색E2A6B47,39,14,1
연분홍색E0709B6,69,11,1
장단색E163506,75,70,1
석간주색8A4C4430,71,65,30
흑홍색8E6F8040,54,31,15
황색계(黃色界)
황색F9D5373,13,89,0
유황색EBBC6B6,25,67,1
명황색FEE1342,7,89,0
담황색F5F0C54,2,27,0
송화색F8E77F4,4,62,0
자황색F7B9382,29,89,0
행황색F1A55A3,40,73,0
두록색E5B98F8,27,45,1
적황색ED91494,51,80,0
토황색C8852C18,50,97,5
지황색D6B03814,26,91,3
토색9A6B3130,54,91,20
치자색F6CF7A3,18,61,0
홍황색DDA28F9,39,38,2
자황색BB9E8B22,33,40,7
금색별색
청록색계(靑綠色界)
청색0B6DB789,56,0,0
벽색00B5E373,5,4,0
천청색5AC6D059,0,20,0
담청색00A6A996,4,40,0
취람색5DC19B62,0,51,0
양람색6C71B564,58,0,0
벽청색448CCB72,36,0,0
청현색00649499,59,22,3
감색02689293,57,26,2
남색6A5BA868,73,0,0
연람색7963AB60,69,0,0
벽람색6979BB64,52,0,0
숙람색45436C86,84,40,9
군청색4F599F80,73,6,0
녹색41714182,44,95,9
명록색16AA5281,5,94,0
유록색6AB04864,8,97,0
유청색569A4972,20,96,1
연두색C0D84D29,0,87,0
춘유록색CBDD6124,0,78,0
청록색00977097,15,74,0
진초록색0A8D5E87,26,82,1
초록색1C924985,20,98,2
흑록색2E674E89,52,83,9
비색72C6A555,0,45,0
옥색9ED6C038,0,30,0
삼청색5C6EB471,59,0,0
뇌록색39766474,27,59,6
양록색31B67574,0,74,0
하염색24544183,43,75,39
흑청색1583AF84,39,17,0
청벽색18B4E969,8,0,0
자색계(紫色界)
자색6D1B4341,95,45,40
자주색89236A40,96,18,20
보라색9C499842,85,1,1
홍람색733E7F58,85,10,15
포도색5D346270,90,35,20
청자색403F9590,90,1,1
벽자색84A7D347,25,1,1
회보라색B3A7CD28,32,1,1
담자색BEA3C923,36,1,1
다자색47302E75,86,85,35
적자색BA416015,86,42,13

'Computer > Design' 카테고리의 다른 글

와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007/10/26
이미지 툴바 감추기  (2) 2005/06/25
이메일 네임택 만들어주는 사이트  (1) 2005/05/15
한국의 전통색  (0) 2005/03/07
Posted by 알찬돌삐
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요