マウスを乗せると画像が変わるリンク。

 
  
ホーム > コラム: マウスを乗せると画像が変わるリンク。

マウスを乗せると画像が変わるリンク。

 

サンプル#01 スタイルシートを使って背景画像を変える。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプル#01 スタイルシートを使って画像の変える</title>
<link rel="stylesheet" href="onmouse1.css" type="text/css">
</head>

<body>

<div class="block">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
<a href="#" class="r">link5</a>
</div>

</body>
</html>
/* onmouse1.css */
.block {width:500px;}
.block a {
  display:block;
  width:99px;
  font-family:Arial, Helvetica, Osaka, sans-serif;
  text-align:center;
  background:url("img/link_1.gif") #bbb repeat-x top left;
  color:#333;
  float:left;
  border-right:1px solid #777;
  padding:7px 0;
}
.block a.r {width:100px; border:none;}   /* 上書き */

/* link */
.block a:link    {color:#333; text-decoration:none;}   /* リンク */
.block a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */
.block a:hover   {color:#fff; background:url("img/over_1.gif") #777 repeat-x top left;}   /* ポイント時のリンク */
.block a:active  {color:#fff; background:url("img/down_1.gif") #555 repeat-x top left;}   /* アクティブなリンク */
背景には以下のような3つの画像を指定しています。
link1 over1 down1
画像サイズが小さいので(273バイト)プレロードを行わない例です(プレロードするに越したことは無いのですが)。

*1 この例では、a要素をブロック要素として背景画像を指定しているため、文字を垂直方向にセンタリングすることができない欠点があります。そのためスタイルシートのpaddingプロパティを用いて文字の上下に7pxのパディング幅を確保し高さを設定しています。
*2 ieを除くブラウザにでは仕切りに背景を設定しても正しく認識されません。そのためa要素の右に1pxのボーダーを設定しています。
 

サンプル#02 スタイルシートを使って背景画像の変える(プレロード)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプル#02 スタイルシートを使って背景画像の変える(プレロード)</title>
<link rel="stylesheet" href="onmouse2.css" type="text/css">
<script type="text/javascript" src="onmouse2.js"></script>

</head>

<body>

<div class="block">
<a href="#" class="l">link1</a>
<a href="#" class="m">link2</a>
<a href="#" class="m">link3</a>
<a href="#" class="m">link4</a>
<a href="#" class="r">link5</a>
</div>

</body>
</html>
/* onmouse2.js - preload */
dat=new Array( 'img/link2l.gif', 'img/link2m.gif', 'img/link2r.gif', 'img/over2l.gif', 'img/over2m.gif', 'img/over2r.gif', 'img/down2l.gif', 'img/down2m.gif', 'img/down2r.gif' );

preloadImg=new Array();
for(p=0;p<dat.length;p++){preloadImg[p]=new Image(); preloadImg[p].src=dat[p];}
/* onmouse2.css */
.block {width:500px;}
.block a {
  display:block;
  width:99px;
  font-family:Arial, Helvetica, Osaka, sans-serif;
  text-align:center;
  background:url("img/link1.gif") #bbb repeat-x top left;
  color:#333;
  float:left;
  border-right:1px solid #777;
  padding:7px 0;
}
.block a.r {width:100px; border:none;}   /* 上書き */

a.l {background:url("img/link2l.gif") repeat-x top left;}
a.m {background:url("img/link2m.gif") #bbb repeat-x top left;}
a.r {background:url("img/link2r.gif") repeat-x top right;}

/* link */
.block a:link    {color:#333; text-decoration:none;}   /* リンク */
.block a:visited {color:#333; text-decoration:none;}   /* 訪問済みリンク */

a.l:hover  {color:#fff; background:url("img/over2l.gif") repeat-x top left;}   /* ポイント時のリンク */
a.m:hover  {color:#fff; background:url("img/over2m.gif") #777 repeat-x top left;}
a.r:hover  {color:#fff; background:url("img/over2r.gif") repeat-x top right;}

a.l:active {color:#fff; background:url("img/down2l.gif") repeat-x top left;}   /* アクティブなリンク */
a.m:active {color:#fff; background:url("img/down2m.gif") #555 repeat-x top left;}
a.r:active {color:#fff; background:url("img/down2r.gif") repeat-x top right;}
背景には以下のような9枚の画像を指定しています。
link2l link2m link2r
over2l over2m over2r
down2l down2m down2r
プレロードを行う画像のURLは、Javascriptを呼び出すHTMLファイルが基準URLとなります。

*1 この例では、a要素をブロック要素として背景画像を指定しているため、文字を垂直方向にセンタリングすることができない欠点があります。そのためスタイルシートのpaddingプロパティを用いて文字の上下に7pxのパディング幅を確保し高さを設定しています。
*2 ieを除くブラウザにでは仕切りに背景を設定しても正しく認識されません。そのためa要素の右に1pxのボーダーを設定しています。
 

サンプル#03 スタイルシートを使って背景画像を変える(1枚の画像)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプル#03 スタイルシートを使って背景画像を変える(1枚の画像)。</title>
<link rel="stylesheet" href="onmouse3.css" type="text/css">
</head>

<body>

<ul class="menu">
<li class="num1"><a href="#"></a></li>
<li class="num2"><a href="#"></a></li>
<li class="num3"><a href="#"></a></li>
<li class="num4"><a href="#"></a></li>
<li class="num5"><a href="#"></a></li>
</ul>

</body>
</html>
/* onmouse3.css */

/* menu */
.menu {
  list-style:none;
  margin:0;
  padding:0;
  width:505px;   /*for ie (X 504px)*/
}
.menu li {float:left;}
.menu li a {
  display:block;
  width:101px;
  height:36px;
}
.menu li a.num5 {width:100px;}   /* 上書き */

/* link */
.num1 a:link    {background:url("img/link3.gif") 0px 0px no-repeat;}   /* リンク */
.num2 a:link    {background:url("img/link3.gif") -101px 0px no-repeat;}
.num3 a:link    {background:url("img/link3.gif") -202px 0px no-repeat;}
.num4 a:link    {background:url("img/link3.gif") -303px 0px no-repeat;}
.num5 a:link    {background:url("img/link3.gif") -404px 0px no-repeat;}

.num1 a:visited {background:url("img/link3.gif") 0px 0px no-repeat;}   /* 訪問済みリンク */
.num2 a:visited {background:url("img/link3.gif") -101px 0px no-repeat;}
.num3 a:visited {background:url("img/link3.gif") -202px 0px no-repeat;}
.num4 a:visited {background:url("img/link3.gif") -303px 0px no-repeat;}
.num5 a:visited {background:url("img/link3.gif") -404px 0px no-repeat;}

.num1 a:hover   {background:url("img/link3.gif") 0px -38px no-repeat;}   /* ポイント時のリンク */
.num2 a:hover   {background:url("img/link3.gif") -101px -38px no-repeat;}
.num3 a:hover   {background:url("img/link3.gif") -202px -38px no-repeat;}
.num4 a:hover   {background:url("img/link3.gif") -303px -38px no-repeat;}
.num5 a:hover   {background:url("img/link3.gif") -404px -38px no-repeat;}

.num1 a:active  {background:url("img/link3.gif") 0px -76px no-repeat;}   /* アクティブなリンク */
.num2 a:active  {background:url("img/link3.gif") -101px -76px no-repeat;}
.num3 a:active  {background:url("img/link3.gif") -202px -76px no-repeat;}
.num4 a:active  {background:url("img/link3.gif") -303px -76px no-repeat;}
.num5 a:active  {background:url("img/link3.gif") -404px -76px no-repeat;}
背景には以下のような1枚の画像を指定しています。
link3
 

サンプル#04 Javascriptを使って画像を変える(プレロード)。その1。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプル#04 Javascriptを使って画像を変える(プレロード)。その1。</title>
<link rel="stylesheet" href="onmouse4.css" type="text/css">
<script language="javascript" type="text/javascript" src="onmouse4.js"></script>
</head>

<body>

<div class="block">
<a href="#"><img src="img/out1.gif" alt="" width="100" height="36" onMouseOver="this.src='img/over1.gif';" onMouseDown="this.src='img/down1.gif';" onMouseOut="this.src='img/out1.gif';"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#"><img src="img/out2.gif" alt="" width="100" height="36" onMouseOver="this.src='img/over2.gif';" onMouseDown="this.src='img/down2.gif';" onMouseOut="this.src='img/out2.gif';"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#"><img src="img/out3.gif" alt="" width="100" height="36" onMouseOver="this.src='img/over3.gif';" onMouseDown="this.src='img/down3.gif';" onMouseOut="this.src='img/out3.gif';"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#"><img src="img/out4.gif" alt="" width="100" height="36" onMouseOver="this.src='img/over4.gif';" onMouseDown="this.src='img/down4.gif';" onmouseout="this.src='img/out4.gif';"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#"><img src="img/out5.gif" alt="" width="100" height="36" onMouseOver="this.src='img/over5.gif';" onMouseDown="this.src='img/down5.gif';" onmouseout="this.src='img/out5.gif';"></a>
</div>

</body>
</html>
/* onmouse4.js */
/* preload */
dat=new Array( 'img/over1.gif', 'img/over2.gif', 'img/over3.gif', 'img/over4.gif', 'img/over5.gif', 'img/down1.gif', 'img/down2.gif', 'img/down3.gif', 'img/down4.gif', 'img/down5.gif', 'img/out1.gif', 'img/out2.gif', 'img/out3.gif', 'img/out4.gif', 'img/out5.gif' );

preloadImg=new Array();
for(p=0;p<dat.length;p++){preloadImg[p]=new Image(); preloadImg[p].src=dat[p];}
/* onmouse4.css */
.block {width:504px;}
img {border:none;}
背景には以下のような15枚の画像を指定しています。
out1 out2 out3 out4 out5
over1 over2 over3 over4 five2
down1 down2 down3 down4 down5
プレロードを行う画像のURLは、Javascriptを呼び出すHTMLファイルが基準URLとなります。
 

サンプル#05 Javascriptを使って画像を変える(プレロード)。その2。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>サンプル#05 Javascriptを使って画像を変える(プレロード)。その2。</title>
<link rel="stylesheet" href="onmouse5.css" type="text/css">
<script language="javascript" type="text/javascript" src="onmouse5.js"></script>
</head>

<body>

<div class="block">
<a href="#" onMouseOver="changeImg('one',2);" onMouseDown="changeImg('one',3);" onMouseOut="changeImg('one',1);"><img src="img/one1.gif" alt="" width="100" height="36" id="one"><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#" onMouseOver="changeImg('two',2);" onMouseDown="changeImg('two',3);" onMouseOut="changeImg('two',1);"><img src="img/two1.gif" alt="" width="100" height="36" id="two"><img src="img/line.gif" alt="" width="1" height="36"></a><!--
--><a href="#" onMouseOver="changeImg('three',2);" onMouseDown="changeImg('three',3);" onMouseOut="changeImg('three',1);"><img src="img/three1.gif" alt="" width="100" height="36" id="three"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#" onMouseOver="changeImg('four',2);" onMouseDown="changeImg('four',3);" onmouseout="changeImg('four',1);"><img src="img/four1.gif" alt="" width="100" height="36" id="four"></a><img src="img/line.gif" alt="" width="1" height="36"><!--
--><a href="#" onMouseOver="changeImg('five',2);" onMouseDown="changeImg('five',3);" onmouseout="changeImg('five',1);"><img src="img/five1.gif" alt="" width="100" height="36" id="five"></a>
</div>

</body>
</html>
/* onmouse5.js */
/* preload */
dat=new Array( 'img/one1.gif', 'img/one2.gif', 'img/one3.gif', 'img/two1.gif', 'img/two2.gif', 'img/two3.gif', 'img/three1.gif', 'img/three2.gif', 'img/three3.gif', 'img/four1.gif', 'img/four2.gif', 'img/four3.gif', 'img/five1.gif', 'img/five2.gif', 'img/five3.gif' );

preloadImg=new Array();
for(p=0;p<dat.length;p++){preloadImg[p]=new Image(); preloadImg[p].src=dat[p];}

/* change image */
function changeImg(idy,n) {document.getElementById(idy).src='img/'+idy+n+'.gif';}
/* onmouse5.css */
.block {width:504px;}
img {border:none;}
背景には以下のような15枚の画像を指定しています。
one1 two1 three1 four1 five1
one2 two2 three2 four2 five2
one3 two3 three3 four3 five3
プレロードを行う画像のURLは、Javascriptを呼び出すHTMLファイルが基準URLとなります。
 
関連項目: マウスを乗せると背景画像が変わるリンク。 | マウスを乗せると背景が変わるリンク。
トップページ ページトップ
 2009/02/01発行 2009/03/01更新