- ベストアンサー
マウスオーバーで複数の画像を非表示
マウスオーバーで画像を非表示にしています。 以下の例で、複数の画像を非表示にするにはどうすればよいでしょうか？ 例では画像はjpeg1.jpg～jpeg3.jpgの３つですが、実際には個数は毎日変化します。 <a>タグに画像の個数分のonMouseOverを書けばよいのでしょうが、もっと簡単に書く方法はないでしょうか。 PerlからHTMLを吐き出します。 <html> <a href="Javascript:" onMouseOver="jpeg1.style.display='none';" onMouseOut="jpeg1.style.display='';">非表示</a><br> <img src="./jpeg1.jpg" name="jpeg1"><br> <img src="./jpeg2.jpg" name="jpeg2"><br> <img src="./jpeg3.jpg" name="jpeg3"><br> </html>
- ps5550
- お礼率65% (129/196)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
imgタグだけ取ってfor文とか回してもいいですけど、 HTML変更していいならimgタグ全体ををdivタグできって divタグ一個をdisplay='none'にして まるっと非表示にしちゃえばいんじゃないですか？
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばdivなどでかこんでグルーピングをして、クラスを割り当てるとか <script> function view(obj,v){ obj.parentNode.className=v; } </script> <style> div.hide img{ display:none; } </style> <div> <a href="#" onmouseover="view(this,'hide')" onmouseout="view(this,'')">非表示</a><br> <img src="1.jpg" name="jpeg1"><br> <img src="2.jpg" name="jpeg2"><br> <img src="3.jpg" name="jpeg3"><br> </div> ※クラス名のオンオフは複雑になるので簡易的な表現にしてあります
お礼
ありがとうございます。 この方法でできました。 JavaScriptは詳しくなく、意味は良く分かってませんが、勉強します。 ありがとうございました。
お礼
できました。 <div ID="jpeg1">でまとめてました。 ありがとうございます。