2008年06月20日

画像にマウスを乗せると説明文を表示します。

スポンサード リンク

 商品の詳細説明を
表示するのに利用できますよ!

   

画像にマウスを乗せてください。

サンプルソース

<HTML>
<HEAD>
<TITLE>画像にマウスを乗せると説明文を表示します。</TITLE>
<SCRIPT language="JavaScript">
<!--
var msg=new Array("イチゴケーキはいかがですか!!","プリン ぷりんのプリンですよ。。。","一眼レフカメラ 格安セール中");

function chg_msg(n){
document.getElementById("comt").innerHTML = msg[n];}

// -->
</SCRIPT>

</HEAD>
<BODY>
<A href="javascript:;" onmouseover="chg_msg('0')"><IMG src="******.gif" /></A>  
<A href="javascript:;" onmouseover="chg_msg('1')"><IMG src="******.gif" /></A>  
<A href="javascript:;" onmouseover="chg_msg('2')"><IMG src="******.gif" /></A> <BR/>
<P id="comt" style="font-weight : bold;color : green;">画像にマウスを乗せてください。</P>
</BODY>
</HTML>

msg=new Array( ) //配列に表示する文章を書きます。("イチゴ","プリン","カメラ")のように区切って書きます。
document.getElementById("comt").innerHTML = msg[n]// comt  とid名で指定したタグにmsg[n]で取得した文字列をinnerHTMLで書き込みます。
msg[n] // 配列は 0から数えますので msg[1] ならこの場合は プリン ぷりんのプリンですよ。。。 を取り出します。
onmouseover="chg_msg('0') //マウスが乗るとmsg[n]に引数を渡します。
******.gif の部分は御自分の画像URLをいれてください。
style="font-weight : bold;color : green;"Pタグにスタイルシートで font-weight : bold //文字の太さ:太い color : green //文字の色:緑 を指定しています。

posted by javaScript at 19:58 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
×

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