プロが教える店舗＆オフィスのセキュリティ対策術

HP　画像の一部にリンクでその部分のみ画像変化

解決済

  • 質問者：shanks8532
  • 質問日時：
  • 回答数：6件

ホームページを勉強し始めたものですが、今ヘッダーの画像の一部に”問い合わせ”ボタンのようなのがある状態ですが、マウスオーバーさせるとそのボタンの絵だけを画像変化させるようにするのにつまずいています。自分でやるとどうしてもヘッダーの画像にすこしでもマウスオンするとボタンがすでに変化用の画像に切り替わってしまいます。＜AREA＞を使ってみてもやはりリンクの部分だけでなく、画像全体に反応してしまいます。周りのホームページ詳しい人に聞いても、分かりませんでした。。。
実際のHTMLは下記の通りです。

<div id="header_pic">

<img border="0" src="../../img/元の画像.png" onMouseOver= "this.src='../../img/画像変化後.png'" onMouseOut="this.src='../../img/元の画像.png'" alt="事務所" width="980" height="130" usemap="#Map" />
<map name="Map">
<area shape="rect" coords="743,40,917,74" href="../contact/index.html" alt="問い合わせ">

</map>

画像の一部にリンクを設置し、その部分に乗った時だけ、その部分のみを画像変化させることはできないのでしょうか？
どなたかご教示お願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

No.3です。

とっても簡単なので、もう少し具体的にソースを書いて見ましょう。
質問内容から見て、
＞画像の一部にリンクを設置し、
　は画像の複数の場所にリンクボタンをおくことと考えてよいかと思います。20年位前は、tableでスライスした画像を貼り付ける方法が見受けられましたが・・。1999年に勧告されたHTML4.01以降見なくなりました。『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　イメージマップはHTML3.2で登場したイメージマップは、スタイルシートの普及であまり使われなくなりました。

　本題ですが、HTMLには文書構造(だけ)を書くことになりますから、その部分は
[HTML5]だと、文書構造を示す要素が追加されDIVは原則使えませんので・・
<header>
　・・・・・・・・・
　<nav>
　　<ol>
　　　<li><a href="/">トップ</a></li>
　　　<li><a href="/Products">製品情報</a></li>
　　　<li><a href="/Support">サポート</a></li>
　　　<li><a href="/contactUs">問合せ</a></li>
　　</ol>
　</nav>
</header>
[HTML4.01]だと、文書構造はclassやid名で指定します( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )から、下記のようになっているはずです。
<div class="header">
　・・・・・・・・・
　<div class="nav">
　　<ol>
　　　<li><a href="/">トップ</a></li>
　　　<li><a href="/Products">製品情報</a></li>
　　　<li><a href="/Support">サポート</a></li>
　　　<li><a href="/contactUs">問合せ</a></li>
　　</ol>
　</div>
</div>

これをスタイルシートでデザインして行きます。
★この方法は、スプライトの一種ですね。
★画像は添付の物を横幅980pxに拡大してください。
★タブは＿に置換してあるので戻す。
<!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 name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
div.header div.nav{
width:980px;
height:130px;
background:url(./images/header.jpg) rgb(0,128,255);
position:relative;
}
div.header div.nav ol,div.header div.nav ol li{
margin:0;padding:0;
list-style:none;
}
div.header div.nav ol li a{
position:absolute;
text-indent:-1000px;
overflow:hidden;
width:160px;height:50px;top:35px;
}
div.header div.nav ol li a:hover{background-image:url(./images/header.jpg);}
div.header div.nav ol li a[href="/"]{width:380px;height:70px;left:40px;top:30px;}
div.header div.nav ol li a[href="/Products"]{left:430px;}
div.header div.nav ol li a[href="/Support"]{left:616px;}
div.header div.nav ol li a[href="/contactUs"]{left:805px;}

div.header div.nav ol li a[href="/"]:hover{background-position:-40px -230px}
div.header div.nav ol li a[href="/Products"]:hover{background-position:-435px -235px}
div.header div.nav ol li a[href="/Support"]:hover{background-position:-616px -235px}
div.header div.nav ol li a[href="/contactUs"]:hover{background-position:-805px -235px}

div.header div.nav ol li a[href="/"]:active{background-position:-40px -430px}
div.header div.nav ol li a[href="/Products"]:active{background-position:-435px -435px}
div.header div.nav ol li a[href="/Support"]:active{background-position:-616px -435px}
div.header div.nav ol li a[href="/contactUs"]:active{background-position:-805px -435px}

-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/">トップ</a></li>
＿＿＿＿<li><a href="/Products">製品情報</a></li>
＿＿＿＿<li><a href="/Support">サポート</a></li>
＿＿＿＿<li><a href="/contactUs">問合せ</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
「HP　画像の一部にリンクでその部分のみ画」の回答画像6
    • good
    • 0
    • 件
通報する
この回答へのお礼

初心者の私にここまで親切丁寧に教えてくださりほんとにどうも有難うございます。Oruka1951の回答みて基礎がどれだけ大切か、また自分がつぎはぎだけの知識しかないということを実感しました。
まずは、じっくりと頂いたソースを試してみて研究してみます。

通報する
お礼日時：2013/10/31 20:52

No.5

  • 回答者： kichi4182
  • 回答日時：

基本的には出来ません。

私が知らないだけかもしれませんが．．．．（＾▽＾笑）

私は画像上の文字だけを変えるという事をやっていますが、画像を細切れにしてtableで配置しています。table指定しなくても可能だとは思いますが．．．

http://ikasitai.info/

参考URL：http://ikasitai.info/
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： sora1515
  • 回答日時：

ORUKAさんの書き方すごく好きです。

書きたいのを全て言ってもらえてすっきりしました。いつもそんな感じで言いたい事をすごくがまんしてます・・・ｗ

あとすみません声だしついでで、、
代替スタイルシートはchromeにすごくおすすめのがありますよ！
stylebot
    • good
    • 0
    • 件
通報する
この回答へのお礼

sora1515さん、色んな方法があるのですね。ちょっとみてみます。デザインに行き詰まったら参考にしてみたいと思います。

通報する
お礼日時：2013/10/31 20:55

No.3

  • 回答者： ORUKA1951
  • 回答日時：

同様の質問が


　⇒イメージマップで文章を表示したい。 - HTML - 教えて！goo( http://oshiete.goo.ne.jp/qa/8319978.html )
　に、ありますので確認してください。areaを使うと画像の置換はしにくいです。普通にリンクからmapを使うと出来なくもないでしょうが・・
<p><img src="./images/map1.jpg" width="420" height="314" usemap="#sample"></p>
<map name="sample">
　<ul>
　　<li><a shape="rect" coords="40,20,180,120" href="map1.html" alt="リンク1">あいうえお</a></li>
　　<li><a shape="circle" coords="300,150,80" href="map2.html" alt="リンク2">かきくけこ</a></li>
　　<li><a shape="poly" coords="125,140,200,195,172,284,78,284,49,195" href="map3.html" alt="リンク3">さしすせそ</a></li>
　</ul>
</map>
とか・・
　⇒13.6 イメージマップ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　この場合は、単純に
<div class="header">
　<h1>ページタイトル</h1>
　<p id="contactUs"><a href="/contactUs.html">問合せ</a></p>
　・・・
</div>
　だけでよいです。!!!・・・へんな、意味のないidやclassをつけない!!
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　divはデザインのためじゃなく文書構造を示すためですし、他の要素で良いときは使うべきでない!!HTML5では、その反省から「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」新しい要素が追加され、DIVは原則使うべきではないことになります。

　スタイルシートは単純に、親コンテナブロックをstatic以外で配置し、その背景を指定して、リンクをその上に配置すれば良いですよ。
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　で[表示]→[スタイル(シート)]→「画像の上に配置」を選択した状態になります。
　　★Chromeは代替スタイルシートを利用できないので他のブラウザで
　HTMLさえきちんと書けていれば、↑のようにデザインは自由に出来ます。HTMLもきちんと書かれているのでメンテナンスも(デザインの変更も)容易です。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： sora1515
  • 回答日時：

イメージマップ初挑戦してみました。


いけそうですよ


<img src="inu.jpg" alt="" name="imgmap_l" width="300" height="300" usemap="#imgmap_l">
<map name="imgmap_l">
<area shape="circle" coords="166,159,22" href="http://google.co.jp/" onMouseOver="document.imgmap_l.src='akainu.jpg'" onMouseOut="document.imgmap_l.src='inu.jpg'" alt="">
</map>




サンプルもWebにあげてみました。
http://imagemap-inu.petit.cc/top/
    • good
    • 0
    • 件
通報する
この回答へのお礼

sora1515さん　サンプルまで見せていただき有難うございます。　まさにこれをしたかったわけですが、この画像を例えばヘッダーの画像にして、上部固定、センタリングでも同じことができるのでしょうか？　まさにこのテクニックがやりたいのですが、上部固定の線たりリングするとできなくて困ってました。

通報する
お礼日時：2013/10/31 20:58

No.1

  • 回答者： Safe_Mode
  • 回答日時：

画像の一部がボタンのような形になっていてマウスオーバーでそのボタンのような形の部分だけを変化させたい、ということなら、画像の一部がボタンのような形をした元の画像を、<div id="header_pic">の背景として表示させ、変化後のボタンの形の画像のみを画像として扱うほうが簡単なきがしますけど。

この回答への補足

お返事有難うございました。申し遅れましてすみません。実は別の質問でもあげたのですが、このヘッダーは上部固定、中央寄せされており、どうしてもそのボタンのみの小さい画像をposition：absolute;で希望の場所に配置できず、苦肉の策で上部固定、中央寄せが効く一枚の画像から一部の部分をリンクとしてマウスオーバー変化させようと考えてました。上部固定、中央寄せ効かせながらだと、ヘッダー画像のような全体の画像を用意しないと希望の位置にリンクボタン画像をどうしても設置できないからです。(原因は100%幅のヘッダーだからかと思っているのですが）上部固定、中央寄せが効くリンク用のみの小さい画像の重ねができればいいのですが・・・
なので今回一枚の画像の一部のみを変化させる方法を模索しております。

補足日時：2013/10/30 00:04
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報