というわけで、手始めにマウスオーバーすると別画像に切り替わるスクリプトを書いてみました。
マウスオーバーで画像が切り替わるなんて、Dreamweaver使えばJavaScriptを知らなくてもできてしまうんですが、Dreameweaverが吐き出すコードはHTMLタグの中にonload="xxxxxxxx"とか、onmouseover="xxxxx"をやたらと追加して、非常に見づらいのです。
これだとテキストエディタでちょろっとHTMLを編集したい時に大変ですし、きっとGoogleさんもクロールしにくいでしょうから、imgタグに予めスワップ用に設定しておいたクラス名を記述しておけば、マウスオーバー、マウスアウトで画像が切り替わるようにしてみました。
作成したスクリプトはこんな感じです。クラス名から要素を取得するところはprototype.jsから借りてきました。
>
<
// swap_image.js
var imagesNormal = new Object();
var imagesHilite = new Object();
function SwapImage (name,normalSrc,hiliteSrc) {
this.name = name;
this.normalSrc = normalSrc;
this.hiliteSrc = hiliteSrc;
}
function setupSwapImages(swapImages) {
preloadSwapImages(swapImages);
setupSwapEvent(swapImages);
}
function preloadSwapImages (a) {
for (var i=0; i < a.length; i++){
imagesNormal[a[i].name] = new Image();
imagesNormal[a[i].name].src = a[i].normalSrc;
imagesHilite[a[i].name] = new Image();
imagesHilite[a[i].name].src = a[i].hiliteSrc;
}
}
function setupSwapEvent (a) {
for (var i=0; i<a.length; i++){
var images = getElementsByClassName(a[i].name);
for (var j=0; j<images.length; j++){
var image = images[j];
if (image.getAttribute("src")){
image.onmouseover = function () {swapImage( this, "hilite" );}
image.onmouseout = function () {swapImage( this, "normal" );}
}
}
}
}
// 2006-05-15追記
function swapImage(image,type){
if (type=="hilite") {
image.src = imagesHilite[image.className].src;
} else if (type=="normal") {
image.src = imagesNormal[image.className].src;
}
}
// 追記ここまで（こぴぺしわすれ・・。）
// copied from prototype.js v1.3.1
// http://prototype.conio.net/
function getElementsByClassName (className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
実際の使用例はこんな感じです。クラス名により画像のスワップを制御するようにすることで、HTMLがすっきりしました。さらにhead要素内のscriptタグを削除してもValidなHTMLのままってところもいいですよね。
>
<
<html>
<head>
<script type="text/javascript" src="/js/swap_image.js" ></script>
<script type="text/javascript">
var swapImages = [
new SwapImage('class01','/images/foo.gif', '/images/foo_onmouse.gif'),
new SwapImage('class02','/images/bar.gif', '/images/bar_onmouse.gif'),
new SwapImage('class03','/images/baz.gif', '/images/baz_onmouse.gif')
];
window.onload = function () {setupSwapImages(swapImages);};
</script>
</head>
<body>
<img src="/images/foo.gif" class="class01" />
<img src="/images/bar.gif" class="class02" />
<img src="/images/baz.gif" class="class03" />
</body>
</html>
swapImage( this, "hilite" )とswapImage( this, "normal" )
返信削除のプロトコルが無いような感じがしますが、
function SwapImage (name,normalSrc,hiliteSrc)
と違いますよね。
すいません、swapImageは書いたソースからコピペしわすれていたみたいです・・・。
返信削除追記しておきました。