完成形 1
では、前ページでまとめたスクリプトを改めて記述していきましょう。 まずは<head>内のスクリプトから挙げます。
例：
<script type="text/javascript">
<!--
function cngImg(){
document.+++.src="***";
/* +++の部分は画像を差し替える要素の識別子、***の部分は変更する画像のURI */
}
// -->
</script>
スクリプト内の「+++」や「***」の部分は、それぞれカスタマイズしてください。 これを<head>内に入れておきます。 次は<body>内の記述です。
例： <img src="***.jpg" onClick="cngImg()"> <img src="***.png" onMouseover="cngImg1();" onMouseout="cngImg2()">
はい、前ページのものと変わりありませんね。 これらをそれぞれ適宜調整して記述すれば、ロールオーバー効果が実装できます。 なお、このタグですが、スクリプトの方で「document.任意の識別子.src」という指定方法をとっていた場合には、必ず対応する識別子をname属性かid属性(両方書いても可)で記述しておくことを忘れないようにしてくださいね。 以下には、実例を示します。 左側はクリックすると画像が変更されます。 右側は、ポインタが上に乗ったり、外れたりを感知して画像が変化します。
ちなみに、効果が1回で終わってしまうのもなんですので、クリックする側のスクリプトにはちょっと手を加えて何度も2枚の画像が入れ替わるような仕掛けにしてあり、またポインタに合わせて画像が変化するほうでは呼び出す関数を別々のものに指定してあります。 このページのソースを参照してみれば、より参考になるかもしれませんね。