よく画像をクリックすると
別のページとかに飛んで行きますよね?

そこで質問なんですが、一つの画像に
複数のリンクを付けることは可能ですか?

例えば・・一つの画像を右上・左上・右下・左下とで
別のページにリンクできるようにする…

こんなことってやろうと思えば出来ることでしょうか??

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

A 回答 (3件)

皆さんの紹介してるサイトで勉強して


フリーのソフトがありますので、使ってみては?

『Client-Side Image Map Maker』
クライアントサイドイメージマップ用のHTMLのタグを作成
http://www.vector.co.jp/soft/win95/net/se104052. …

『Client Side Image Map Editor』
クライアントサイド・イメージマップという機能を簡単にこなせ
http://www.vector.co.jp/soft/win95/net/se062427. …

昨日も同じ様な質問に答えた様な・・・


          X1turboの友達 hiro。
    • good
    • 0

「クリッカブルマップ」の他に、1つの画像をリンク別に小さな四角形に切り分け、その一つ一つにリンク設定を行う方法もあります。

原始的ですが。
通常、クリッカブルマップを使った方が楽でしょう。前者は、大きな1枚の画像の場合に早く表示できるメリットもあり有効です。
どちらにしても、ツールがあると思います。
    • good
    • 0

クリッカブルマップというものを利用すれば可能です。


下記サイトを参照してみてください。

参考URL:http://tohoho.wakusei.ne.jp/wwwimage.htm#CLICKAB …
    • good
    • 0

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

このQ&Aと関連する良く見られている質問

Q画像を左下と右下に固定したいのですが…

HTMLの小技がのっているページ等を見ても自分が調べた限り載っていなかったので質問させていただきます。

背景画像を右下などに固定することはわかったのですがそれでは2つ以上の画像を固定できません…。
自分は右下と左下に固定した画像を表示させたいのですがどうやるかよくわかりません。
どうかご教授よろしくお願い致します。

Aベストアンサー

<html>
<head>
<title>サンプル</title>
<style type="text/css"><!--
#left{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
height:100%;width:100%;
position:absolute;
left:0;top:0;
}
#right{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
height:100%;width:100%;
position:absolute;
right:0;top:0;
}
--></style>
<body>
<div id="left"></div><div id="right"></div>
</body>
</html>

こんな感じでやったら出来ました。

<html>
<head>
<title>サンプル</title>
<style type="text/css"><!--
#left{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
height:100%;width:100%;
position:absolute;
left:0;top:0;
}
#right{
background-image:url("./???.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
height:100%;width:100%;
position:absolute;
right:0;top:0;
}
--...続きを読む

Q背景の画像を左上に一つ固定する方法

いつもお世話になっております。
web初心者です。環境はMac OS 9.2、Dreamweaver 4です。
タイトルの通り、背景の画像を左上に一つ固定する方法をどなたか教えてください。
●左上に背景画像として各ページごと違う画像を入れたい。(大きさは同じ)
●テーブルやセルで画像を入れることはNG(背景画像なので)
●リピートはしたくない。
下の方法をネットで得たのですが、
できればCSSを使わずに作成したいのですが。
また、下の方法であればURLは相対パスでもできるのでしょうか。
<style type="text/css">
<!--
body{
background:url(画像のURLを記入) no-repeat fixed;
}
-->
よろしくお願いします。
</style>

Aベストアンサー

>多分、私がやりたいことをするのにはその方法が有効のようです。一つのCSSで全ページ分設定ができてしまう、という解釈で良いのでしょうか?ページごとに、背景画像を変えたいのです。(サイズは同じですが。)例えばTOP、NEWS、PROFILEにそれぞれimage1、image2、image3を入れたい場合のCSSとそれぞれのページのhtmlはどうなるのでしょうか?教えていただけますか?よろしくお願いします。。。ちなみにページ数は7ページです。

●CSSは、

body {
 background-color: #FFFFFF
 background-repeat:no-repeat;
 background-position: left top;
 background-attachment: fixed;
}

#top-image {
 background-image:url(../image/img001.gif);
}
#news-image {
 background-image:url(../image/img001.gif);
}
#profile-image {
 background-image:url(../image/img001.gif);
}

●HTMLは、それぞれ

<body id="top-image">
<body id="news-image">
<body id="profile-image">

のようになります。

私も以前は、Dreamweaver4を使ってましたが、実際のブラウザ(IE等)と表示が微妙に異なる。HTMLやCSSの記述が自分が思っている通りにならない。テンプレートや、複数の人とネットワークを介してホームページを作成するなどの機能を利用しない。等の要因から、利用しなくなった経緯があります。
今ではフリーのテキスト系のHTMLエディタを使用するようになりました。

HTMLやCSSがある程度理解できれば、他のホームページのソースも参考にできるようになるし、もっと応用を利かせることでCSSの利用価値は上がると思いますので、がんばってホームページを作成してください。(^_^)。

また、分からなければ質問してください。

>多分、私がやりたいことをするのにはその方法が有効のようです。一つのCSSで全ページ分設定ができてしまう、という解釈で良いのでしょうか?ページごとに、背景画像を変えたいのです。(サイズは同じですが。)例えばTOP、NEWS、PROFILEにそれぞれimage1、image2、image3を入れたい場合のCSSとそれぞれのページのhtmlはどうなるのでしょうか?教えていただけますか?よろしくお願いします。。。ちなみにページ数は7ページです。

●CSSは、

body {
 background-color: #FFFFFF
 background-repeat:no...続きを読む

Q別ページのページ内リンクでの不具合(スマホサイト)

現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。

具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現象が起きています。
説明が下手な上に文章だけでは上手く伝わらないかもしれませんが、もしも同じ事態に直面した経験のある方は解決に至った方法や別の処理で同じ動作を実現する方法など、ページ遷移後も通常通りのスクロールを可能にする方法をお教えいただけたら幸いです。

本来であれば、このような事態に陥ることはまずないことかと思いますし、JavaScriptを多数組み込んでいることが原因である可能性が高いですが、JavaScriptのこの処理を行うとそういった現象が起きることがあるといったアドバイスでも構いませんので、ご教授の程、よろしくお願い致します。

現在、スマホサイトを制作しているのですが、iPhoneの実機で確認した際にページ内リンクで不具合が生じており、Androidでは一切同じ現象が起きないことや探してみてもそういった不具合を解決する手段が見当たらず、制作が滞ってしまったため、今回このような質問をさせていただきました。

具体的な不具合の内容としては「sample.html#content」のようなリンクによって、別ページの指定箇所(<div id="content">)へ遷移した場合にその場所からどこへスクロールしても再び同じ指定箇所に引き戻されてしまうような現...続きを読む

Aベストアンサー

とあるWebページにおいて、iPadのsafariで同様の現象を確認したことがあります。

原因としては、下記URLにもある通りJavaScriptによるHTMLの書き換えによるものだと思われます。
挙動としては、ページの内容に変更があった時、再描画する際にURLの情報からアンカーの場所に移動しているのだと思われます。

回避方法としては、JavaScriptによるページの変更をしないことですね。
先に述べたWebページでは、きちんと最後までページを読み込ませてからスクロールすると発生しませんでしたので、ページの描画中に色々と内容を変更していて、変更が完了しないうちにスクロールしたのだと思います。
(あくまで予測ですが。)

もしリアルタイムに情報を更新するような画面であれば、その部分だけインラインフレームにすることで回避できるかもしれません。
(全く実証していないので可能性の提示です。)


http://hamalog.tumblr.com/post/3158769710/ios-safari

Q背景と別の画像を右下に固定して表示するには?

(1)背景を表示して、さらに(2)右下の位置に固定して別の画像を表示することは出来るのでしょうか?

(1)だけなら、BODYタグの中で設定すれば出来ました。
(2)だけなら、某サイトでコピペしたものを使わせてもらい、表示することが出来ました。
しかし、二つを同時にしようとすると、2番目のものしか表示されません。
どうすべきなのか、無理なのか、ご存知の方、教えてください。

ちなみに、(2)のコピペとは以下のものです。スタイルシートというのでしょうか?良くわかりませんが。
<STYLE TYPE="text/css">
<!--
BODY{
background-image:url(gazou.png);
background-attachment :fixed;
background-repeat: no-repeat;
background-position: 100% 100%;
}
-->
</STYLE>

Aベストアンサー

ページ中をテーブルで囲って表示してはいかがでしょうか。

bodyに背景を一つ。
固定する背景は、tableのtdに対して行う。
つまり、
<html>
<head>
<STYLE TYPE="text/css">
<!--
body {
background:url(hoge.gif);
}
.MainTable td{
background-image:url(gazou.png);
background-attachment :fixed;
background-repeat: no-repeat;
background-position: 100% 100%;
}
-->
</STYLE>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="MainTable">
<tr><td>
~~~~
</td></tr>
</table>
</body>
</html>

Q別ページから別ページへタグを貼り付け。

1のページから2のページを開きます。
1のページにはフォームが設置してあって、中身を自由に書けるようになっています。
2にはHTMLなどの使い方が載っています。
この時、2の中に設置してあるボタンなどを押したら、そのタグなどが1のページのフォームの中に入るような仕組みってできるでしょうか?
2のタグがかいてあるのはTEXTAREA内なのでコピペでもできるんですけど、、、簡単にしてくれ、と言われそうで。

何か方法がありましたらよろしくお願いいたします。

Aベストアンサー

遅くなりましたが、ウィンドウ間のデータやりとりサンプルです。

まずは、1のページ(tag1.html)
------------------------------------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript">
<!--
function OpenSub()
{
window.open("tag2.html","","width=200,height=200");
}
// -->
</SCRIPT>
</HEAD>

<BODY>

  <FORM>
    <INPUT type="button" name="btnShowSub"
       value="タグ一覧" onClick="OpenSub()">
  </FORM>
  <FORM name="frmMain">
    <INPUT size="20" type="text" name="txtMsg">
  </FORM>

</BODY>
</HTML>

------------------------------------------------------------

次に、2のページ(tag2.html)
------------------------------------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript">
<!--
function SetTxt()
{
  window.opener.document.frmMain.txtMsg.value=document.frmSub.txtMsg.value;
}
// -->
</SCRIPT>
</HEAD>

<BODY>

  <FORM name="frmSub">
    <INPUT size="20" type="text" name="txtMsg" value="何かいれてね">
    <INPUT type="button" name="btnClose" value="タグ入力" onClick="SetTxt()">
  </FORM>

</CENTER>
</BODY>
</HTML>

------------------------------------------------------------
これで、ウィンドウ間のデータやりとりはできます。

このソースを改変してみてください。
たとえば、2のタグ一覧をテーブル表示にして、一番左のセルにラジオボタンを設置して、
「タグ入力」ボタンを押されたときに、選択されているラジオボタンによって、ケース文で分岐させるとか・・・。
全てJavaScriptとHTMLで書くと、膨大なソースになりそうですが・・・。
また、何かあったら聞いてください。

遅くなりましたが、ウィンドウ間のデータやりとりサンプルです。

まずは、1のページ(tag1.html)
------------------------------------------------------------
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript">
<!--
function OpenSub()
{
window.open("tag2.html","","width=200,height=200");
}
// -->
</SCRIPT>
</HEAD>

<BODY>

  <FORM>
    <INPUT type="button" name="btnShowSub"
       value="タグ一覧" onClick="OpenSub()">
 ...続きを読む


人気Q&Aランキング

おすすめ情報