ホームページ作りに初挑戦しています。

産経新聞のHP(http://www.sankei.co.jp/)の画面左上に、「紙面から>>」という所があり、そこにマウス(ポインター)を乗っけると、クリックしないでも「東京朝刊」とか「大阪夕刊」とかがリストみたいな形で表示されます。 すごくスマートなのでこれを作りたいのですが、(1)この表示形式は何と呼ぶのでしょうか? (2)この表示形式を実現する方法を説明しているページが有りましたら教えて下さい。よろしくお願いします。Dan

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/06/03 08:04:24
  • 終了:--

回答(10件)

id:kazooo3 No.1

kazooo3回答回数1274ベストアンサー獲得回数32004/06/03 08:19:56

ポイント20pt

http://www.wakusei.ne.jp/twn/lng/b200006/00060054.htm

そのファイルは現在ありません

マウスオーバーといいます。JAVAスクリプトです。初心者にはかなり難易度が高いものです。ちょっと初挑戦では難しいかと思われますが参考URLを貼って置きますね。

id:Dan

ありがとうございました。難しそうですね。でも理解するよう努めます。

2004/06/03 08:53:02
id:lowcarbo No.2

lowcarbo回答回数25ベストアンサー獲得回数02004/06/03 08:26:37

ポイント20pt

通常、Dynamic HTML で実現します。

The Dynamic Duo(下記)の「MenuBar」などがイメージに近いのでは?

id:Dan

ありがとうございました。英語に理解が十分ではないのですが、Menu Barみたいですね。

もう少し読んでみます。

2004/06/03 08:59:04
id:hejihogu No.3

hejihogu回答回数1ベストアンサー獲得回数02004/06/03 08:47:17

(1)クリッカブル・マップと呼ばれています。

(2)下記のサイトに分かりやすい説明がありました。

id:Dan

ありがとうございました。

でもクリッカブル・マップではないと思うのですが・・・

2004/06/03 09:11:58
id:nyankochan No.4

nyankochan回答回数323ベストアンサー獲得回数92004/06/03 09:19:13

ポイント20pt

http://www.navida.ne.jp/sangyo/index.html

神奈川県の商品・製品・技術・サービスの検索情報サイト【産業Navi】

産経新聞とほぼ同じ仕掛けをしているページの作成などをしています。

URLのペ−ジの左側の矢印マ−クのついた部分です。

これは、レイヤー機能とjavascriptの組み合わせによるものです。

レイヤーをスタイルシートで隠しておいて、経営や取引の部分の

画像にマウスが重なると表示されるというものです。

ちょっと複雑なソースになってしまいますが、

スタイルシートにて”hidden”属性で隠し

javascriptの”MM_showHideLayers””MM_swapImage””MM_swapImgRestore”

でマウスの位置判定においての表示、再隠しを制御します。

このページをHP作成ソフトで開くとわかると思いますが

レイヤー等、隠し属性になっていても表示されるので

仕組みが理解できるかもしれません。

また、レイヤーですの表示される位置も個々にスタイルシート等で

指定してあげなければいけません。

なにか気に入ったデザインや仕組みがあったら、そのページをそのままそっくりダウンロードしてきて

ソースを見て、ここが怪しいとか思うところを

真似てみるとよいかもしれません。

ダウンロード方法は、ブラウザのメニューのところにある

”名前をつけて保存”等でできます。

id:Dan

ありがとうございました。

確かに産経新聞のと同じですね。

ただ、今まで回答していただいた方の情報を元に調べていると、「プルダウンメニューのマウスオーバータイプ」というのが一番近い気もします。教えていただいたURLでもプルダウンになってますよね。そういう理解で良いのでしょうか?

2004/06/03 10:38:45
id:hiikun No.5

hiikun回答回数92ベストアンサー獲得回数32004/06/03 09:28:57

ポイント40pt

1番目〜3番目は、DHTMLですね。

2番目・3番目は英語ですが設置はそんなに難しくないですよ。

4番目・5番目は、shockwaveを使用したやり方です。

ページのTOPに貼るタイプですね。

http://dynamicdrive.com/dynamicindex1/hvmenu/index.htm

Dynamic Drive DHTML Scripts- HV Menu 5.5

http://dynamicdrive.com/dynamicindex1/jsdomenu/index.htm

Dynamic Drive DHTML Scripts- JsDOMenu 1.3

id:Dan

ありがとうございました。色々な方法があるのですね。大変助かりました。

2004/06/03 10:52:30
id:blueleaf No.6

blueleaf回答回数67ベストアンサー獲得回数02004/06/03 09:47:17

ポイント30pt

http://tohoho.wakusei.ne.jp/www.htm

惑星・専用サーバーサービス/ホスティング

皆さんの仰るとおり、オンマウス(オンマウスオーバー)でポップアップメニューを表示していますね。

JavaScriptで表現できます。

初心者さんということなので、まずは簡単なJavaScriptの勉強から始めてはいかだでしょうか。

参考となるURLをあげておきます。

なお、一番最後のURLは、そのものずばりオンマウスでメニューが表示されるスクリプトが作れるサイトです。(ユーザー登録がいりますが、無料です)

ですが、英語なのと、JavaScriptやCSSなどの基本的知識が無いと初心者さんにはまだ敷居が高いと思われますので、参考程度に。

http://www.red.oit-net.jp/tatsuya/java/index.htm

イヌでもわかるJavaScript講座

http://www.sky.sannet.ne.jp/masapine/java_top.html

JavaScriptでホームページ作成 - 5・6年生にもわかるやさしいJavaScript

id:Dan

ありがとうございました。そうですね、まず勉強ですね。「5・6年生にもわかる・・・」がとっつきやすそうなので、これで勉強します。大変ありがとうございました。

2004/06/03 11:05:16
id:popopo_2004 No.7

popopo_2004回答回数137ベストアンサー獲得回数192004/06/03 09:52:54

ポイント20pt

http://www-6.ibm.com/jp/software/internet/hpb/

IBM ホームページ・ビルダー - Japan

ソースを少し見ただけですがJavaScriptを利用しているものと思います。IBMホームページビルダーが、JavaScriptで、ポインタを置いた時にどうするか、とか、ポインタが離れた時にどうするか、とか、イベントによる設定がGUI殻で来た覚えがあります。今、確かめられないのでうる覚えなのですが・・・。

もし、見当違いなコメントでしたら、ポイントは要りません。

http://www-6.ibm.com/jp/software/internet/hpb/products/3c.html

IBM ホームページ・ビルダー | 製品紹介 - Japan

id:Dan

ありがとうございました。IBMのホームページビルダーでは「ロールオーバー」機能がありますが、それは画像を対象にしたもののようです。(私の理解が足りないのかも知れませんが・・・)

2004/06/03 11:10:20
id:popai_00 No.8

popai_00回答回数36ベストアンサー獲得回数02004/06/03 10:03:47

ポイント20pt

http://www001.upp.so-net.ne.jp/oka/mouse_over7.htm

サンプルページ   マウスオーバー 7

こんなところに自分でもできそうなのがありました。

id:Dan

そうですね。ありがとうございました。

2004/06/03 11:14:20
id:nyankochan No.9

nyankochan回答回数323ベストアンサー獲得回数92004/06/03 10:38:07

ポイント60pt

先ほど、レイヤー機能とjavascriptを使用すると回答したnyankochanです。

ソースをそのままコピーすれば使えるものと、その説明ページを作りましたので

参照してください。

id:Dan

nyankochanさん

 本当に本当にありがとうございました。

 これから勉強して、作っていただいたページを参考にさせていただきます。感謝しています。

2004/06/03 11:17:59
id:bee2310 No.10

bee2310回答回数90ベストアンサー獲得回数02004/06/03 11:21:50

ポイント20pt

ハイパーリンクに関するものをクリックして

11.画像のリンク部分にメニューが出ます。の

プレビューを見て下さい。これをいじることで

同じような事が出来ると思いますよ。

id:Dan

ありがとうございました。とても参考になりました。

2004/06/03 15:17:15
  • id:nyankochan
    設置期間

    6月中はずっとおいてあると思います。
    7月くらいに一度、サーバーの方の再構築をするつもりなので
    その時に消えてしまいます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません