ロールオーバーでimgをフェード

  • このエントリーをはてなブックマークに追加
  • LINEで送る

またもや前回の続き

次は、現在1個のidにしか対応してないので、対象の要素(とりあえずa?)が複数あれば勝手に全部対応できるようにさせる。

特定のid内のaに包まれたimgを対象にopacityを変化させるようにしてみた。
動作確認はこちら。

javascriptはcssと違って「子 > 親」を指定できるみたい、便利だ。
[js]
_contentWrap=document.getElementById("content");
_img=_contentWrap.getElementsByTagName("img");
for(var i=0;i<_img.length;i++){
if(_img[i].parentNode.tagName=="A"){
//親要素がaタグだった場合の処理
//小文字のaにすると見つけられないようでした。
}
}
[/js]

一応当初の目的は達成したけれど、次は、
別の画像を前面にalpha0で呼び出してからalphaを100に変更させるか、
背面に呼び出して前面の画像のalpha0に変更させるか、してクロスオーバーするマウスオーバーが出来たらいいなぁ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.