• 締切済み

ホームページ製作について、オペラ座hpトップのように画像がマウスをある

ホームページ製作について、オペラ座hpトップのように画像がマウスをある位置に移動すると、並んだ画像が右側にスライドし、中央の画像が大きく表示されるようにしたいです。データコードをみるとjavascriptのようですが、 どなたかHTML文書入力について、具体的に教えていただけないでしょうか？ http://www.operadeparis.fr/cns11/live/onp/Saison_2009_2010/index.php?lang=en

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

オペラ座のはフラッシュで作られてるみたいですが、 javascriptのライブラリーにも同様の機能の物はたくさんあります。 「slideshow」とか「carousel」で検索すればよいかと。 参考）人気の．．． http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • パリ　オペラガルニエ　チケット

    パリのオペラガルニエの3月公演FAUSTのチケットをホームページから取ろうとしたのですが、他の公演は予約に進めるのに、FAUSTは予約に進めません。 これはまだ売り出し前ということでしょうか。また、人気の演目ですでに売り切れという事でしょうか。 可能性の範囲でもかまいませんので教えていただけると助かります。 http://www.operadeparis.fr/cns11/live/onp/calendrier/index.php?&lang=en&cal_select_month=20100301000000

  • 散らばった画像が右から左へ動くホームページの作り方

    私はHTMLを少し勉強しまして、Dreamweaverでweb製作をしたことがある程度の初心者です。 JQueryも本を読みながら、何とか少し使いました。 JavaScriptとHTML5は勉強しておりません。 この度小さなお菓子やさんを開くことになり、そのホームページを作るのですが、 トップページを次のようなものにしたいと思っております。 1.大小様々な円形の画像が、水玉模様のように散らばっている。 2.その画像は右から左にゆっくりと、ずっと動いている。左に消えた画像はまた右から出てくる。 3.画像にカーソルを置くと画像の動きが止まり、その画像（お菓子）の 説明が表れる。（表れ方はまだ考えておりません。） お手本になるようなサイトやJQueryプラグインのサンプルが見つからず、 何かヒントやサイトをご存知でしたら教えていただけないでしょうか。 スマートフォンへの対応は後にしまして、まずはPC・タブレット用の ページを作りたいと思っております。 よろしくお願いいたします。

  • IE6、Net7、opera9、Firefox2などでテーブルを画面中央に配置する方法

    こんにちは。 ブラウザー別に、テーブルを画面中央に配置する方法を教えてもらいたいです。以下の方法だと、IE6、opera9では画面中央に配置されましたが、Net7、Firefox2では画面中央に配置されず、右側に表示されてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サイト</title> <style type="text/css"> <!-- table{ margin-left: auto; 　margin-right: auto; } --> Net7、Firefox2でも画面中央に配置できる方法はないでしょうか？何分初心者なので、ソース付きで解説してくれれば有難いです。 それでは、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 「ホームページビルダー」（標準モード）で、テキストの横に画像を入れたい！

    こんにちわ！ ビルダー７（ライト）の標準モードでＨＰをつくりはじめました。 ＨＴＭＬは自分では書き込めない（「簡単編集」しか選択できないからです）ので、 ビルダーの中での編集として質問です。。 長い文章を書いていて、右下にひとつの画像を入れたいんです。 それで、画像を置くと、どうしても画像が一番下（テキストの終わり、画面の 右下）にきてしまうんです。 けど、私はそこではなくて、テキストの中間（テキストが画面中央を分割して 左側だとすると画像は右側、という感じです）に張りたいんです。 画像を固定してテキストだけをスクロールする方法はわかったのですが、 いざ画像を張るとテキストの最後にきてしまって 意味ない。。。（；；）。 どなたか、わかるかた、お願いしますm（＿＿）m

  • CSS: divタグ内のリンク表示について

    こんにちは。現在cssを学習中の者です。 下記の表示トラブルにつまずいており、色々と試していますがまだ解決できておりません。 初歩的なことで申し訳ありませんが、アドバイスを頂けると幸いです。 あるページのトップのdivタグの中に、ENとFRを選択すると別のページに遷移する簡単なメニューを『EN | FR』と表示したいのですが、 下記通りコーディングすると | EN FR のように上下が揃わず表示されてしまいます。 &nbsp|&nbspを削除しhrefタグ２つのみ残すと問題なく表示されます。 CSSのlang下のvertical-alignやwidthを調整し、display: blockとfloat:leftを追加してみましたが、 問題は解決されません。 他に良い方法はありますでしょうか。 説明不足で申し訳ありませんが、アドバイスをお願いいたします。 * HTML <div> <span> <div class="lang"> <a href="/abc.com/en">EN</a>&nbsp|&nbsp <a href="/abc.com/fr">FR</a> </div> Please choose English or French. </span> </div> * CSS .lang { display: block; position:relative; left: -470px; top:-7px; margin-right:24px; width:60px; height:28px; float:left; vertical-align: middle; } .lang a { display: block; height:14px; float:left; color:#ffffff; width:16px; padding:7px; text-align:center; }

    • 締切済み
    • CSS
  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • ホームページ作成中。画像の表示

    初めてホームページを作成している者です。 Webサイトから商用のホームページのテンプレートをダウンロードして、ＨＴＭＬとＣＳＳで作成している途中です。（ＩＥで確認。） 画像をテンプレートのものから自作の画像に切り替えようとしたのですが、表示されません。 画像はテンプレートの画像と同じディレクトリに入っているし、相対パスや拡張子は間違ってはないと思います。 元の画像はＧＩＦの2.54ＫＢで大きさは290×65です。 切り替える画像はＧＩＦの4.67ＫＢで大きさは290×65です。 ＨＴＭＬ文は↓になっています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" /> <title>あなたのサイト名などお書きください</title> </head> <body> ・ ・（省略） ・ <div id="header"><h1><a href="index.html"><img src="images/logo.gif" alt="" /></a></h1></div > ＣＳＳ文で関係ありそうなのは↓です。 ＜冒頭の関係ありそうな部分＞ @charset "Shift_JIS"; body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; } a { color:#98534B; text-decoration:none; } a:hover { text-decoration:underline; } img { border:0; vertical-align:bottom; } ＜この画像の部分＞ div#header h1 { margin:0; padding:10px 0; font-size:2em; color:#333; } div#header h1 a { color:#9B0000; } div#header h1 a:hover { color:#D30000; text-decoration:none; } 何が表示されない原因となっているのでしょうか？

    • ベストアンサー
    • HTML
  • マウスカーソルに合わせて画像が移動するjavascriptで困っていま

    マウスカーソルに合わせて画像が移動するjavascriptで困っています。 マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、 マウスカーソルの動きについていけず、画像がワープ（？）してしまいます。 解決策が分かる方がいらっしゃいましたら、ご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> <SCRIPT> <!-- function move(event){ img.style.left=event.x; img.style.top=event.y; } //--> </SCRIPT> </HEAD> <BODY> <IMG src="hoge.png" name="img" style="position:absolute;" > <div onmousemove="move(event);" style="width:500px; height:500px; background-color:#cccccc;"></div> </BODY> </HTML>

  • javascriptを使わずにｈｔｍｌだけで一定時間経過すると画像が入替わる方法をおしえてください

    javascriptを使わずにｈｔｍｌだけで一定時間経過すると画像が入替わる方法をおしえてください。 ショップサイトの看板を製作中なのですが、javascriptは使用禁止になっています。看板が2秒毎くらいにコロコロ変わるものを作りたいと考えています。 なにぶん素人なもので・・・宜しくお願いしますー。

  • Javascriptの埋め込みファイルをホームページで右側から左側に移動させたい

    　Javascript初心者で右も左も…という感じなのですが、どうしてもホームページの修正をしなくてはならなく なりました。フリーの業者さんが作ったホームページ」なので、何のソフトでホームページを作ったかも不明なのですがソースのヘッダーに「DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"」と書いてあります。 　このホームページの右側に、Javascriptの外部ファイルがAタグのherf属性で埋め込んであります。 これを全部左側に移動したいのです。ホームページビルダーのコピペで、右側にある画像イメージとかは左側に移動出来たのですが、どうしてもスクロールのJavascriptだけ移動出来ません。 http://external-file.com/ja/bagongbayani/practice.html JavaScript 外部ファイル ( js File ) のページをずっと昨日は読んでいたのですが、どうやらJavascriptの外部ファイルが埋め込んであることまでは分かりました。 でも、どうやってこれを移動したらいいのか分かりません。 （１）.jsのファイル自体の座標軸の位置をかえればいい （２）ソース上のJavascriptの位置をかえればいい。 　どちらをやればいいのでしょうか？　見当違いなことを言っていたらすみません。 どうかご教授ください。どうぞよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する