- 締切済み
画像内リンクについて
ホームページの操作方法を説明する、 クリッカブルを作成しています。 HTMLにホームページのキャプチャ画像を貼り、 実際のホームページのように、 画像のリンク文字部分をクリックすると、 指定したリンク先に飛ばすといったものを作っているのですが、 画像内の特定の座標をクリックしたとき、 同じ画像内の別の座標に飛ばすということは出来ますでしょうか。 方法はタグでも何でもいいですが、 社内ネットワーク内だけで公開するものなので、 ローカル環境で動くもので、ご提案いただけるものがありましたら ご教示ください。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっと遊んでみた・・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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシート <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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
できますよ。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使わなくて良い。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
至急のご対応、ありがとうございます。 丁寧な例までご指導いただき、大変助かります。 上記、早速試してみます！