KIKUMIMix 呼ばれなくても飛び出てじゃじゃじゃじゃ~ん

711月/050

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

 最近コーディングの仕事が多くて嬉しかったです。
 このごろの傾向としてビミョーな位置付けの仕事が増えてきて、「なるべくストイックなコードで、でも見た目はなるべくグラフィックに」てな感じのコーディングが多くなってる気がする。なんとな〜くユーザビリティだアクセシビリティだのという「ビリティーズ」を意識しつつも、それによって見た目がしょぼくなるのは避けたい、というクライアントが増えてるということでしょーか。
 んな中で、やっぱしメニューのマウスオーバーは外せない効果の一つなんですが、デザイナーサンが一度コーディングしてから回ってくるデータを再コーディングしていると、メニュー部分の表記にHTMLソースで10行や20行、延々とマウスオーバーの記述がされているわけですよ。これを解決しようと、以前こんな感じのスクリプトを作ってみたものの、これでも20行が5行に減るだけで、不要なonMouseOverだのonMouseOutだのが続くことには変わりないのですね。
 これは不愉快です。
 こんなことで不愉快になる人はわが社にはワタシだけなので、ヒトリでコツコツ弄くった挙句、ようやく納得が行く方策がたったので、改良版としてメモ代わりにアップ。


 もちろん、マウスオーバーにはCSSだけを使った方法があることは知っております。一時はその方向でコーディングしたりもしてました。
 ただ、「メニューの文字はテキスト、テキストの乗っている背景だけは画像で」という場合はCSS使用があってると思うんだけど、文字も含めて全部画像で行う場合は、結局CSS側で画像をdesplay:noneしてたりして、な〜んか「裏技」感を拭いきれなかったんですよ。スッゲー美人にキスしようとして近づいてったら鼻毛が出てたみたいな。違いますか。そうですね、裏技じゃないですね、それ。
 でまあ、最近「JavaScriptをONにしている人は、そういう効果も含めて楽しみたいと思っている、そうじゃないヒトにはストイックな画面を提供すればオッケー」という考え方になってきたのですね。「HTML=構造と内容」「CSS=構造を判りやすくするためのデザイン」「JavaScript=内容と構造を楽しむための効果」と振り分ける考えに至ったわけです。
 そーゆー思考回路からいって、方策としては「menuというID内の画像には一括してJavaScriptでマウスオーバー効果を貼り付ける」のが一番ラクチンで的確はないかと思ったわけですよ。
 で、あちこちごにょごにょして出来上がったのが、以下のコードです。
>|
///////////////メニュー一括マウスオーバー設定///////////////
//windowにonloadイベントハンドラーを追加
eval(window.onload=onLoadEve)
//ページ読み込み時の動作
function onLoadEve(){
var d=document.getElementById("menu").getElementsByTagName("img");
for(i=0;i<d.length;i++){
//ID(menu)内のIMG要素にmouseover,mouseoutイベントハンドラーを追加
eval(d[i].onmouseover=onMouseOverEve)
eval(d[i].onmouseout=onMouseOutEve)
}
}
//IMG要素をマウスオーバーした時の動作
function onMouseOverEve(){
var imgs = this.src.substring(this.src.lastIndexOf('/')+1,this.src.length);
//画像がOver(_f3)でなければ画像を_f2に変更する
if(imgs.substring(0,imgs.lastIndexOf('.')).match(/(_f3?|\/)$/)==null){
moImage = new Image();
moImage.src=this.src.substring(0,this.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('.'))+"_f2"+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
this.src = moImage.src;
}else{
}
}
//IMG要素をマウスアウトした時の動作
function onMouseOutEve(){
var imgs = this.src.substring(this.src.lastIndexOf('/')+1,this.src.length);
//画像を変更する
if(imgs.substring(0,imgs.lastIndexOf('.')).match(/(_f3?|\/)$/)==null){
this.src = this.src.substring(0,this.src.lastIndexOf('/')+1)+imgs.substring(0,imgs.lastIndexOf('_f2.'))+imgs.substring(imgs.lastIndexOf('.'),imgs.length);
}else{
}
}
////////////////////////////////////////////////////////////
|<
 これを記述したjsファイルをどこかで(できればHTMLファイルの末尾で)読み込んであげれば、それだけで「menu」というID内にあるxx_f3.xxではない1画像はすべてマウスオーバーで「xx_f2.xx」という画像を表示させるようになります。2
 サンプルはこんな感じ
 これでもう、メニューのマウスオーバーごときにHTMLを汚されなくてすむわけですね。わーい、スッキリした〜。←自己完結

  1. つまり、現在のページをあらわす画像だけをxx_f3.xxという名称の画像に変更しておくわけですね。 []
  2. もし、menuIDの中にメニューではない画像が含まれる場合は、その名前をxx_f3.xxにするか、もしくは「menuの中のaタグの中のimgタグ」と指定を買えてやればよさそうな気がします。その前にmenuの中にメニューではない画像が含まれることがダメのような気はしますが。 []
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

Spam Protection by WP-SpamFree

No trackbacks yet.