2010年04月03日

背景 画像にツールチップを表示する

スポンサード リンク

CSSのbackground-imageに
title属性を使ってツールチップを表示します。

画像に alt属性と 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!」が無料で使えます!!

posted by javaScript at 16:08 | 大阪 ☀ | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする

2010年03月24日

background 背景に関するプロパティ 一覧

スポンサード リンク


プロパティ 説明
background-color
 背景色
#rrggbb rr、gg、bb は16進数  00〜ff
カラーネーム aqua,red,green,navy など
rgb(v,v,v,) v は10進数  0〜255
transparent 背景色透過(既定値)
background-image
背景にする画像
url("ファイル名") 画像ファイルのURL
none 背景画像なし(既定値)
background-repeat
背景画像の繰り返し
repeat 縦,横両方に繰り返し(既定値)
repeat-x 水平方向に繰り返し
repeat-y 垂直方向に繰り返し
no-repeat 繰り返しなし 1つだけ
background-attachment
背景画像の固定
scroll スクロールする(既定値)
fixed 固定する
background-position
背景画像の位置
left
center 中央
right
top
bottom
単位 数値+単位 px,pt,em など
数値+%  
background
背景の設定を一括して指定
背景色 画像ファイル名 並び方 位置 固定表示

上記の表は
テーブルの行の背景色を一行おきに変えます。 を使用しています。

さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 21:09 | 大阪 ☔ | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする
×

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