CSSのbackground-imageに
title属性を使ってツールチップを表示します。
透明度を指定しています。
今のブログで満足ですか？
FC2レンタルサーバーLiteでホームページを作る！
サンプルソース
<html>
<head>
<title>背景画像にツールチップを表示</title>
<style type="text/css">
<!--/*javascript123*/
#div33{
background-image: url(/mizuyari.gif); /* 画像ファイル */
background-repeat: no-repeat; /* 繰り返しなし */
width: 225px; /* ボックスの幅 */
height: 150px; /* 高さ */
filter: Alpha(opacity=70); /* 透明度 IE系 */
opacity: 0.7; /* Mozzila系 */
}
-->
</style>
</head>
<body>
<div>
<img src="/mizuyari.gif" border="0" alt="alt属性,title属性" title="alt属性,title属性" />
</div>
<div id="div33" title="title属性">
</div>
</body>
</html>
title属性 要素にこの属性を指定すると、マウスを合せた時、補足説明（ツールチップ）を表示します。
殆ど全ての要素がtitle属性に対応しています。
上記サンプルでは背景画像を入れている
<div>タグにtitle属性を設定して背景画像にマウスが乗ったらツールチップを表示するようにしてあります。
画像ファイル(
<img src="/mizuyari.gif")に、title属性を入れてあるのはFirefoxではalt属性(代替テキスト)によるツールチップは出ないからです。IEではalt属性とtitle属性の両方が在る場合、 title属性値をポップアップするので、
上の例のように両方指定しておくと良いでしょう。
画像が表示されないときのalt属性とtitle属性
↑↑alt属性↑↑
ツールチップで表示されず、本来 画像が有る位置にalt属性値が表示されています。
title属性値はポップアップします。
リンクにツールチップを表示JavaScript,スタイルシートサンプル集
<a href="http://javascript123.seesaa.net/" title="ページ トップに戻るよ！">
JavaScript,スタイルシートサンプル集</a>
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
背景画像の繰り返し background-repeat プロパティ
背景画像を付ける background-imageプロパティ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ！なら初心者でも安心！
ホームページ簡単作成 「ホムペロリ！」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます！！
