締切済み

JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです

2010/01/25 04:28

JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか？例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる（載せる）と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。

lcyfer666
お礼率18% (3/16)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/01/25 10:40 回答No.2

たとえば、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">  　　</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)

2010/01/25 07:38 回答No.1

<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> 背景と透過を組合せましょう。常時「別れ道画像」が背景で表示され、上に「透明画像」があってオンマウスで「矢印」に切り替わり表示。画像を同じ大きさに統一する事でソースが単純になります。元の総サイズよりも軽くなると思いますが。

ログインすると、全ての回答が全文表示されます。