「this.src」でロールオーバーがイイ感じ

Adobe Dreamweaver では、
画像にマウスポインタを当てると、サッと違うイメージに変わる、
ロールオーバー（マウスオーバー）が簡単にできるように、
ビヘイビアパレットから、ちょちょっと設定するだけで、
一連のJavascriptを組み込んでくれます。


しかも、確実に動作してくれているので、
完成後に動くか動かないかドキドキせずに済み、
しかも付随する便利機能（画像ファイルのプリロード記述など）もあるので、
とても重宝しますが、いかんせん短所と思う部分もあります。


▽短所として、主に以下の2つがあります。
１）HTMLソースでの記述が長くなってしまう。
２）idとnameの設定と管理が大変。




１）の「HTMLソースでの記述が長くなってしまう。」ですが、
Draemweaverでロールオーバーを仕込むと、以下のような記述になります。


＜例：仕込む前＞
<a href="index.html"><img src="button_off.gif" alt="ボタン" width="100" height="20" border="0" /></a>


＜例：仕込んだ後＞
<a href="index.html" onmouseover="mm_swapimage('image1','','button_on.gif',1)" onmouseout="mm_swapimgrestore()"><img src="button_off.gif" alt="ボタン" name="image1" id="image1" width="100" height="20" border="0" /></a>


<a>タグに記述された
onmouseover="*****"　onmouseout="*****"
の箇所がそうなのですが、仕込む前から比べると非常にソースが長くなってしまってしまいます。
また、nameとidが自動的に書き込まれるために、さらに長く、ソースが一別しにくくなり、
ちょっとした修正や更新作業でも、Dreamweaverに頼らざるを得ないことになりがちです。




２）の「idとnameの設定と管理が大変。」ですが、
Dreamweaverのビヘイビアパレットで設定すれば、
自動的にロールオーバーさせたい画像に、idとnameを割り振ってくれますが、
数が増えたり、更新を何度か経ると、とりあえず動けばいいやーと、
結構適当なidとnameにしてしまうことも。


確かに、動けばとりあえずはOKですが、
判読しやすいスマートなソースにして、修正や更新作業をスムースにすることを考えた場合は、
あまり向いているとは思えません。場合によっては、idとnameの管理も必要になるので、
ますますもって面倒くさいことになります。


また、idとnameの書き換えが必要であるため、コピペしてスグには使えないので、
設定箇所が増えると、手間に感じるようになります。
（コピペで使えると、検索置換で一気にババっと追加できるのでグーなのです。）



【memo】
idは、1つのHTMLファイルの中で重複してはいけないハズ、なのですが、
Javascriptによるロールオーバーなどが反応しなくなる場合などを除いて、
画面表示ができなくなるとかの致命的な事は起きません。




できれば、いちいちidやnameを割り振らずに動く方法で
ロールオーバーさせる方が設定も楽だし、
idやnameを意識（管理）しなくて済むので、良いですよね。

そこで、いちいちidやnameを設定せずに、
同じ記述でロールオーバーできるナイスな方法として、
this.src='画像ファイルのパス'; があります。




先ほどの例で示しますと、

＜例：仕込む前＞
<a href="index.html"><img src="button_off.gif" alt="ボタン" width="100" height="20" border="0" /></a>

＜例：仕込んだ後＞
<a href="index.html"><img src="button_off.gif" alt="ボタン" width="100" height="20" border="0" onmouseover="this.src='button_on.gif';" onmouseout="this.src='button_off.gif';" /></a>

になります。


<img>タグに記述された
onmouseover="this.src='button_on.gif';"　onmouseout="this.src='button_off.gif';"
がその箇所です。

あんまり長さに差はないように見えるかもしれませんが、
nameとidを記述せずに済んでいることが、大きな特徴です。



注意点は、idやnameを画像に割り当てずに「this」と記述するために、
ロールオーバーさせたい画像のタグに記述する必要があることと、
ロールアウト（マウスアウト）させる記述が必要になることです。

（異なるタグから操作したい場合の記述方法はあるのですが、ここでは省略します。）




this.src='画像ファイルのパス'; の短所ですが、
３）画像ファイルのプリロード（先読み）させたい場合は、別で設定する必要がある。
４）Dreamweaver上でHTMLファイルのディレクトリを変更する際、自動的に画像のパスを書き換えてくれない。
があります。


３）４）ともに
Dreamweaverのビヘイビアパレットでロールオーバーを設定したら、
自動的に先読みのJavascriptを記述してくれたり、
画像のパスに「../」を追加したり削除したりしてくれるのですが、
this.src='画像ファイルのパス'; を使うと、カスタムスクリプト扱いとなり、
Dreamweaverは感知しなくなってしまいますので、
自分で記述・変更する必要が生じます。




完全にDreamweaverの自動的な記述にまかせたい場合は別ですが、
this.src='画像ファイルのパス'; を使うと、
テキストエディタでちょこちょこっと記述するだけでロールオーバーさせられますし、
idやnameを書き換える必要がないので、一気にコピペして機能させられます。
また、更新時に、今度のidは何にしよう？　など余計なことを考えずに済むのもナイスかも、です。

ある程度ソースが読めて、ハンドコーディングでの作業に慣れてきた方には、
this.src='画像ファイルのパス'; は、とてもおすすめです。