ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ イメージCSSロールオーバー ]

イメージCSSロールオーバー

JavaScriptを使わないでCSSだけでイメージをロールオーバーさせる。テキスト付きなら一般的でお馴染みだが、テキストを表示させないで実現するレアな方法がここにある。

Apr.13,2006

JavaScriptを使わないイメージのロールオーバー 1

理論的に考えると、実はサイドバーなどで実装する方法と同様である。htmlだけを見ると、ん?と思ってしまうのだが、まずこれがひとつ。

概略は<a>にdisplay : blockを設定したCSSを使うのだが、どう、見えてきたかな?

HTMLの記述は以下の一行をロールオーバーさせたいところへ(body内のどこかへ)記述するだけである。

<a id="rollover" href="#"></a>

以下は<head>内のCSSの内容であるが、display:block; について理解不足な方はそろそろこの辺りで習得しておこう。

display : block; を使ったリストメニュー

<style type="text/css">
<!--
a#rollover{     /*画像の設定*/
  display: block;    /*ここを忘れずに*/
  width: 221px;      /*画像の幅*/
  height: 175px;     /*画像の高さ*/
  background-image: url(images/memo1.gif); 
  background-repeat: no-repeat;
  margin : 0;
  padding : 0;
}
 
a#rollover:hover{   /*ロールオーバーの画像を設定*/
  background-image: url(images/memo2.gif); 
}

-->
</style>

※ハイパーリンク機能を与えるアンカー要素<a>はインライン要素だから、display:block;を設定してブロック要素へ変更する。要素はブロックボックスを生成するので、widthとheightを与えたボックスサイズがアンカーの対象領域になる。

JavaScriptを使わないイメージのロールオーバー 2

二つ目は、これもトリッキーだがSEO対策などでたまに目にした方法の応用だ。

概略は以下ふたつの設定とインラインフレームがポイントだ。

position : absolute; text-indent : -100em;

絶対位置が指定されているロールオーバーを実行するファイルをインラインフレームで呼び込むことで、本ウェブのようなフォントサイズフリーでも利用が可能になる。この方法が効果的なのは、多くの画像をロールオーバーさせたい場合だ。

以下はインラインフレームで呼び込むファイルのHTMLの記述だ。

id="rollover_area"というブロックスボックスを設定してその背景に画像を読み込む。

次にNextというテキストを記述してアンカー<a>を設定する。

そしてCSSにて絶対的なポジションを設定してid="rollover_area"で設定した画像とピッタリ重なるように位置を配置する。

<div id="rollover_area">
<a href="#" id="nextpage" title="Next Page">Next</a> 
</div>

そして以下CSSを設定する。

<style type="text/css">
<!--
body{
  background-color : white;
  padding : 0px;
  margin : 0px;
}
#rollover_area{
  background-image : url(images/memo1.gif);
  padding : 0px;
  margin : 0px;
  width : 221px;
  height : 175px;
  background-repeat : no-repeat;
}
#nextpage{
  width : 221px;
  height : 175px;
  background-position : left top;
  position : absolute;       /*絶対位置の設定*/
  top : 0px;
  left : 0px;
  text-indent : -100em;
  margin : 0px;
  padding : 0px;
}
a#nextpage:hover{
  background : url(images/memo2.gif);
  background-repeat : no-repeat;
}
-->

以上の処理を済ませた後、表示させたいページにおいてインラインフレームの設定をして上記ファイルを読み込ませる。

インラインフレームを使ってページをチェンジさせる

イベント処理を使ったイメージのロールオーバー 3

最後にDynamic HTMLを紹介する。イベントが発生したときに、this.srcで要素の画像を変えることができる。厳密に言えば Javascript を使ったようなものだが、記述が簡単なので参考までに掲載した。

<img onmouseover="this.src='images/memo2.gif'" onmouseout="this.src='images/memo1.gif'" src="images/memo1.gif">

ここでは、onmouseover、onmouseout の2つのイベントが発生したときの処理を記述して挿入している。他のイベントに以下のようなものがある。

onblur / onfocus / onclick / ondblclick / onmousemove / onmousedown / onmouseup /onkeydown / onkeyup / onload / onunload / onchange / onscroll / onresize / onselect / onselectstart

Dynamic HTML リストを参照する

画像とテキストのレイアウト

ページのトップへ


文字の大きさについて 文字の大きさは、ブラウザで調節して下さい。
当サイトへのリンクは自由に行えます。