- 締切済み
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか？ 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる（載せる）と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たとえば、HTMLの場合 ・・・CSSが無効な旧ブラウザ・携帯電話に対応 ・・・意味から <h1>道順</h1> <ol id="route"> <li id="p1"><a href="#POINT2" id="POINT1" name="POINT1">駅前交差点を右に</a></li> <li><a href="#POINT3" id="POINT2" name="POINT2">立石交差点を左に</a></li> <li><a href="#POINT1" id="POINT3" name="POINT3">山手交差点を左に</a></li> </ol> というマークアップされているとして、CSSを書くと下記のようになります。CSSを無効/解除しても、意味がわかります。javascriptも不要です。 ※見やすくするため、タブを全角スペース２文字で置換してある。 テストするときは元に戻すこと ※Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックすみ ※W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )で検証済み ※The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )で検証済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- ol#route,ol#route li{display:block;margin:0px;padding:0px;color:transparent;} ol#route li{width: 400px;height:292px;} ol#route li a{ display:block;width: 100%;height:100%; background-repeat:no-repeat; } /* 分岐点１ */ ol#route li#p1{background-image:url(./images/bun.jpg);} ol#route li a#POINT1:link{color:transparent;} ol#route li a#POINT1:visited{color:transparent;} ol#route li a#POINT1:focus, ol#route li a#POINT1:hover{ background-image: url(./images/arrowR.gif); background-position: 50% 50%;color:red; } ol#route li a#POINT1 a:active{ background-image: url(./images/arrowR.gif); background-position: 50% 50%;color:red; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>道順</h1> <ol id="route"> <li id="p1"><a href="#POINT2" id="POINT1" name="POINT1">駅前交差点を右に</a></li> <li><a href="#POINT3" id="POINT2" name="POINT2">立石交差点を左に</a></li> <li><a href="#POINT1" id="POINT3" name="POINT3">山手交差点を左に</a></li> </ol> </body> </html>
- naokita
- ベストアンサー率57% (1008/1745)
<div style="width:200px; height:200px; background: url(分かれ道画像.jpg) no-repeat;"> <img src="透明.gif" alt="オンマウス" width="200" height="200" onmouseover="this .src='矢印透過.gif'" onmouseout="this .src='透明.gif'" /> </div> 背景と透過を組合せましょう。 常時「別れ道画像」が背景で表示され、 上に「透明画像」があってオンマウスで「矢印」に切り替わり表示。 画像を同じ大きさに統一する事でソースが単純になります。 元の総サイズよりも軽くなると思いますが。
