汎用マウスオーバースクリプト

 ホームページ作成のとき、マウスオーバーで画像を入れ替えるスクリプトのために、画像にnameやidを毎回つけるのが面倒になったので、これって汎用にできないのかどうか試してみまスタ。

 んでもって、たどり着いたのがコレ。

function IMGC(sid){
var imgs = sid.src.substring(sid.src.lastIndexOf('/')+1,sid.src.length);
if(imgs.substring(0,imgs.lastIndexOf('.')).match(/(_f2?|\/)$/)==null){
sid.src=sid.src.substring(0,sid.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('.'))+"_f2"+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
}else{
sid.src=sid.src.substring(0,sid.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('_f2.'))+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
}
}

画像には

<img src="画像ファイル名" alt="ほにゃらら" onMouseOver="IMGC(this);" 
onMouseOut="IMGC(this);">

と指定。

 入れ替え時の画像が「画像名_f2.拡張子」という名前になっていることが前提ですが、thisを使っているので、いちいち画像に名前をつけたりidつけたりしなくてすむのと、onMouseOverの指定でnameやidを変更し忘れて、マウスオーバーすると隣のメニュー項目が出てきちゃったり...なんてうっかりミスがなくせます。

 っていうか、そんなことに頑張ってる間にチェックすればいいんスけどね。

アーカイブ

Powered by Movable Type 4.261