DA_SCRIPT

リンクのランダム表示: HTML と JavaScript です。ページを開くたびに見た目が変わるリンクページです。パソコンのデスクトップなどに置いて使えます。CSS 部分を書き換えれば、色々とカスタマイズできます。サンプルです、リロードして遊んでください。。

MyLinks.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>MyLinks</title>

h1,h2,h3,h4,h5{color:#abcabc;}

a { color:#224488; text-decoration: none; }
a:link { color:#224488; }
a:visited { color:#224488; text-decoration: none; }
a:hover { color: yellow; text-decoration: none; }
a:active { color:#ff00ff; text-decoration: none; }

#left{width:50%; float:left; background-color:#ffffff;}
#right{width:50%; float:left; background-color:#ffffff;}

p{clear:both;}

div#left div{float: right;}
div#right div{float: left;}

.f0{font-weight: bold; font-size: x-large;}
.f1{font-weight: bold; font-size: small;}
.f2{font-weight: normal  ; font-size: x-large;}
.f3{font-weight: 900 ; font-size: small;}
.f4{font-weight: bold; font-size: medium;}
.f5{font-weight: normal  ; font-size: medium;}
.f6{font-weight: 900 ; font-size: medium;}
.f7{font-weight: bold; font-size: large;}
.f8{font-weight: normal  ; font-size: large;}
.f9{font-weight: 900 ; font-size: large;}

div.d0{background-color:#f0f8ff; padding:3px 8px; margin:8px; border-color:#00008b;}
div.d0 a:link { color:#00008b; text-decoration: none;}
div.d0 a:visited { color:#00008b; text-decoration: none;}
div.d0 a:hover { color: yellow; text-decoration: none;}
div.d0 a:active { color:#ff00ff; text-decoration: none;}

div.d1{background-color:#0000cd; padding:3px 8px; margin:8px; border-color:#000088;}
div.d1 a:link { color:#ffffff; text-decoration: none;}
div.d1 a:visited { color:#ffffff; text-decoration: none;}
div.d1 a:hover { color: yellow; text-decoration: none;}
div.d1 a:active { color:#ff00ff; text-decoration: none;}

div.d2{background-color:#ff6347; padding:3px 8px; margin:8px; border-color:#8b0000;}
div.d2 a:link { color:#000000; text-decoration: none;}
div.d2 a:visited { color:#000000; text-decoration: none;}
div.d2 a:hover { color: yellow; text-decoration: none;}
div.d2 a:active { color:#ff00ff; text-decoration: none;}

div.d3{background-color:#87cefa; padding:3px 8px; margin:8px; border-color:#0000cd;}
div.d3 a:link { color:#00008b; text-decoration: none;}
div.d3 a:visited { color:#00008b; text-decoration: none;}
div.d3 a:hover { color: yellow; text-decoration: none;}
div.d3 a:active { color:#ff00ff; text-decoration: none;}

div.d4{background-color:#dddddd; padding:3px 8px; margin:8px; border-color:#cdcdcd;}
div.d4 a:link { color:#224488; text-decoration: none;}
div.d4 a:visited { color:#224488; text-decoration: none;}
div.d4 a:hover { color: yellow; text-decoration: none;}
div.d4 a:active { color:#ff00ff; text-decoration: none;}

div.d5{background-color:#444444; padding:3px 8px; margin:8px; border-color:#000000;}
div.d5 a:link { color:#ffffff; text-decoration: none;}
div.d5 a:visited { color:#ffffff; text-decoration: none;}
div.d5 a:hover { color: yellow; text-decoration: none;}
div.d5 a:active { color:#ff00ff; text-decoration: none;}

div.d6{background-color:#ba55d3; padding:3px 8px; margin:8px; border-color:#4b0082;}
div.d6 a:link { color:#fefefe; text-decoration: none;}
div.d6 a:visited { color:#fefefe; text-decoration: none;}
div.d6 a:hover { color: yellow; text-decoration: none;}
div.d6 a:active { color:#ff00ff; text-decoration: none;}

div.d7{background-color:#7fff00; padding:3px 8px; margin:8px; border-color:#006400;}
div.d7 a:link { color:#2f4f4f; text-decoration: none;}
div.d7 a:visited { color:#2f4f4f; text-decoration: none;}
div.d7 a:hover { color: yellow; text-decoration: none;}
div.d7 a:active { color:#ff00ff; text-decoration: none;}

div.d8{background-color:gold; padding:3px 8px; margin:8px; border-color:#ff4500;}
div.d8 a:link { color:#800000; text-decoration: none;}
div.d8 a:visited { color:#800000; text-decoration: none;}
div.d8 a:hover { color: yellow; text-decoration: none;}
div.d8 a:active { color:#ff00ff; text-decoration: none;}

div.d9{background-color:#b52121; padding:3px 8px; margin:8px; border-color:#4b0082;}
div.d9 a:link { color:#ffffff; text-decoration: none;}
div.d9 a:visited { color:#ffffff; text-decoration: none;}
div.d9 a:hover { color: yellow; text-decoration: none;}
div.d9 a:active { color:#ff00ff; text-decoration: none;}

.cr{border-radius:10px 10px 10px 10px;}
.crr{border-radius: 25% 0% 25% 0%;}

.bo{border-style:outset; border-width6px;}
.boo{border-style:solid; border-width:2px;}
-->
</style>

</head>
<body>
<div>
<center>
<div><img src="./YourImage.png" alt="お好みで画像などをどうぞ"></div>

<form method=get action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=utf-8>
<input type=hidden name=oe value=utf-8>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr></table>
</form>

</center>

</div>

var aryLeft = [];
var aryRight = [];
pre();
var arysN = arys.length;

</div>

</body>
</html>