サンプル#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つの画像を指定しています。
画像サイズが小さいので(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枚の画像を指定しています。
プレロードを行う画像の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;}
サンプル#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枚の画像を指定しています。
プレロードを行う画像の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枚の画像を指定しています。
プレロードを行う画像のURLは、Javascriptを呼び出すHTMLファイルが基準URLとなります。