締切済み

画像内にリンクボタンを作成したいのですが。

2010/01/28 17:08

現在Fireworksで画像を作成し、DreamweaverでHTMLを使いwebページを作成しています。仕事で簡単なLPを作成する機会があるのですが、何しろ経験も知識も乏しく困っています。今大きな画像内に「購入はこちら」のようなリンクボタンを設置したいのですが、スライスした画像にDreamweaverのホットスポットを使ってプロパティの「リンク」にリンク先のURLを挿入しています。そうすると必ず次の画像が一行開いてしまうんです。なぜでしょうか？ホットスポットはちゃんとできていてリンクもちゃんと飛びます。大きな画像をFireworksでスライスしてから保存しているのでリンクボタンのある画像の下に来る画像の間に空白ができてしまいます。どうしてこのような状態になりますか？色々調べているのですが、原因が見当たりません。スタイルシートを使用しているのでそのせいかとも思ったのですが、詳しい前任者が作成したものはちゃんと表示されています。同じスタイルシート使用です。つたない説明で申し訳ないのですが、原因がわかる方はいますでしょうか。どなたか教えてください。よろしくお願いします。

56781111
お礼率0% (0/3)

ホームページ作成ソフト
回答数3
ありがとう数4

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

みんなの回答

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/01/30 04:12 回答No.3

っと、まだ開いてますね。画像を表示しない設定か非グラフィカルブラウザでは<area>のalt属性の表示位置が問題になりますので、最後に提示した</body>の直前に移動させるという方法は、DWでの修正は簡単になりますが、弊害が大きいかもしれません。非グラフィカルブラウザでのaltの表示位置で調整して下さい。というわけで、<img>と離れた場所なら特に問題ないと思いますが、「画像のかわりに画像のあった場所に」altを表示させるなら、１つめの方法での調整をしないと行けないと思います。・・・普段からaltを指定してないのがばれちゃったようですが、、、言い訳ですが、<map>を使うことが殆どありませんので(^^;

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2010/01/29 03:19 回答No.2

<img src=""> <img src=""> 原因は、HTMLコードで改行しながら画像2つを並べると、間にスペースが入るという物です。ブラウザのバグと言えばバグですが、仕様と言えば仕様ですね。対処法ですが、コードビューでの対応になります。ホットスポットを使うと、コードビューで以下のような部分が作られます。（DWの環境設定により、改行やインデントが入ることがあります） <img src="images/clickablemap.png" width="200" height="100" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="17,10,73,21" href="#"></map> これを下のように、改行位置を変更してみて下さい。（<map name="Map">という部分を移動させています。） <img src="images/imagemap.png" width="200" height="100" border="0" usemap="#Map"><map name="Map"> <area shape="rect" coords="17,10,73,21" href="#"></map> コードを変更してからホットスポットを変更すると、またコードを変更し直さなければなりません。画像のすぐ後で改行をしている場合は、以下のように<br>が入っていると思います。 <img src="images/imagemap.png" width="200" height="100" border="0" usemap="#Map"> <map name="Map"><area shape="rect" coords="17,10,73,21" href="#"></map><br> その場合は、この<br>を移動させると、ホットスポットを変更しても画像のすきまは復活しません。 <img src="images/imagemap.png" width="200" height="100" border="0" usemap="#Map"><br> <map name="Map"><area shape="rect" coords="17,10,73,21" href="#"></map> --------------- <map>から</map>までを</body>の直前まで移動させても良いと思います。個人的にはこれがおすすめです。 <img>と<map>が離れるのは、HTML的コーディングガイドとしてどうなんだろう、、、ですが。 <img src=""> ・・・（中略）・・・ <map name="Map"><area shape="rect" coords="17,10,73,21" href="#"></map> </body> </html>

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

2010/01/28 23:55 回答No.1

理由はソースがないので分かりません。書かれても、今はDreamweaber使ってないので・・　単純なデザインなら兎も角、そのくらいになると手書きで書いたほうが、はるかに楽ですね。　画像をスライスする必要もないし、手間もかからないし、ＳＥ対策(SEO)も完璧だし・・・下記はbody本体のサンプル、最後にHTML全体のサンプル上げておきます。適当に変更して利用してください。　DreamWeaverの場合も、CSSさえきちんと書けば画像のスライスなんていらないはずです。(画像はひとつしか読ませない) <body> 　　<h1>メニュー</h1> 　　<ul id="nav"> 　　　　<li id="pa1"><a href="p1.html">１ページへ</a></li> 　　　　<li id="pa2"><a href="p2.html">２ページへ</a></li> 　　　　<li id="pa3"><a href="p3.html">３ページへ</a></li> 　　</ul> </body> </html> ★なお、添付画像を420px×314pxのbackground.jpgの名前で保存して、HTMLと同じ場所に保存すること。 ★ソースはタブ１個を全角スペース２個で置換してあります。元に戻してください。 ★いちおう、最低限のお約束として、IE8,Opera9.25,safari4,firefox3.6および　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) 　The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) 　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#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> 　　<ul id="nav"> 　　　　<li id="pa1"><a href="p1.html">１ページへ</a></li> 　　　　<li id="pa2"><a href="p2.html">２ページへ</a></li> 　　　　<li id="pa3"><a href="p3.html">３ページへ</a></li> 　　</ul> </body> </html>