dポイントプレゼントキャンペーン実施中！

画像内リンクについて

解決済

  • 質問者：hoge-chan
  • 質問日時：
  • 回答数：3件

ホームページの操作方法を説明する、
クリッカブルを作成しています。

HTMLにホームページのキャプチャ画像を貼り、
実際のホームページのように、
画像のリンク文字部分をクリックすると、
指定したリンク先に飛ばすといったものを作っているのですが、
画像内の特定の座標をクリックしたとき、
同じ画像内の別の座標に飛ばすということは出来ますでしょうか。

方法はタグでも何でもいいですが、
社内ネットワーク内だけで公開するものなので、
ローカル環境で動くもので、ご提案いただけるものがありましたら
ご教示ください。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

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

ちょっと遊んでみた・・640px×480pzの画像は用意してね。


★HTML4.01strict+CSS2.1(一部CSS3を使用)
★タブは＿に置換してあるので戻す。
★javascriptのスムーススクロール
<!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">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.nav{width:640px;height:510px;background:url(./images/5.jpg) no-repeat 0 30px;position:relative;z-index:100;}
div.nav ol,div.nav ol li{margin:0;padding:0;list-style:none;position:absolute;}
div.nav ol li a{display:block;width:100%;height:100%;overflow:hidden;text-indent:-100em;position:relative;top:-2px;left:-2px;z-index:-100;}
div.nav ol li{width:80px;height:80px;top:20px;left:20px;}
div.nav ol li+li{width:120px;height:120px;top:20px;left:480px;}
div.nav ol li+li+li{width:80px;height:80px;top:380px;left:20px;}
div.nav ol li+li+li+li{width:80px;height:80px;top:380px;left:500px;}
/* 分かりやすいように色 */
div.nav ol,div.nav ol li{border:solid yellow 1px;}
div.nav ol li a:target{border:2px solid red;background-color:rgba(255,255,0,0.2);z-index:100;}
div.nav ol li a:target:after{content:"今は"attr(id);position:absolute;top:10px;left:101em;color:red;z-index:1000;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="nav">
＿＿＿<p><a href="#A1">スタート</a></p>
＿＿＿<ol>
＿＿＿＿<li><a href="#A2" id="A1">A1</a></li>
＿＿＿＿<li><a href="#A3" id="A2">A2</a></li>
＿＿＿＿<li><a href="#A4" id="A3">A3</a></li>
＿＿＿＿<li><a href="#A1" id="A4">A4</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

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

スタイルシート


<style type="text/css">
<!--
div.nav{width:640px;height:480px;background-image:url(./images/5.jpg);position:relative;}
div.nav ol,div.nav ol li{margin:0;padding:0;list-style:none;}
div.nav a{display:block;position:absolute;overflow:hidden;text-indent:-100em;}
div.nav a[href="#A2"]{width:80px;height:80px;top:20px;left:20px;}
div.nav a[href="#A3"]{width:120px;height:120px;top:20px;left:480px;}
div.nav a[href="#A4"]{width:80px;height:80px;top:380px;left:20px;}
div.nav a[href="#A1"]{width:80px;height:80px;top:380px;left:500px;}
/* 分かりやすいように色 */
div.nav a{border:solid yellow 1px;}
div.nav a:target{border-color:red;background-color:rgba(255,255,0,0.2);}
-->
</style>
    • good
    • 0
    • 件
通報する
この回答へのお礼

至急のご対応、ありがとうございます。
丁寧な例までご指導いただき、大変助かります。
上記、早速試してみます！

通報する
お礼日時：2014/07/04 16:31

No.1

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

できますよ。

A要素にはhrefもname,id属性も付けられます。
<div class="nav">
　<ol>
　　<li><a href="#A2" id="A1">A1</a></li>
　　<li><a href="#A3" id="A2">A2</a></li>
　　<li><a href="#A4" id="A3">A3</a></li>
　　<li><a href="#A1" id="A3">A4</a></li>
　</ol>
</div>
とでもして、olの背景に画像を指定し、それぞれのAを任意の位置に配置すればよいです。
四角形でよければimagemap使わなくて良い。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報