【無料配信♪】Renta !全タテコミ作品第1話

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

JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか?

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

マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。

このQ&Aに関連する最新のQ&A

A 回答 (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も不要です。
※見やすくするため、タブを全角スペース2文字で置換してある。
  テストするときは元に戻すこと
※Another HTML-lint gateway ( ​http://openlab.ring.gr.jp/k16/htmllint/htmllint. …​ )でチェックすみ
※W3C CSS 検証サービス ( ​http://jigsaw.w3.org/css-validator/#validate_by_ …​ )で検証済み
※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;
  }
/* 分岐点1 */
  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>
    • good
    • 0

<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>


背景と透過を組合せましょう。
常時「別れ道画像」が背景で表示され、
上に「透明画像」があってオンマウスで「矢印」に切り替わり表示。
画像を同じ大きさに統一する事でソースが単純になります。

元の総サイズよりも軽くなると思いますが。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング