WebDesigning 2007年1月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。また、最初のサンプルは正しく処理されないものです。他にもサムネールキャッシュされていない場合や、サーバーに存在しないサムネールは読み出す事ができないため表示されません。
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Link Thumbnail サンプル</title>
<script type="text/javascript" src="arc90_linkthumb.js"></script>
<style type="text/css"><!--
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: #fff url(linkpic_shadow.gif) no-repeat bottom right;
}
#linkarea {
border:1px solid black;
background-color: #006699;
width: 150px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
border:1px solid black;
background-color:#e0e0e0;
}
--></style>
</head>
<body>
<div id="linkarea">
【おすすめサイト】
<ul>
<li><a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a></li>
<li><a href="http://www.google.co.jp/" class="linkthumb">Google</a></li>
<li><a href="http://mixi.jp/" class="linkthumb">mixi</a></li>
<li><a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a></li>
<li><a href="http://www.hatena.ne.jp/" class="linkthumb">はてな</a></li>
<li><a href="http://www.mycom.co.jp" class="linkthumb">毎コミ</a></li>
<li><a href="http://www.openspc2.org/blog/index.html" class="linkthumb">OpenSpace更新情報</a></li>
<li><a href="http://blog.livedoor.jp/maruhodou/archives/50393690.html" class="linkthumb">いくじ</a></li>
</ul>
</div>
<p>
ここで１つ考えてみみょう。。。。。例えば検索エンジンであれば<a href="http://www.google.co.jp/" class="linkthumb">Google</a>というように代表的なものがある。<br>
しかし、日本国内では<a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a>が、もっとも大きなシェアを占めている。検索エンジンに限らず、上位を占めているのは国内企業よりも米国企業であることが多い。<br>
最大手の本屋である<a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a>なども、やはり米国企業になっている。
</p>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Link Thumbnail サンプル</title>
<script type="text/javascript" src="arc90_linkthumb.js"></script>
<style type="text/css"><!--
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: #fff url(linkpic_shadow.gif) no-repeat bottom right;
}
#linkarea {
border:1px solid black;
background-color: #006699;
width: 150px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
border:1px solid black;
background-color:#e0e0e0;
}
--></style>
</head>
<body>
<div id="linkarea">
【おすすめサイト】
<ul>
<li><a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a></li>
<li><a href="http://www.google.co.jp/" class="linkthumb">Google</a></li>
<li><a href="http://mixi.jp/" class="linkthumb">mixi</a></li>
<li><a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a></li>
<li><a href="http://www.hatena.ne.jp/" class="linkthumb">はてな</a></li>
<li><a href="http://www.mycom.co.jp" class="linkthumb">毎コミ</a></li>
<li><a href="http://www.openspc2.org/blog/index.html" class="linkthumb">OpenSpace更新情報</a></li>
<li><a href="http://blog.livedoor.jp/maruhodou/archives/50393690.html" class="linkthumb">いくじ</a></li>
</ul>
</div>
<p>
ここで１つ考えてみみょう。。。。。例えば検索エンジンであれば<a href="http://www.google.co.jp/" class="linkthumb">Google</a>というように代表的なものがある。<br>
しかし、日本国内では<a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a>が、もっとも大きなシェアを占めている。検索エンジンに限らず、上位を占めているのは国内企業よりも米国企業であることが多い。<br>
最大手の本屋である<a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a>なども、やはり米国企業になっている。
</p>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Link Thumbnail サンプル</title>
<script type="text/javascript" src="arc90_linkthumb.js"></script>
<style type="text/css"><!--
.arc90_linkpic {
display: none;
position: absolute;
left: 0;
top: 1.5em;
}
.arc90_linkpicIMG {
padding: 0 4px 4px 0;
background: #fff url(linkpic_shadow.gif) no-repeat bottom right;
}
#linkarea {
border:1px solid black;
background-color: #006699;
width: 150px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
border:1px solid black;
background-color:#e0e0e0;
}
--></style>
</head>
<body>
<div id="linkarea">
【おすすめサイト】
<ul>
<li><a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a></li>
<li><a href="http://www.google.co.jp/" class="linkthumb">Google</a></li>
<li><a href="http://mixi.jp/" class="linkthumb">mixi</a></li>
<li><a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a></li>
<li><a href="http://www.hatena.ne.jp/" class="linkthumb">はてな</a></li>
<li><a href="http://www.mycom.co.jp" class="linkthumb">毎コミ</a></li>
<li><a href="http://www.openspc2.org/blog/index.html" class="linkthumb">OpenSpace更新情報</a></li>
<li><a href="http://blog.livedoor.jp/maruhodou/archives/50393690.html" class="linkthumb">いくじ</a></li>
</ul>
</div>
<p>
ここで１つ考えてみみょう。。。。。例えば検索エンジンであれば<a href="http://www.google.co.jp/" class="linkthumb">Google</a>というように代表的なものがある。<br>
しかし、日本国内では<a href="http://www.yahoo.co.jp/" class="linkthumb">Yahoo! JAPAN</a>が、もっとも大きなシェアを占めている。検索エンジンに限らず、上位を占めているのは国内企業よりも米国企業であることが多い。<br>
最大手の本屋である<a href="http://www.amazon.co.jp/" class="linkthumb">Amazon</a>なども、やはり米国企業になっている。
</p>
</body>
</html>