http://www.microsoft.com/japan/ms.htm

上記のマイクロソフトのHPで、右上のメニューの所にカーソルをのせると、メニューがピラピランと言う感じで出てきて、そのメニューをクリックするとリンクへ飛びますが、この様なものを作るにはどうすれば良いでしょうか。フラッシュ(?)とか何か独自のソフトが無いと駄目でしょうか?ジャバ・スクリプト関連の本を読んでみたんですが、どうもジャバ・スクリプトでは出来ないような・・・
ご存じの方いらっしゃれば、教えていただけないでしょうか。

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

A 回答 (1件)

結論から言いますと、JAVAスクリプトで可能な方法ですし、マイクロソフト社もJAVAスクリプトで行っているようです。



まず、気になったらソースを表示させて見てみると、構成がわかったりします。
ただ、このページの場合、htmlファイルとは別にスクリプトだけのファイルを作り、リンクするという方法をとっているようです。
(名前から判断するとtoolber.jsでしょう。おそらく。)
ので、上記のファイルをダウンロードすれば中身を見ることが出来ます。
ただし、これをそのまま使うとなれば著作権違反になります。

と言う訳で、ソースの公開をしているサイトからいただくのが手っ取り早いですね。
参考URLのページの「159.ポップアップメニュー」がお望みのものだと思いますので、いただいてみてはいかがでしょうか?

なんだか、まとまりのない文章ですみません。

参考URL:http://www06.u-page.so-net.ne.jp/wa2/mugi/js/
    • good
    • 0
この回答へのお礼

なるほど!大変参考になりました。
ジャバスクリプトで出来るんですね!
まだ分からないことが多いのですがソースを研究してみます。ありがとうございました!

お礼日時:2001/11/18 17:52

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

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

Q画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTM

画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか?

下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-align:left;
}

<!--html-->
<div style="position:relative;">
<a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a>
<div style="position:absolute; left: 24px; top: 13px; width: 217px;">
<p class="text">画像上の文字</p>
</div></div>

検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか?うまくいきませんでした。

お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。
表現の仕方や言葉の使い方を間違っていたらすみません…。

画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML
お世話になっております。
ある画像の上にposition:rerative;を使って文字をのせています。
この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか?

下記ソースです。
/*css*/
img.button{/*画像*/
margin:0px 0px 8px;
padding:2px;
border:#999999 1px solid;
}
.text{/*画像上の文字*/
margin:0px;
padding:0px;
font-size:14px;
text-ali...続きを読む

Aベストアンサー

だって、「画像上の文字」と書いてある段落はリンクに含まれてま
せんからね。場所を重ねただけじゃダメですよ。</a>の位置をもっ
と後ろ、最後の</div>の直前に移動しましょう。

<p class="text">画像上の文字</p>
</div></a></div>

それだけです。

Q左メニュー部分をひとつのhtmファイルだけで済ませられないか?

ショッピングサイトを制作しています。使用ソフトはDreamweaver 4です。
左にメニューの画像があり、その他「特集」などのテキストが記載している場合、ページが多くなると左の共通部分は、変更のたびにすべてのページを変更しないといけなくなるため、ひとつのファイルだけ変更すればすべてのページで、左の部分が変更するようにしたいと思っています。で、フレームセットを使用してみました。フレームの境界線は動かさないようにはできたのですが、スクロールバーがでてきたり、画像がうごいたり、画像の長さだけフレームの長さを調節しても実際はもっと長くなったりと、うまくいきません。それとも、cssファイルなど使えばできるのでしょうか??あるいは何も使わないのが常識なのでしょうか?プロの方はどうしてるのでしょうか?

Aベストアンサー

Dreamweaverには確かテンプレート機能があったと思うのですが
そちらを使ってみてはどうでしょうか??
http://www.web-seed.com/web/advice/

ただテキストエディタ等で編集すると、
この機能は崩れてしまうらしいです;

フレームを使用する場合、スクロールバーを消したり、
サイズを固定することは、cssでできるかと思います。

ただフレームはSEO的に良くありません。
特にこだわらないのなら、フレームが一番簡単な方法かもしれませんが
ショッピングサイトであれば、検索エンジン等の事も考え、
フレーム無しで制作することが好ましいのではないかと思います。

Qindex.htmlとindex.htmを置いてますが、index.htm に集めたい!

変な質問になってすみません!!

現在ホームページ上に、index.htmlとindex.htmというファイルを置いています。現在、使っているページはindex.htmをメイン(トップページ)としています。

しかしながら、index.htmlに来る人もいます。このページは現在使っていないのですが、訳あって削除することが出来ません。

そこで、metaタグ?か.htaccess?などを使ってindex.htmlに訪れた場合、index.htm に行かせる事は出来ますでしょうか?

方法をご存知の方がおられましたらアドバイス宜しくお願いいたします。

Aベストアンサー

HTML(index.html) の場合
<meta http-equiv="refresh" content="./index.htm">

.htaccess の場合
Redirect /sample/index.html http://www.goo.ne.jp/sample/index.htm

上記の様に対処できます。
.htaccess の例示は、ドメイン,ディレクトリ共に架空の物です。
ただし同等の形式での動作実績はあります。
(ファイル名変更時の移行用として当方使用。
以前は JavaScript外部ファイルの管理で使用。
JavaScript外部ファイルでは HTML の METAタグの様にリダイレクトさせる物が無いので・・・。)
また、ファイル名を省略すると、ディレクトリ自体が対象となります。


で、改めて裏付けとなりそうな参考説明ページを探したのですが・・・。無いですねぇ~。どれもディレクトリまで・・・。
まぁ資料はないが(個人的)実績だけはあると・・・。

何か寂しい情報ですが、使えたら参考にして下さい。
自分も試行錯誤で試して動いたから使ったという様な気が・・・。

HTML(index.html) の場合
<meta http-equiv="refresh" content="./index.htm">

.htaccess の場合
Redirect /sample/index.html http://www.goo.ne.jp/sample/index.htm

上記の様に対処できます。
.htaccess の例示は、ドメイン,ディレクトリ共に架空の物です。
ただし同等の形式での動作実績はあります。
(ファイル名変更時の移行用として当方使用。
以前は JavaScript外部ファイルの管理で使用。
JavaScript外部ファイルでは HTML の METAタグの様にリダイレクトさせる物が無いので・・・...続きを読む

Qメニューに画像をのせる方法

メニューに画像をのせる方法がわかりません。
通常時画像と選択時画像に画像のURLを書いてものりません。
誰か教えてください!

Aベストアンサー

文字だったところを画像にしたい……?
それはなにか誤解がありませんか?(違ってたらごめんなさい)

通常時画像と選択時画像というのは、文字の前に表示されるアイコンです。
メニューのフレームに、「メイン」、「プロフィール」等各ページへのリンクが並んでいますね。その頭の部分に画像があります(デフォルトではオレンジ色の三角だったと思いますが)。
その画像であれば、前回の回答に書いたことをチェックしてもらえれば普通なら希望のものが表示されるはずです(現状がどうなっているのか補足してもらえなければそれ以上のことは想像がつかないのですが……)。

もし、「文字の表示はいらない、たとえばアイコンにBBS等の文字を入れて、それだけを表示したいんだ」というのであれば、出来なくはありませんが多少難しくなります。
まず、最低限のHTMLの知識を勉強して下さい。
それから、プログラムを組めとまでは言いませんが、ナニが書いてあるか見当がつく程度のJavaScriptの知識も必要です。
一応、方法を書いておきますが、それらを把握していないとこの作業は難しいと思います(というより、ナニが書いてあるかわからないものをいじるのは不安ですよね)。

まずメニュー部分のソースをブラウザで表示し、一番下、各ページへのリンクがはってある部分をどこか他のエディタ等(windowsであればメモ帳で構いません)に移します。
文字の部分、各行の後ろのほう>と<に囲まれている部分を消します。
自分のページでログインし、メニューを開きます。
修正したソースをすべてコピーし、「お知らせ(カウンター等のタグを書き込める部分)」の部分にペーストします。
メニューの表示をすべて非表示にします。

もし、難しい、わからない……というのであれば、実際に見本にしたいサイトを簡単ホームページのなかで探して、そのユーザーさんに教えてもらうほうが良いですね。
いろいろ書きましたが、もしかしたらmachi-appleサマの御希望とは違っているかもしれませんし。

「どこをどのようにしたくて」、「なにがどうなっているのか」、言葉で説明するのは難しいですが、それがないと他のかたも回答しにくいと思います。
machi-appleサマは「教えてgoo」から見てらっしゃるでしょうが、ここは「goo」のユーザーだけが見るとは限りません(「OK Web」というサイトのシステムが「goo」に提供されたものが「教えてgoo」で、「OK Web」や、同じようにシステムを提供された別のサイトからの閲覧者もいるからです)。
私は簡単ホームページにシステムを提供している「GaiaX」系の別のコミュニティのユーザーでしたから御質問がなんとなくわかりましたが、大多数の閲覧者のかたは「goo」のまして「簡単ホームページ」の詳しいシステムは御存じないと思います。
gooにはたぶん掲示板等もあるのでしょうから、そちらで聞かれたほうが詳しくわかるかもしれませんね。

文字だったところを画像にしたい……?
それはなにか誤解がありませんか?(違ってたらごめんなさい)

通常時画像と選択時画像というのは、文字の前に表示されるアイコンです。
メニューのフレームに、「メイン」、「プロフィール」等各ページへのリンクが並んでいますね。その頭の部分に画像があります(デフォルトではオレンジ色の三角だったと思いますが)。
その画像であれば、前回の回答に書いたことをチェックしてもらえれば普通なら希望のものが表示されるはずです(現状がどうなっているのか補足して...続きを読む

Qマウスののせたらメニューがあらわれる仕掛けを作りたいのですが・・

DreamweaverでHPを作成しています。
その中で、マウスをのせたらメニューがあらわれて、そのメニューから別ページへ飛べる仕掛けを作りたいのです。
 文章では分かりづらいので(^-^;例をあげてみると、このサイトのようなかんじです(左横のものです)↓
http://www.okayama-ichibangai.co.jp/

 ビヘイビアにあるレイヤーの表示/非表示を使用して、作ってみました。
 IEでは問題ないのですが、ネットスケープでみると、マウスをのせてもメニューがでてこないのです。
  IEでもネットスケープでも見られる作り方を教えてください。お願いします。

Aベストアンサー

Dreamweaver(MX)のビヘイビアだと、「ポップアップメニューを表示」でできるようです。
設定画面で入力文やセル、テキストなどの色を指定するだけなので、感覚的に作れました。
表示するイベントでNetscape4あたりにしておけば、ネスケでも表示されました。


人気Q&Aランキング

おすすめ情報