文章来源： BBS.KESONIC.COM
鼠标悬停时链接下沉
<style>a:hover{position:relative;left:1px;top:1px;}</style>
链接删除线
<STYLE type="text/css">
<!--
A:link,a:visited{text-decoration:none;}
A:hover,a:active{text-decoration:line-through;}
-->
</STYLE>
显示所有链接
加入如下代码到body区域
<script language="JavaScript1.2">
<!--
function extractlinks(){
var links=document.all.tags("A")
var total=links.length
var win2=window.open("","","menubar,scrollbars,toolbar")
win2.document.write("<font size=’2’>一共有"+total+"个连接</font><br>")
for (i=0;i<total;i++){
win2.document.write("<font size=’2’>"+links[i].outerHTML+"</font><br>")
}
}
//-->
</script>
<input type="button" onClick="extractlinks()" value="显示所有的连接">
不错的连接提示
加入如下代码到head区域
<STYLE type="text/css">
<!--
.tishi {
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid;
FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden;
background-color:#FFCC00;
padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px}
-->
</STYLE>
<SCRIPT language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
//-->
</script>
加入如下代码到body区域
<a href="" onMouseOver=Show(aa0) onMouseOut=Hide(aa0)>泥客网</a><div id="aa0" class="tishi">泥客网，放
松你的心情！</div><br>
<a href="http://bbs.kesonic.com" onMouseOver=Show(aa1) onMouseOut=Hide(aa1)>特效千寻</a><div id="aa1" class="tishi">欢迎光临
泥客论坛</div>
用图片作超链接的下划线
加入如下代码到head区域
<STYLE type=text/css>A#example1a {
BACKGROUND: url(diagonal.gif) repeat-x 100% 100%; PADDING-BOTTOM: 2px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
A#example1b {
PADDING-BOTTOM: 2px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
A#example1b:hover {
BACKGROUND: url(http://www.toto369.net/ljtx/diagonal.gif) repeat-x 100% 100%
}
A#example2a {
BACKGROUND: url(http://www.toto369.net/ljtx/flower.gif) repeat-x 100% 100%; PADDING-BOTTOM: 10px; WHITE-SPACE: nowrap; TEXT-
DECORATION: none
}
A#example2b {
PADDING-BOTTOM: 10px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
A#example2b:hover {
BACKGROUND: url(http://www.toto369.net/ljtx/flower.gif) repeat-x 100% 100%
}
</STYLE>
加入如下代码到body区域
<A id=example1a
href="" target="_blank">波纹线静态下划线</A>，
<A id=example1b
href="" target="_blank">鼠标停留时出现的波纹线</A>。</P>
<P><A id=example2a
href="" target="_blank">心形静态下划线</A>，
<A id=example2b
href="" target="_blank">鼠标停留时出现的心形下划线</A>。
虚线下划线超链接
<style>
a:link {
color: #000000;
text-decoration: None;
}
a:hover {
color: #0000FF;
border-bottom: 1px #0000FF Dashed;
}
</style>
雾化链接
<div style="width: 96; height: 9" class=coffee onMouseOver="this.style.filter=’glow(color=#FFCC00, strength=6)’"
onMouseOut=’this.style.filter=""’>
<a href="">泥客网</a></div>
同一页面中使用两种链接的颜色
加入如下代码到head区域
<style type="text/css">
<!--
A.style1:link {
text-decoration: none;
color: #ff9966;
font-weight: normal;
}
A.style1:visited {
text-decoration: none;
color: #ff9966;
font-weight: normal;
}
A.style1:active {
text-decoration: none;
color: #ff9966;
font-weight: normal;
}
A.style1:hover {
text-decoration: underline;
color: #ff0000;
font-weight: normal;
}
A.style2:link {
text-decoration: underline;
color:#ff3322;
font-weight: normal;
}
A.style2:visited {
text-decoration: underline;
color: #ff3322;
font-weight: normal;
}
A.style2:active {
text-decoration: none;
color: #0033ff;
font-weight: normal;
}
A.style2:hover {
text-decoration: none;
color: #0033ff;
font-weight: normal;
}
-->
</style>
加入如下代码到body区域
<p><a href="#" class="style1">第一个链接</a></p>
<p><a href="#" class="style2">第二个链接</a></p>
不错的链接提示
加入如下代码到head区域
<style type="text/css">
<!--
.article {
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid;
FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden ;
background-color:#80BFFF;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px}
-->
</style>
<script language=JavaScript1.2>
<!--
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
-->
</script>
加入如下代码到body区域
<a onMouseOver=Show(a1) onMouseOut=Hide(a1) href="www.kesonic.com" target="_blank">泥客网</a>
<div class=article id=a1 style="width: 100">看到说明了吗？</div>
链接加上、下划线
<style type="text/css">
a:link {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none; color: #FFFFFF; underline;overline;}
</style>
连接上下划线并有背景色
<STYLE type="text/css">
<!--
A:link {text-decoration:none;}
A:visited {text-decoration:none;}
A:hover {text-decoration:UNDERLINE OVERLINE;}
A:HOVER{background-color : #dae6d9;}
-->
</STYLE>
滚动的链接
加入如下代码到head区域
<style>a {text-decoration:none}</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var a,b,go,word;
function greenlight(word){
a="特效千寻";
word.style.color="#FF0000";
linkSwitch();
}//end of greenlight()
function linkSwitch(){
clearTimeout(go);
b=a;
a=a.substring(1,100)+a.charAt(0);
esh.innerText=a;
go=setTimeout("linkSwitch()",100);
}//end of linkSwitch()
function stp(word){
clearTimeout(go);
esh.innerText="特效千寻";
word.style.color="#0000FF";
}//end of stp()
//-->
</SCRIPT>
加入如下代码到body区域
<A onmouseover=greenlight(this) onmouseout=stp(this)
href="http://www.toto369.net"
target=_blank ;><SPAN id=esh>特效千寻</SPAN></A>
鼠标悬停时链接下沉
<style>a:hover{position:relative;left:1px;top:1px;}</style>
有提示音的链接
加入如下代码到head区域
<script language=javascript>
var mid=new Array()
mid[0]="http://www.toto369.net/sound/1.wav"
mid[1]="http://www.toto369.net/sound/2.wav"
mid[2]="http://www.toto369.net/sound/3.wav"
mid[3]="http://www.toto369.net/sound/4.wav"
function clicksound(i)
{
document.all.sound.src=mid[i]
}
</script>
加入如下代码到body区域
<bgsound id=sound src="" loop=1>
<a href="#" onclick="clicksound(0)">点击链接有提示音</a><br>
<a href="#" onmouseover="clicksound(1)">光标移动到链接上有提示音</a><br>
<a href="#" onmouseover="clicksound(1)" onclick="clicksound(2)">移动，点击链接都有提示音</a><br>
<a href="#" onmouseout="clicksound(3)">光标离开链接有提示音</a>
下划线不断闪烁的链接
<script>
<!-- Write here the message that you want to write. Write the information between the "", like in the example shown below-->
mess94799="www.toto369.net"
<!-- Write here the url or the source of the link that you want to write. Write the information between the "", like in the example shown below-->
link94799=""
<!--Write here the font color. Write the information between the "", like in the example shown below-->
f194799="#cc0000"
<!-- Write here the background color. Write the information between the "", like in the example shown below-->
f294799="#ffffff"
<!-- Write here the font size. Write the information between the "", like in the example shown below-->
f394799="14px"
<!-- Write here the speed of the flashing in seconds or fractions. Write the information between the "", like in the example shown below-->
f594799="1"
<!-- Don’t edit from here on -->
document.write("<span style=’cursor:hand;font-size:"+f394799+";color:"+f194799+";background-color:"+f294799+"’ id=’th94799’ onclick=location.href=’"+link94799+"’>"+mess94799+"</span>")
y94799=0
function beg94799(){
if (y94799<1){
y94799++
}
else{
y94799=0
}
if (y94799==1){
th94799.style.textDecoration="underline"
}
else{
th94799.style.textDecoration="none"
}
setTimeout("beg94799()",f594799*1000)
}
</script> <img src=’b’ onerror=beg94799() style=’display:none’>
给超链接加个背景图片
<style type="text/css">
<!--
A {
FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 9pt; BACKGROUND: url(16.gif); COLOR: gray; TEXT-DECORATION: underline overline
}
-->
</style>
|
