みなさん、こんにちは。
今、ホームページのリニューアルを考えています。
フレームで左右のページに分けて、左ページにメニューを載せて、右ページをメインにしたいと思っています。
そこまでの工程は一応分かります。
しかし、左ページ一枚の画像の中に、「profile」や「diary」というコンテンツ名を画像ソフトで載せて、そのコンテンツ名をクリックすると、右ページに反映されるようにしたいのです。
画像ソフトでコンテンツ名を載せることも、自分でできます。
しかし、画像の中に載せてあるコンテンツ名をクリック出来るようにする方法が分かりません。
調べたのですが、ビルダーを使うと簡単だということですが、ビルダーを持っていなくて困っています。
タグなどで、画像上に載せたいくつかのコンテンツ名を、リンクできるようにする方法はありませんでしょうか?
もしお分かりの方がいらしたら、教えてください。
参考になるサイト(できるだけ分かりやすいもの)を教えてくださるだけでも助かります。
どうか、よろしくお願いしますm(__)m
No.2ベストアンサー
- 回答日時:
クリッカブルマップにしたいということですよね?
簡単に作成できるソフトがあるので、それを使うのが一番手っ取り早いと思いますよ。
http://www.j-skai.com/cmap/index.php
参考URL:http://www.j-skai.com/cmap/index.php
お礼をするのが遅れて、本当に申し訳ありません。この回答をいただいたあと、すぐにそのソフトをDLして使ってみたのですが、「こんなに便利なソフトがあるなんて!!」と、大変役に立ちました。すごく簡単にできて、本当に感謝しています。お礼のポイントを500ptぐらいしたい程の、名回答でした。ホントにありがとうございました!!
No.5
- 回答日時:
4氏の方法は、問題があります。
http://www.mozilla.gr.jp/standards/webtips0018.h …
http://www.mozilla.gr.jp/standards/webtips0025.h …
http://www.mozilla.gr.jp/standards/webtips0026.h …
何かと難しいことが書かれていますが、要は画像を隙間無く敷き詰められるとは限らないのです。それに、table要素でのレイアウトは推奨されません。
この場合はクリッカブルマップで良いと思うのですが。
ttp://www.umechando.com/tips/25.htm
こちらのページで、クリッカブルマップを作成することが出来ます。(ただしJavaScriptが有効なInternet Explorer4以上限定
ただし、いずれの方法でも問題が生じます。img要素とarea要素には、画像が無効な際に代わりとして表示されるテキストを指定するalt属性が必須ですので、これを怠ると画像が無効な環境では最悪リンクが無効になる問題が発生します。
No.4
- 回答日時:
No.3の回答のように、クリッカブルマップでも可能ですが、クリッカブルマップは位置を記述するのが面倒です。
もっと簡単な方法があって、画像を複数枚に分割し、テーブルタグを使用して隙間無く画像を並べ、コンテンツ名を載せた部分にだけリンクタグを付ける、と言う方法です。
テーブルタグの枠線幅をゼロに、セルの枠線とセル同士の間隔をゼロに、リンク付きイメージの枠線幅をゼロにすれば、隙間無く画像を並べられます。
画像を複数枚に分割するのも、画像ソフトがあれば可能でしょう。
5番の方の回答を見て、問題があるようなのですが、2番目の回答で解決してしまったので、逆に申し訳ないです。わざわざありがとうございました。
No.3
- 回答日時:
すみません、誤解しておりました。
イメージマップのほうのようですね。
<img src="gazou.jpg" width="432" height="245" usemap="#gazou" border="0">
<MAP NAME="gazou">
<AREA SHAPE="RECT" COORDS="29, 39, 56, 68" HREF="01.html">
<AREA SHAPE="RECT" COORDS="70, 39, 97, 68" HREF="03.html">
<AREA SHAPE="RECT" COORDS="108, 39, 137, 68" HREF="04.html">
<AREA SHAPE="RECT" COORDS="146, 39, 174, 68" HREF="05.html">
<AREA SHAPE="RECT" COORDS="183, 39, 213, 68" HREF="06.html">
<AREA SHAPE="RECT" COORDS="256, 15, 420, 244" HREF="07.html"></MAP>
絵の特定の位置をクリックすると、どこかの部屋へリンクする機能があります。
一般的に、その機能を持ったマップ(地図)をクリッカブルマップと呼んでいるようです。
この機能を使うためには、その絵の中の特定の位置の座標を知る必要があります。
お手持ちの画像ソフトを立ち上げて、ご自分の絵の特定の位置にカーソルを持っていくと、(a,b)という数字が表示されます。
この絵の左上の角を原点(0,0)とした時の、aという数字がX軸の、bという数字がY軸の数字です。
そこを始点として、次に終点にしたい位置にカーソルを持っていきます。すると、右下の位置の座標が(c,d)と表示されたとします。<br>(a,b,c,d)というエリアで囲まれた位置をクリックした時に、例えば01.htmlというファイルにリンクさせたい場合には、次のように書きます.
<AREA shape="rect" coords="a,b,c,d" href="01.html">
なお、rectというのは矩形(四角形)の意味だそうです。
この方法でやってみて下さい。
締め切るのが遅れて、お手間を取らせて申し訳ありません。2番目の方の回答で、問題は解決しました。本当に申し訳ありません。ご丁寧にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- ノートパソコン windows11フォトビューア 4 2023/07/07 18:35
- その他(ブログ) なぜ、ホームページが削除されても、そのホームページ上の画像のリンク先がリンク切れになる場合 5 2023/07/15 10:24
- Excel(エクセル) ある文字を含む際に、値を返す数式についてです 5 2022/08/28 16:58
- 教えて!goo 質問ページがエラーになるサイト 1 2022/05/29 20:12
- Instagram Instagramの投稿を、16:9の画像サイズにして、その画像真ん中の、自分のページを見たときの各 0 2023/08/08 00:17
- Amazon Amazon 1 2023/02/13 16:07
- Excel(エクセル) iphonからone driveに保存してあるExcelを閲覧すると表示の仕方がちがうデータ 2 2022/12/21 13:51
- Excel(エクセル) ある数値に対して、値を返す数式についてです 2 2022/09/13 22:06
- 車検・修理・メンテナンス 自動車ドライブレコーダー 前後 7678 円 在庫限りで安いですが購入しても良いでしょうか GPS 5 2022/07/09 07:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
画像のアドレスについて
-
HTMLファイルの一部の画像だけ...
-
web制作の初心者です。車のHP...
-
画像を二枚ずつ表示して、選ん...
-
javaスクリプトが反映されない
-
タイトルバーに画像を入れるHTM...
-
画像リンクの上に文字リンクを...
-
崩れたレイアウトが更新すると...
-
IEでのalt属性ポップアップ表示...
-
クリッカブルMAP領域が分かる様...
-
任意の画像を左端と右端をぴっ...
-
すいません HTMLです この画像...
-
HTMLでデスクトップの画像がでない
-
右クリック禁止タグについて
-
セル間に見える微妙な境目を消...
-
IMGタグでTIFF画像を表示
-
フォルダ内の画像をウェブでラ...
-
HTMLタグの画像貼り付けのことで
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
IMGタグでTIFF画像を表示
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
クリックしても、リンクに飛ば...
-
予約語の表示について
-
HTMLでデスクトップの画像がでない
-
崩れたレイアウトが更新すると...
-
カーソルを合わせると文字が出...
-
カウンターのHTMLソースを教え...
-
画像クリックでクリップボード...
-
tifファイルが表示されない
-
IFRAME内に収まるように画像を...
おすすめ情報