hori-uchi.com: 画像のスワップをクラス名で制御するJavaScript（プリロード付き）

ちょっとJavaScriptをまじめに勉強しようかと思い始めました。 というわけで、手始めにマウスオーバーすると別画像に切り替わるスクリプトを書いてみました。 マウスオーバーで画像が切り替わるなんて、Dreamweaver使えばJavaScriptを知らなくてもできてしまうんですが、Dreameweaverが吐き出すコードはHTMLタグの中にonload="xxxxxxxx"とか、onmouseover="xxxxx"をやたらと追加して、非常に見づらいのです。 これだとテキストエディタでちょろっとHTMLを編集したい時に大変ですし、きっとGoogleさんもクロールしにくいでしょうから、imgタグに予めスワップ用に設定しておいたクラス名を記述しておけば、マウスオーバー、マウスアウトで画像が切り替わるようにしてみました。 作成したスクリプトはこんな感じです。クラス名から要素を取得するところはp

[jamg]

onload="hoge"とか書かないでclass名で制御。

[nakachop]

ロールオーバー 最近はCSSでやっちゃうことが多いけど DWで吐かれるのよりシンプルでよいかな そのまんまコピペだとなんでかIEで上手く動かなかったがワタシには原因を突き止める力がない

[i-Daisuke]

シンプルな記述になるロールオーバー

[yasuwi]

HTMLしかわからない人でも設置しやすそうな点がGood!

[se-mi]

小技