最初のテクノロジーマウスがリンクをクリックしたときのヒント

通常、ウェブサイトの中でユーザーにマウスをリンクや画像の上に置くときにaltとtitleのラベルを使用しますが、インタラクティビティとインタフェースが友好的ではなく、ヒントを見た人は少ないようです.
では、効果を見てみましょう.
                      http://www.sohtanaka.com/web-design/examples/side-nav-popup/
これはどのように作られていますか.
まず、次のコードを書きます.
              

<ul class="sidenav">
	<li>
		<a href="#">Home</a>
	</li>
	<li>
		<a href="#">About Us</a>
	</li>
	<li>
		<a href="#">Contact</a>
	</li>
</ul>

 
ステップ2:
   

ul.sidenav {
	float: left;
	margin: 0;
	padding: 0;
	width: 200px;
	list-style: none;
	border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
	border-top: 1px solid #003867; /*--Bevel Effect--*/
	font-size: 1.2em;
}
ul.sidenav li {
	position: relative; /*--Add a relative positioning--*/
	float: left;
	margin: 0;
	padding: 0;
}
ul.sidenav li a{
	border-top: 1px solid #3373a9; /*--Bevel Effect--*/
	border-bottom: 1px solid #003867; /*--Bevel Effect--*/
	padding: 10px 10px 10px 25px;
	display: block;
	color: #fff;
	text-decoration: none;
	width: 165px;
	background: #005094 url(sidenav_li_a.gif) no-repeat 5px 10px;
	position: relative; /*--Add a relative positioning--*/
	z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
}
ul.sidenav li a:hover {
	background-color: #004c8d;
	border-top: 1px solid #1a4c76;
}

 
ステップ3:
  

...
<li>
	<a href="#">Home</a>
	<div><p>Go home!</p></div>
</li>
...

 
ステップ4:
   

ul.sidenav li div {
	display: none;
	position: absolute;
	top: 2px;
	left: 0;
	width: 225px;
	font-size: 0.9em;
	background: url(bubble_top.gif) no-repeat right top;
}
ul.sidenav li div p {
	margin: 7px 0;
	line-height: 1.6em;
	padding: 0 5px 10px 30px;
	background: url(bubble_btm.gif) no-repeat right bottom;
}

 
ステップ5:
   

<script type="text/javascript">
$(document).ready(function(){

	$("ul.sidenav li").hover(function() {
		$(this).find("div").stop()
		.animate({left: "210", opacity:1}, "fast")
		.css("display","block")

	}, function() {
		$(this).find("div").stop()
		.animate({left: "0", opacity: 0}, "fast")
	});

});
</script>

 
ステップ6:私の下にアップロードした圧縮ファイルをダウンロードして解凍した後、の間で呼び出します.
             http://code.jquery.com/jquery-latest.js"></script >
ステップ7:私の画像圧縮ファイルに使用されているいくつかの画像があります.ダウンロード用