★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★
★当サイトは"JavaScript"を有効にして
ご利用いただくと便利です★
ご利用いただくと便利です★
テーマ１３．マウスオーバーでリンク画像を変える
上部タイトル部分はマウスオーバーで画像が変化する仕組みです。
このような変化があると、リンク画像だと認識されやすくなります。
クリック率を上げるためにも、視覚的な工夫は必要でしょう。
今回はマウスオーバーでリンク画像を変える方法を紹介します。
＜htmlの記述例１＞
＜htmlの説明１＞
この例ではcssを使わずにJavaScriptの命令を利用しています。
srcには普段と同様に変化前の画像を記述します。
onmouseoverには変化後の画像を記述します。
onmouseoutにはマウスを離した後の画像を記述します。
この記述がないとマウスを離しても画像は戻りません。
変化前の画像で構いませんので、指定しておいた方が良いでしょう。
なお、２枚の画像を事前にアップしておく必要があります。
＜htmlの記述例２＞
＜htmlの説明２＞
この例ではJavaScriptの命令を一切使っていません。
ですから、JavaScriptが無効の設定でも大丈夫です。
まず、透明の画像を事前にアップしておく必要があります。
アップする透明画像のサイズは適当で構いません。
形式的にはその画像がリンク画像となります。
次に、cssを利用するためにaタグにclassの指定をします。
さらに、imgタグには必ずwidthとheightを記述します。
なお、表示させる画像と異なるサイズを記述すると画像が崩れます。
＜cssファイルの記述例２＞
＜cssファイルの説明２＞
変化前の画像と変化後の画像は背景画像として利用します。
ダミーの透明画像が上にあるだけなので、実際には背景画像しか見えません。
そして、マウスオーバー時にその背景画像を変える仕組みです。
＜htmlの記述例３＞
＜htmlの説明３＞
JavaScriptもダミーの透明画像も使わない方法です。
この例では本来あるはずのimgタグが省略されています。
＜cssファイルの記述例３＞
＜cssファイルの説明３＞
両方に画像サイズと同じwidthとheightを追加します。
これを忘れるとどちらの画像も全く表示されません。
＜htmlの記述例４＞
＜htmlの説明４＞
１枚の画像を使いcssで透明度を変化させる方法です。
必要に応じてdivタグで囲いwidthを指定しておきます。
＜cssファイルの記述例４＞
＜cssファイルの説明４＞
この例では背景色に白色whiteを指定しています。
背景色の指定が無いと見栄えが悪くなる場合があります。
変化前の opacity:1.00(opacity=100) は規定値なので本来は不要です。
マウスオーバー時に画像自体を少し透明化させています。
なお、opacityの値を小さくすると薄くなる仕組みです。
＜htmlの記述例５＞
＜htmlの説明５＞
htmlの記述内容自体は４と同じで構いません。
透明化を利用して全く別の画像に変える方法です。
２枚の画像を事前にアップしておく必要があります。
＜cssファイルの記述例５＞
＜cssファイルの説明５＞
cssは４と違って背景には変化後の画像を指定します。
マウスオーバー時に前面画像を完全に透明化させています。
なお、この例のようにtransitionの追加でフェード効果が得られます。
以上のような方法で、マウスオーバーでリンク画像を変えることができます。
上部タイトル部分はマウスオーバーで画像が変化する仕組みです。
このような変化があると、リンク画像だと認識されやすくなります。
クリック率を上げるためにも、視覚的な工夫は必要でしょう。
今回はマウスオーバーでリンク画像を変える方法を紹介します。
＜htmlの記述例１＞
<a href="./">
<img src="images/logo.png" style="width:749px; height:60px; border:none" onmouseover="this.src='images/logo1.png'" onmouseout="this.src='images/logo.png'">
</a>
<img src="images/logo.png" style="width:749px; height:60px; border:none" onmouseover="this.src='images/logo1.png'" onmouseout="this.src='images/logo.png'">
</a>
＜htmlの説明１＞
この例ではcssを使わずにJavaScriptの命令を利用しています。
srcには普段と同様に変化前の画像を記述します。
onmouseoverには変化後の画像を記述します。
onmouseoutにはマウスを離した後の画像を記述します。
この記述がないとマウスを離しても画像は戻りません。
変化前の画像で構いませんので、指定しておいた方が良いでしょう。
なお、２枚の画像を事前にアップしておく必要があります。
＜htmlの記述例２＞
<a href="./" class="style12">
<img src="images/dummy.gif" style="width:749px; height:60px; border:none">
</a>
<img src="images/dummy.gif" style="width:749px; height:60px; border:none">
</a>
＜htmlの説明２＞
この例ではJavaScriptの命令を一切使っていません。
ですから、JavaScriptが無効の設定でも大丈夫です。
まず、透明の画像を事前にアップしておく必要があります。
アップする透明画像のサイズは適当で構いません。
形式的にはその画像がリンク画像となります。
次に、cssを利用するためにaタグにclassの指定をします。
さらに、imgタグには必ずwidthとheightを記述します。
なお、表示させる画像と異なるサイズを記述すると画像が崩れます。
＜cssファイルの記述例２＞
.style12 {
display: block;
background-image: url("images/logo.png");
}
.style12:hover {
background-image: url("images/logo1.png");
}
display: block;
background-image: url("images/logo.png");
}
.style12:hover {
background-image: url("images/logo1.png");
}
＜cssファイルの説明２＞
変化前の画像と変化後の画像は背景画像として利用します。
ダミーの透明画像が上にあるだけなので、実際には背景画像しか見えません。
そして、マウスオーバー時にその背景画像を変える仕組みです。
＜htmlの記述例３＞
<a href="./" class="style12">
</a>
</a>
＜htmlの説明３＞
JavaScriptもダミーの透明画像も使わない方法です。
この例では本来あるはずのimgタグが省略されています。
＜cssファイルの記述例３＞
.style12 {
display: block;
width: 749px;
height: 60px;
background-image: url("images/logo.png");
}
.style12:hover {
width: 749px;
height: 60px;
background-image: url("images/logo1.png");
}
display: block;
width: 749px;
height: 60px;
background-image: url("images/logo.png");
}
.style12:hover {
width: 749px;
height: 60px;
background-image: url("images/logo1.png");
}
＜cssファイルの説明３＞
両方に画像サイズと同じwidthとheightを追加します。
これを忘れるとどちらの画像も全く表示されません。
＜htmlの記述例４＞
<div style="width:749px">
<a href="./" class="style12">
<img src="images/logo.png">
</a>
</div>
<a href="./" class="style12">
<img src="images/logo.png">
</a>
</div>
＜htmlの説明４＞
１枚の画像を使いcssで透明度を変化させる方法です。
必要に応じてdivタグで囲いwidthを指定しておきます。
＜cssファイルの記述例４＞
.style12 {
display: block;
background-color: white;
}
.style12 img {
width: 749px;
height: 60px;
border: none;
opacity: 1.00;
filter: alpha(opacity=100);
}
.style12:hover img {
opacity: 0.80;
filter: alpha(opacity=80);
}
display: block;
background-color: white;
}
.style12 img {
width: 749px;
height: 60px;
border: none;
opacity: 1.00;
filter: alpha(opacity=100);
}
.style12:hover img {
opacity: 0.80;
filter: alpha(opacity=80);
}
＜cssファイルの説明４＞
この例では背景色に白色whiteを指定しています。
背景色の指定が無いと見栄えが悪くなる場合があります。
変化前の opacity:1.00(opacity=100) は規定値なので本来は不要です。
マウスオーバー時に画像自体を少し透明化させています。
なお、opacityの値を小さくすると薄くなる仕組みです。
＜htmlの記述例５＞
<div style="width:749px">
<a href="./" class="style12">
<img src="images/logo.png">
</a>
</div>
<a href="./" class="style12">
<img src="images/logo.png">
</a>
</div>
＜htmlの説明５＞
htmlの記述内容自体は４と同じで構いません。
透明化を利用して全く別の画像に変える方法です。
２枚の画像を事前にアップしておく必要があります。
＜cssファイルの記述例５＞
.style12 {
display: block;
background-image: url("images/logo1.png");
}
.style12 img {
width: 749px;
height: 60px;
border: none;
transition: opacity 0.7s linear;
}
.style12:hover img {
opacity: 0;
filter: alpha(opacity=0);
}
display: block;
background-image: url("images/logo1.png");
}
.style12 img {
width: 749px;
height: 60px;
border: none;
transition: opacity 0.7s linear;
}
.style12:hover img {
opacity: 0;
filter: alpha(opacity=0);
}
＜cssファイルの説明５＞
cssは４と違って背景には変化後の画像を指定します。
マウスオーバー時に前面画像を完全に透明化させています。
なお、この例のようにtransitionの追加でフェード効果が得られます。
以上のような方法で、マウスオーバーでリンク画像を変えることができます。
| ＨＰ作成トップページ＜＜ | ＨＰ作成１２＜ | ＨＰ作成１３ |
皆様のご質問やご意見をお待ちしています。
下記バナー画像からメールが送信できます。
下記バナー画像からメールが送信できます。
