잡다한 일상사 WebJoy.kr :: 다양한 효과의 풍선 도움말

다양한 효과의 풍선 도움말

WEB/HTML/Css/Script 2007/06/25 11:52 by 아쿠아바다

나는 P 태그

Cat	Mammal	Sleeping on the TV
Tuna	Chicken ;)	In the cupboard
Spider	Insect	Behind you
Chicken	Poultry, haha	Crossing the road
Lama	Mammal	Really slow fading tooltip

header=[Good! Fantastic Nature] body=[You wouldn't find this funny unless you've seen Southpark series 8<p>Note that this box halts on a single click</p>]

Move over this

Move over this text to bring up a tooltip.
Notice how the select box disappears

소스

<html>
<head>
<title>다양한효과의 풍선도움말</title>
<style>
.thdrcell {
background:#F3F0E7;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:5px;
border-bottom:1px solid #C8BA92;
}

.tdatacell {
font-family:arial;
font-size:12px;
padding:5px;
background:#FFFFFF
}

.dvhdr1 {
background:#F3F0E7;
font-family:arial;
font-size:12px;
font-weight:bold;
border:1px solid #C8BA92;
padding:5px;
width:150px;
}

.dvbdy1 {
background:#FFFFFF;
font-family:arial;
font-size:12px;
border-left:1px solid #C8BA92;
border-right:1px solid #C8BA92;
border-bottom:1px solid #C8BA92;
padding:5px;
width:150px;
}

.dogvdvhdr {
width:300;
background:#C4D5E3;
border:1px solid #C4D5E3;
font-weight:bold;
padding:10px;
}

.dogvdvbdy {
width:300;
background:#FFFFFF;
border-left:1px solid #C4D5E3;
border-right:1px solid #C4D5E3;
border-bottom:1px solid #C4D5E3;
padding:10px;
}

.pgdiv {
width:320;
height:250;
background:#E9EFF4;
border:1px solid #C4D5E3;
padding:10px;
margin-bottom:20;
font-family:arial;
font-size:12px;
}
</style>

</head>
<body>
<p style="margin-top:0px" title="header=[Tooltip with fade & delay] body=[some text for the body] delay=[400] fade=[on]"><b>나는 P 태그</b></p>

<table border=1>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Cat] body=[A nocturnal creature found prowling about alley ways throughout the world.]">
<td class=tdatacell>Cat</td><td class=tdatacell>Mammal</td><td class=tdatacell>Sleeping on the TV</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Tuna] body=[A most tasty snack - especially popular in the gym community, containing 27g per 100g protein. Also commonly mistaken for chicken by those cerebrally challenged individuals out there.]">
<td class=tdatacell>Tuna</td><td class=tdatacell>Chicken ;)</td><td class=tdatacell>In the cupboard</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Spider] body=[Spiderman, Spiderman, does whatever a spider can!]">
<td class=tdatacell>Spider</td><td class=tdatacell>Insect</td><td class=tdatacell>Behind you</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Chicken] body=[Most commonly known to be crossing the road - goddam I crack myself up; apparently I shouldn't quit my day job though]">
<td class=tdatacell>Chicken</td><td class=tdatacell>Poultry, haha</td><td class=tdatacell>Crossing the road</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Lama] body=[Last seen being fed in Napolean Dynamite] fade=[on] fadespeed=[0.01]">
<td class=tdatacell>Lama</td><td class=tdatacell>Mammal</td><td class=tdatacell>Really slow fading tooltip</td>
</tr>
</table></p>

<img src="img/sample.jpg" title="header=[Good! Fantastic Nature] body=[You wouldn't find this funny unless you've seen Southpark series 8<p>Note that this box halts on a single click</p>]"><p>

Move over <span title="cssbody=[dogvdvbdy] cssheader=[dogvdvhdr] header=[Ha ha! Another dog in a hat] body=[Well I lied. This was actually a legit example - just showing you can have pictures in the captions as well, or any legitamate HTML for that matter<center><p><img src='doghat2.jpg'></p>] fixedabsx=[150] fixedabsy=[270]" style="font-family:arial;font-size:12px;font-weight:bold;color:#ABABAB;cursor:pointer">this</span>

<div style="font-weight:bold;width:250px;border:1px solid #000000;padding:5px" title="header=[A tooltip] body=[Note the select box disappearing] hideselects=[on]">Move over this text to bring up a tooltip. <br>Notice how the select box disappears</div><br>

</body>
</html>

boxover.js

옵션설명(영문)

The following table lists settings for BoxOver.

Parameter	Possible values	Default	Description
header	Any character	blank	Specifies the header text of the tooltip
body	Any character	blank	Specifies the body text of the tooltip
fixedrelx	Any integer	N/A	Forces the X-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element)
fixedrely	Any integer	N/A	Forces the Y-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element)
fixedabsx	Any integer	N/A	Forces the X-coordinate of the tooltip to stay fixed (X is an offset relative to the body of the HTML document)
fixedabsy	Any integer	N/A	Forces the Y-coordinate of the tooltip to stay fixed (Y is an offset relative to the body of the HTML document)
windowlock	on / off	on	Make tooltip stick to side of the window if user moves close to the side of the screen.
cssbody	Any defined style class	Built in styles	Specifies CSS class for styles to be used on tooltip body.
cssheader	Any defined style class	Built in styles	Specifies CSS class for styles to be used on tooltip header.
offsetx	Any integer	10	Horizontal offset, in pixels, of the tooltip relative to the mouse cursor.
offsety	Any integer	10	Vertical offset, in pixels, of the tooltip relative to the mouse cursor.
doubleclickstop	on / off	on	Specifies whether to halt the tooltip when the user double clicks on the HTML element with the tooltip.
singleclickstop	on / off	off	Specifies whether to halt the tooltip when the user single clicks on the HTML element with the tooltip. - if both singleclickstop and doubleclickstop are set to "on", singleslclickstop takes preference.
requireclick	on / off	off	Specifies whether the user must first click the element before a tooltip appears. Intended for use on links so that information appears while the link is followed.
hideselects	on / off	off	Specifies whether to hide all SELECT boxes on page when popup is activated.
fade	on / off	off	Specifies whether to fade tooltip into visibility.
fadespeed	Number between 0 and 1	0.04	Specifies how fast to fade in tooltip.
delay	Any integer	0	Specifies delay in milliseconds before tooltip displays.

출처: - www.blueb.co.kr -

'WEB > HTML/Css/Script' 카테고리의 다른 글

부드러운 서브 메뉴(관리화면 구성에 좋을듯) (0)	2007/06/29
깔끔한 자바스크립트 탭메뉴 (3)	2007/06/29
다양한 효과의 풍선 도움말 (0)	2007/06/25
링크에 강조 효과 주는 사각라인 출력 (0)	2007/06/25
색상 고를때 유용한 DHTML 색상 선택기( Color Picker ) (0)	2007/06/25
드래그 가능한 간편한 계산기 (0)	2007/06/25