- ベストアンサー
HP 画像の一部にリンクでその部分のみ画像変化
- ホームページを勉強し始めたものですが、ヘッダーの画像の一部に問い合わせボタンのようなものを配置し、マウスオーバーするとその部分のみ画像変化させたいですが、うまくできません。
- 実際のHTMLでは、imgタグとmapタグを使用して画像とリンクを設置していますが、マウスオーバーするとボタンが画像全体に切り替わってしまいます。
- 周りのホームページ詳しい人に聞いても解決策はわからず、どなたか教えていただけないでしょうか？
- shanks8532
- お礼率44% (4/9)
- ホームページ作成ソフト
- 回答数6
- ありがとう数10
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No.3です。とっても簡単なので、もう少し具体的にソースを書いて見ましょう。 質問内容から見て、 ＞画像の一部にリンクを設置し、 は画像の複数の場所にリンクボタンをおくことと考えてよいかと思います。20年位前は、tableでスライスした画像を貼り付ける方法が見受けられましたが・・。1999年に勧告されたHTML4.01以降見なくなりました。『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 イメージマップは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-html401j/struct/global.html#h-7.5.4 )から、下記のようになっているはずです。 <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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (5)
- kichi4182
- ベストアンサー率21% (12/57)
基本的には出来ません。私が知らないだけかもしれませんが．．．．（＾▽＾笑） 私は画像上の文字だけを変えるという事をやっていますが、画像を細切れにしてtableで配置しています。table指定しなくても可能だとは思いますが．．． http://ikasitai.info/
- 参考URL：
- http://ikasitai.info/
- sora1515
- ベストアンサー率58% (54/92)
ORUKAさんの書き方すごく好きです。書きたいのを全て言ってもらえてすっきりしました。いつもそんな感じで言いたい事をすごくがまんしてます・・・ｗ あとすみません声だしついでで、、 代替スタイルシートはchromeにすごくおすすめのがありますよ！ stylebot
お礼
sora1515さん、色んな方法があるのですね。ちょっとみてみます。デザインに行き詰まったら参考にしてみたいと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
同様の質問が ⇒イメージマップで文章を表示したい。 - HTML - 教えて！goo( http://okwave.jp/qa/q8319978.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-html401j/struct/objects.html#h-13.6 ) この場合は、単純に <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-html401j/struct/global.html#h-7.5.4 )』 divはデザインのためじゃなく文書構造を示すためですし、他の要素で良いときは使うべきでない!!HTML5では、その反省から「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加され、DIVは原則使うべきではないことになります。 スタイルシートは単純に、親コンテナブロックをstatic以外で配置し、その背景を指定して、リンクをその上に配置すれば良いですよ。 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で[表示]→[スタイル(シート)]→「画像の上に配置」を選択した状態になります。 ★Chromeは代替スタイルシートを利用できないので他のブラウザで HTMLさえきちんと書けていれば、↑のようにデザインは自由に出来ます。HTMLもきちんと書かれているのでメンテナンスも(デザインの変更も)容易です。
- sora1515
- ベストアンサー率58% (54/92)
イメージマップ初挑戦してみました。 いけそうですよ <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/
お礼
sora1515さん サンプルまで見せていただき有難うございます。 まさにこれをしたかったわけですが、この画像を例えばヘッダーの画像にして、上部固定、センタリングでも同じことができるのでしょうか？ まさにこのテクニックがやりたいのですが、上部固定の線たりリングするとできなくて困ってました。
- Safe_Mode
- ベストアンサー率48% (1329/2725)
画像の一部がボタンのような形になっていてマウスオーバーでそのボタンのような形の部分だけを変化させたい、ということなら、画像の一部がボタンのような形をした元の画像を、<div id="header_pic">の背景として表示させ、変化後のボタンの形の画像のみを画像として扱うほうが簡単なきがしますけど。
補足
お返事有難うございました。申し遅れましてすみません。実は別の質問でもあげたのですが、このヘッダーは上部固定、中央寄せされており、どうしてもそのボタンのみの小さい画像をposition：absolute;で希望の場所に配置できず、苦肉の策で上部固定、中央寄せが効く一枚の画像から一部の部分をリンクとしてマウスオーバー変化させようと考えてました。上部固定、中央寄せ効かせながらだと、ヘッダー画像のような全体の画像を用意しないと希望の位置にリンクボタン画像をどうしても設置できないからです。(原因は100%幅のヘッダーだからかと思っているのですが）上部固定、中央寄せが効くリンク用のみの小さい画像の重ねができればいいのですが・・・ なので今回一枚の画像の一部のみを変化させる方法を模索しております。
お礼
初心者の私にここまで親切丁寧に教えてくださりほんとにどうも有難うございます。Oruka1951の回答みて基礎がどれだけ大切か、また自分がつぎはぎだけの知識しかないということを実感しました。 まずは、じっくりと頂いたソースを試してみて研究してみます。