ちょっと変わったマニアな作品が集結

htmlで画像上にボタンを配置する方法を教えてください。

具体的には、フローチャートの画像の各ステップをボタンで表記し、ボタンをクリックすることで別ページに飛ぶというサイトを考えています。

現在、map要素をつかって画像の各ステップに直接リンクを設定していますが、各ステップをボタンで表記したいです。

ご存知の方がいっらっしゃいましたら、よろしくお願いします。

補足:htmlでフローチャートをつくるのは、難しいので、画像を張り付けて対応しようと思いました。

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

A 回答 (2件)

質問内容を愚直に実現しました。



<script>addEventListener('load',function(e){
var go = function(e) { window.location = e.target.href };
var stepLinks = [
/**/ [ 130, 110, 'stepInit.html' ], // ボタンの X座標, Y座標, リンク先
/**/ [ 130, 250, 'stepAdd.html' ], // 座標は画像左上からのピクセル単位指定
/**/ [ 130, 310, 'stepInc.html' ],
];
stepLinks.forEach(function(step){
/**/ var b = document.createElement('button');
/**/ b.href = step[2]; // 少々汚い手口
/**/ b.addEventListener('click', go, false);
/**/ b.style.position = 'absolute'; // 親要素(=画像)からの相対指定
/**/ b.style.left = step[0] + 'px';
/**/ b.style.top = step[1] + 'px';
/**/ b.style.zIndex = +1; // 画像の上に表示する
/**/ b.appendChild(document.createTextNode('詳細'));
/**/ document.getElementById('chart').appendChild(b);
});
}, false);</script>

<div id=chart style="position:relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/th … width=220 height=440>
</div>
    • good
    • 0

 普通にリストでリンクを作成し、スタイルシートで任意の場所に配置すればよいだけですが・・


 先日回答した
 ⇒イメージマップのhoverについて - HTML - 教えて!goo( http://oshiete.goo.ne.jp/qa/8037489.html )
 とか・・
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

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

Qイメージマップのhoverについて

イメージマップのhoverで困っています。

以下のようなJavaとHTMLで実装しているのですが、メニューhoge2 は問題なくhoverできるのですが、
イメージマップを使ったメニューhoge1がうまくいきません。

IEだとhoverするのですが、chromeではhoverしません。


【Javaスクリプト】
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


【HTML】
<ul>
<!-- メニュー hoge1 -->
<li><img src="hoge.jpg" border="0" alt="hoge1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu1','','hoge_hover.jpg',1)" name="menu1" usemap="#prdlink" />
<map name="prdlink">
<area shape="rect" coords="20,40,75,80" href="./product/hoge1.html" alt="hoge1" />
<area shape="rect" coords="80,40,134,80" href="./product/hoge2.html" alt="hoge2" />
</map>
</li>

<!-- メニュー hoge2 -->
<li><a href="top.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu2','','top_hover.jpg',1)">
<img src="top_off.jpg" alt="top" name="menu2" /></a> </li>

</ul>


なにぶん、前任者のソースを見よう見まねで修正しており、知識もないためご教示いただければと思っております。

イメージマップのhoverで困っています。

以下のようなJavaとHTMLで実装しているのですが、メニューhoge2 は問題なくhoverできるのですが、
イメージマップを使ったメニューhoge1がうまくいきません。

IEだとhoverするのですが、chromeではhoverしません。


【Javaスクリプト】
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_...続きを読む

Aベストアンサー

No.3で示した方法は
スプライトといわれる手法です。
 ○ 使用する画像を最初にすべて読み込んでしまうため、アクションのたびに画像を取得する必要がないため、動作が速い
 × 画像の座標をいちいち指定しなければならないので作業が煩雑
という特徴があります。

アクションのたびに背景画像を変える方法は
 ○ アクションの都度画像を読み込むためタイムラグがあります。
 × スタイルシートがとても簡単になります。

 そのため、その中間的手法として、リンク画像のみスプライトにして背景と切り離す手法を使うほうが現実的でしょう。スプライトの一種です。リンクの位置を位置を自在に設定できます。

<!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" media="screen">
<!--
/* 基本 */
html,body{margin:0;padding:0;background-color:silver;}
h1,h2,h3,p{margin:0 15px;line-height:1.8em;}
div.header,div.section,div.footer{
_width:80%;min-width:640px;max-width:800px;
_margin:0 auto;
_background-color:white;
}
div.section{position:relative;min-height:400px;}
div.section div.aside{position:absolute;top:0;right:0;width:200px;height:100%;background-color:aqua;}
div.section h2,div.section p{margin-right:210px;}
div.section div.aside p{margin:0 1em;}
/* ここから:hover,activeの指定 */
ul#navi,ul#navi2{
_background-image:url(./images/hogehoge2.jpg);
_width:270px;height:160px;/* サイズの指定 */
_margin:5px auto;/* センター配置 */
_padding:0;
_display:block;list-style:none;/* ブロックに変更 */
_position:relative;/* 以下の位置基準とするため */
}
ul#navi li a,ul#navi2 li a{
_display:block;/* ブロックに変更 */
_width:70px;height:30px;/* 幅と高さの初期設定 */
_overflow:hidden;text-indent:-10em; /* 字を消す */
_position:absolute; /* 絶対配置 */
_top:20px;/* 上からの初期位置 */
}
ul#navi li a[href="./top.html"]{background-image:url(./images/goTop.gif);}
ul#navi li a[href="./product/hoge1.html"]{background-image:url(./images/goProduct1.gif);}
ul#navi li a[href="./product/hoge2.html"]{background-image:url(./images/goProduct2.gif);}
ul#navi li a[href="./product/hoge3.html"]{background-image:url(./images/goProduct3.gif);}
ul#navi li a[href="./product/hoge4.html"]{background-image:url(./images/goProduct4.gif);}

ul#navi li a[href="./top.html"]{top:110px;left:110px;width:57px;}
ul#navi li a[href="./product/hoge1.html"]{left:10px;}
ul#navi li a[href="./product/hoge2.html"]{left:70px;top:60px}
ul#navi li a[href="./product/hoge3.html"]{left:130px;}
ul#navi li a[href="./product/hoge4.html"]{left:190px;top:60px}

ul#navi li a:hover{background-position:0px -40px;}
ul#navi li a:active{background-position:0px -80px;}
/* 後方互換 */
ul#navi2 li.goTop a{background-image:url(./images/goTop.gif);}
ul#navi2 li.goProduct1 a{background-image:url(./images/goProduct1.gif);}
ul#navi2 li.goProduct2 a{background-image:url(./images/goProduct2.gif);}
ul#navi2 li.goProduct3 a{background-image:url(./images/goProduct3.gif);}
ul#navi2 li.goProduct4 a{background-image:url(./images/goProduct4.gif);}

ul#navi2 li.goTop a{top:110px;left:110px;width:57px;}
ul#navi2 li.goProduct1 a{left:10px;}
ul#navi2 li.goProduct2 a{left:70px;top:60px}
ul#navi2 li.goProduct3 a{left:130px;}
ul#navi2 li.goProduct4 a{left:190px;top:60px}

ul#navi2 li a:hover{background-position:0px -40px;}
ul#navi2 li a:active{background-position:0px -80px;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<ul id="navi">
___<li><a href="./top.html">トップ</a></li>
___<li><a href="./product/hoge1.html">製品1</a></li>
___<li><a href="./product/hoge2.html">製品2</a></li>
___<li><a href="./product/hoge3.html">製品3</a></li>
___<li><a href="./product/hoge4.html">製品4</a></li>
__</ul>
__<ul id="navi2">
___<li class="goTop"><a href="./top.html">トップ</a></li>
___<li class="goProduct1"><a href="./product/hoge1.html">製品1</a></li>
___<li class="goProduct2"><a href="./product/hoge2.html">製品2</a></li>
___<li class="goProduct3"><a href="./product/hoge3.html">製品3</a></li>
___<li class="goProduct4"><a href="./product/hoge4.html">製品4</a></li>
__</ul>

_</div>
_<div class="section">
__以下同文
_</div>
</body>
</html>

No.3で示した方法は
スプライトといわれる手法です。
 ○ 使用する画像を最初にすべて読み込んでしまうため、アクションのたびに画像を取得する必要がないため、動作が速い
 × 画像の座標をいちいち指定しなければならないので作業が煩雑
という特徴があります。

アクションのたびに背景画像を変える方法は
 ○ アクションの都度画像を読み込むためタイムラグがあります。
 × スタイルシートがとても簡単になります。

 そのため、その中間的手法として、リンク画像のみスプライトにして背景と切り離す手...続きを読む

Q画像をリンクボタンにして文字を重ねる方法

こんばんは。
画像をリンクボタンにして文字を重ねる方法を教えていただきたいのですが。
どういえば良いのかわからなかったので、こういう題名になりましたが、ちがうかもしれないので、まねしたいページのアドレスを置いときます。
http://open2.sesames.jp/bananag/html/_TOP/
このページの「サービス一覧」のランにある「JIFT」ですが、
画像の上に文字がかかってます。それでもって画像,文字をクリックするとURLへジャンプするみたいなのです。
これをまねしたいです。
やり方を教えてください。

Aベストアンサー

ボタン画像を用意して背景にします。その中(上)にリンクテキストを書くだけ。
ここの質問サイト画像を参考に初心者用に簡単にサンプル化してみましたので
意味がわかれば応用です。後は自分なりに綺麗に装飾して下さい。
以下をHTMLに貼り付け表示してみる。

<a href="[URL]" style="display:block; text-align:center; width:200px; height:30px;
background: url(http://oshiete1.goo.ne.jp/images/button_question.gif) no-repeat;">リンク先へ</a>

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

Qチェックボックスの箱のサイズとフォントサイズは変更できるの?

こんにちわ。

エクセル2000でチェックボックスを作成したのですが、
やや、小さいのでサイズを大きくしたいのです。
ボックスサイズ、ボックスの横に入れる文字の
フォントサイズは大きくできるのでしょうか?
もし、できるのなら方法を教えてください。

よろしくおねがいします。

Aベストアンサー

コントロールツールボックスのチェックボックスならプロパティにFontがあるので変更できます。

フォームのチェックボックスやオプションボタンのフォントサイズは変更できなかったと思いますが、変更したように見せかけはできます。使用上、特に問題はないと思います。(だからダイアログにフォントがない?)

チェックボックスの位置によって、
(1)チェックボックス(四角)がセルの中央にある場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 チェックボックス(四角)の右横のセルにチェックボックスの説明のテキストを入れます。
 セルの書式設定でフォントが変更できます。
(2)チェックボックス(四角)をセルの境目などにセットする場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 図形描写からテキストボックスを選択し、チェックボックスの説明のテキストを入れます。
 テキストボックスは『線なし』にしておきます。2行で表示したりもできます。
 チェックボックスとテキストボックスを重ねて、見た目を調節します。
 テキストボックスを選択し、右クリック→順序→最背面へ移動 とします。

ご参考に。

コントロールツールボックスのチェックボックスならプロパティにFontがあるので変更できます。

フォームのチェックボックスやオプションボタンのフォントサイズは変更できなかったと思いますが、変更したように見せかけはできます。使用上、特に問題はないと思います。(だからダイアログにフォントがない?)

チェックボックスの位置によって、
(1)チェックボックス(四角)がセルの中央にある場合
 チェックボックスのテキストを必要な長さの空白にしてしまいます。
 チェックボックス(四角)の右横のセ...続きを読む

Q画像を重ねて表示したい

画像を表示するタグで<img src="a.gif"><img src="b.gif">と書くと、横に並んで表示されます。ごく当たり前か。。
んで、このa.gifとb.gifを重ねて表示したいです。a.gifを手前、b.gifを奥というかんじです。
2つの画像は同じ大きさです。
何かいい方法ありませんか?アドバイスお願いします。
連続の質問で申し訳ありません。

Aベストアンサー

簡単な方法としては、下に設置する画像をテーブルの背景として使用します。
そのセルに上にくる画像を普通に配置すれば、一応は重ねた状態になります。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


人気Q&Aランキング