Javascriptでちょっと変わった画像ロールオーバー
ワイパーが快適に動くようになったのに梅雨明けしそうなYu-ichiです
ロールオーバーといえば、画像の上にマウスカーソルを乗せたときに
その画像が変化するものをイメージするかと思います。
以前、このブログでもご紹介しました。
javascriptを使ったロールオーバー
今回ご紹介するのは、画像の上にマウスカーソルを乗せたときに
別の場所にある画像が変化するロールオーバーのやり方です。
こんなイメージ・・・
まずはJavascriptを書きます。
とは言っても、１から書くのはめんどくさいので、以下の記述をコピーして
適当な名前で拡張子をjsとして保存してください。
【javascriptソース】
——————–
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById(‘placeholder’).src = whichpic.href;
if (whichpic.title) {
document.getElementById(‘desc’).childNodes[0].nodeValue = whichpic.title;
}
else {
document.getElementById(‘desc’).childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
}
else {
return true;
}
}
——————–
次に、HTML側の作業です。
まずは、先程のjavascriptを呼び出してください。
<head>内にこんな感じで・・・
<script src=”/java/photo.js” type=”text/javascript”></script>
呼び出したら、画像のエリアを作成します。
【HTMLソース（変化させたい画像）】
<img src=”変化前の画像ファイル” id=”placeholder”>
【HTMLソース（マウスを乗せる画像）】
<a href=”表示させたい画像のURL” onclick=”return showPic(this)” onmouseover=”return showPic(this)”>
<img src=”表示するサムネイル画像”>
</a>
これで、マウスカーソルをサムネイルに乗せたときに
id=”placeholder”を記述した部分の画像が変化すると思います。
ちなみに、埼玉県の鶴ヶ島市を中心に不動産の賃貸や売買を行っているアパ・マン住建様のサイトで
スタッフ紹介ページにて実際に使用しております。
このスクリプトをちょっといじれば、マウスを乗せたときに乗せた部分の画像に変化して、
マウスが外れたときに元の画像に戻るようにすることも出来ます。
ちょっとした小技でしたが、いろいろな使い道があるかと思います。
是非、使ってみてください。
お陰様でFC2ブログランキング現在１位です！
これからもこっそり応援お願いします
お手頃価格で結果の出るホームページをつくります。さまざまな業種での制作実績がございます。はじめてウェブサイトをつくる方からネット販売をはじめたい方までお客様のニーズに合わせたホームページを低価格で構築致します。
HP・ショッピングサイトの企画から制作、保守管理までトータルでサポートいたます。ビジネスブログの構築や、不動産物件管理システム、中古車車両管理システムなど各種WEBシステムの構築もお任せください。
