2008年08月27日

スタイルシートだけでポップアップメニュー、補足説明文を表示します。

スポンサード リンク

javascriptサンプルあなたのブログにjavascriptを使いませんか

ポップアップメニューこのメニューはスタイルシートで表示しています。

font要素に適用します説明文を赤色にしてみました。。

画像の説明文にも使えます。

リンクや画像にマウスを乗せるとポップアップメニュー、補足説明文を表示します
Javascript を使わず、スタイルシートだけで動作させています。

サンプルソース

<HTML>
<HEAD>
<TITLE>ポップアップメニュー、補足説明文を表示します。</TITLE>
<STYLE type="text/css">
<!--
.myshow { text-decoration:none;color:blue; } /* クラス名myshow の文字飾り none、文字色 blue */
a:hover { color:green; }/* マウスが来たときの文字色 green */

a.myshow span {
  display:none; padding:5px; margin-left:10px; width:150px;
  border:1px solid #cccccc; color:#000033;background-color:#ffffff;
 }
a.myshow:hover span{ display:inline; position:absolute; }


a.myshow font {
display:none; padding:25px; margin-left:70px; width:200px;
  border:2px solid #cccccc;background-color:#ffffff;
 }
a.myshow:hover font { display:inline;color:red; position:absolute;}

-->
</STYLE>
</HEAD>
<BODY>
<P>
<a href="javascript:void(0);" class="myshow">javascriptサンプル<span>あなたのブログにjavascriptを使いませんか</span></a><br/>
<a href="javascript:void(0);" class="myshow">ポップアップメニュー<span>このメニューはスタイルシートで表示しています。</span></a><br/>
<a href="javascript:void(0);" class="myshow">font要素に適用します<font>説明文を赤色にしてみました。。</font></a><br/>
<a href="javascript:void(0);" class="myshow"><IMG src="http://javascript123.up.seesaa.net/image/purin.gif" width="64" height="56" border="0"><span>画像の説明文にも使えます。</span></a><br/>
</P>
</BODY>
</HTML>

a.myshow span { //クラス名が myshow であるアンカーテキストの span 要素に適用します。
  display:none;
//ボックスを非表示
padding:5px;
//ボックスのボーダーより内側の余白
margin-left:10px;
//ボックスのボーダーより外側 左の余白
width:150px;
//ボックスの幅
color:#000033;
//文字色,
background-color:#ffffff;
//背景色
  border:1px solid #cccccc;
//枠線の太さ,種類,色
 }
a.myshow:hover span{ display:inline; position:absolute; }
//マウスが乗った時 inline ラベルで表示 位置は絶対位置(absolute)を指定
a.myshow font { ではpadding:25px; margin-left:70px; width:200px;  border:2px;と各数値を増やしてみました。
padding:*; margin-left:*; width:*; border:*;の作用が視覚的に解ると思います。
緑色の所に表示したい説明文を書いてください。

posted by javaScript at 20:52 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。