• ベストアンサー

半透明の小窓

http://www.taiyo-yakuhin.com/factory/plant.html のサイトの「工場設備」の箇所をクリックすると、小窓が出て、背景が少し透明になっています。 逆に http://www.taiyo-yakuhin.com/factory/technology_syringe.html はページが半透明になります。 これはどのようにするのでしょうか。 CSSとJavascriptを組み合わせるのでしょうか。 Javascriptは例文をペーストするくらいしか出来ませんが、もしわかりやすいサイト等があったら教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
noname#49664
noname#49664
回答No.1

http://www.taiyo-yakuhin.com/factory/plant.html これは、それぞれの項目だけが表示され、それ以外のところが半透明になっているイメージを用意しておき、マウスのイベントで表示を入れ替えているだけです。例えば以下のようなイメージが多数用意されているわけです。 http://www.taiyo-yakuhin.com/img/img_plant_cg01.jpg こちらのほうは、以下のようにしてスタイルのfilterとopacityを使って<body>の半透明間を出しているようですね。 BODY.style.filter='alpha(opacity='+CLARITY+')'; BODY.style.opacity=CLARITY/100; これは、ページから読み込まれているJavaScriptファイルを見ればわかるでしょう。 http://www.taiyo-yakuhin.com/js/viewopen.js このスタイルシート属性を使った方法については、こんなページが見つかりました。けっこうわかりやすいですよ。 http://youmos.com/reference/opacity_javascript.html

shizuku
質問者

お礼

こちらのサイトのjsファイルを使うことはできないので、参考ページはとてもわかりやすく、なんとかできそうです。 サイトもどのように動いているのかがわかって助かりました 分かり易いご説明をありがとうございました！

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

関連するQ&A

  • 小窓を開くにはどうしたらいいのでしょうか？

    Dreamweaverでサイトを作成中なのですが、 親サイトでこのように <form　name="form1"method="post"action="http://www.xxx.com/cgi-bin/○○○.cgi"> <input type="submit" name="submit" value="▲▲▲"onClick="MM_openBrWindow('http://http://www.xxx.com/cgi-bin/○○○.cgi,'','scrollbars=no,resizable=yes,width=500,height=600')"> </form> 設定し、小窓でcgiの結果を出したいのですが、 小窓が開かず、そのまま画面が変わってしまいます。 ちなみにheadにも <script language="JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script>としています。 今日午前からずっと色々試行錯誤しながら、 チャレンジしてみましたが、どうしても 原因が分かりません。 どなたか教えて下さい。

  • 背景はそのままで内容部分だけが上下する方法

    お邪魔致します。質問させて下さい。 以下の、氷室京介さんのサイト、Himuro.comを例に挙げましたが、 http://www.himuro.com/ グレイ色の背景は、上下スクロールしてもそのままで動きませんが、添付した画像の様に、赤枠で囲ったところは上下スクロールすれば、上下方向に動きます。 こういう、 【Q：背景は動かずに、内容コンテンツだけが上下に動く様なデザインは、JavaScriptを使わねば無理でしょうか？それとも、HTML5／CSS3だけで出来るものでしょうか？】 私はHTML5／CSS3は出来ます(完璧ではなくまだまだ学習中)が、JavaScriptは学習していないので、知らないのです。 キーワードで２～３、ググってはみたのですが、今のところまだ不明で・・・。 どなたかお教え頂けますか？

    • ベストアンサー
    • CSS
  • 中で自由にいろいろ扱えるダイアログ(？)を使うには

    http://www.athome.co.jp/bklist?ITEM=ks&ART=13&AREA=13&KEN=15&DOWN=1 こちらを開くと、いきなり中心に何かが開きますが、 この何かは、「地域から探す」の「市区郡」の「変更」を押すと開くダイアログです。 この何かというのはダイアログというのですか？ チェックボックスやＤＢ、画像、CSS、Javascriptなど自由にやっているようですが、 こちらと同じようなことをしたいです。 背景が暗くなるなど、凄く難しいでしょうか。 参考にできるサイトはありませんか？ こういったサイトをみつけましたが、 http://css-eblog.com/javascript/floating-popup-window.html iframeはSSLなどを使わないとマズイ的なことが紹介されていましたので、 iframeを使わずに実現したいと考えています。 ドンピシャなライブラリがあればいいですが、できれば自作したいと思っています。

  • jQuery背景画像動かすパララックス

    http://yuki930.v-colors.com/ このサイトの背景画像を作りたいです。 ですが、まず画像背景の作り方がわかりません。 それとマウスを動かすと立体的に動く仕組みのやり方がわかりません。 (上のサイトは少し弧を描くように回転しています。) 検索で探しましたところこのようなものがヒットしました。 マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」 http://www.webopixel.net/javascript/381.html たぶんこれであってると思います。 一回違うやつを作ってみました。 jQuery/CSS3で雲をゆらゆらさせる http://www.webopixel.net/javascript/718.html しかし、背景が透明にならず重なってしまいました。（Javasucriptのほうはうまく組み込めました。） まず、背景画像を透明にするやり方が一点と 次に、マウスを動かすと背景が立体的に弧を描くようにするやり方 以上二点を教えて頂きたく存じます。何卒よろしくお願い申し上げますm(_ _)m

  • CSSレイアウトで背景印刷ができない。

    CSSレイアウトで外注さんに制作していただいたのですが、画像のみのサイトな為、印刷したら白い紙しかプリントされません。 強制的に背景まで印刷するような、JavascriptもしくはCSSの記述はありませんでしょうか？ 外注さんに「それならテーブルでくむしかない」といわれております。 誰か助けてください。。。

  • (ＨＴＭＬ)タグの付け方

    http://plusone.jpn.org/javascript/sample/movie/sakura.html このサイトに書いてある赤字の 部分を<body>から</body>までの 間にペーストしたのに 再生されません。どこを 変えれば良いか教えてください。 ちなみに背景は画像になっています。

  • このサイトでは　http://www.magonote-seifuku

    このサイトでは　http://www.magonote-seifuku.com/　繰り返しＣＳＳで画像が背景として使われているようですがここから自分のＨＰでこの画像を使わせてもらう場合ＣＳＳの記述の場所をＨＴＭＬの文字列のどこにおいたらよいのか？またそのサイトが外部ＣＳＳを使っている場合はそのＣＳＳの記述はどこにあるのか？教えていただけませんか？

  • 24時間毎に外部cssの変更は可能ですか？

    Webサイトのテーマカラーを6色決めて、それぞれのカラーを24時間ごとに変えたいと思っています。 例えば今日は赤で、明日は青、のように変えていきたいのですが、 単純に背景色を変えるのではイメージが大きく変わってしまい、デザイン的におかしくなります。 いっそのこと思い切って、アイコンや画像もそれぞれのテーマカラー別に用意してしまおうと考えています。 そうなるとよくあるタイプの単純な画像・背景色の切替ではなく、テーマカラー別に6つのcssを用意して、24時間毎に切替るのが手っ取り早くて良いと考えています。 javascriptで例えば0～7時までは背景色や画像を入れ替える、 外部cssを入れ替える、というのは過去ログからもわかったのですが、 24時間毎に入れ替えるというのは可能なのでしょうか？ javascriptの知識はまったくないため、大変申し訳ないのですが教えて頂けると大変助かります。 よろしくお願いいたします。

  • このようなフォトギャラリーを作りたいのですが・・・

    こんにちは。 下記のサイトのような、サムネイル画像をクリックすると、 背景が暗くなり、小窓に拡大写真が出るような仕組みを作りたいのですが、 これは、JavaScriptで作ってあるんでしょうか？？ http://www.daiichi-engei.jp/honten/photogallery/ よく見る形なのですが、それを解説しているようなサイトが見つからなくって… 誰か、ご存知の方はいらっしゃらないですか？？ まだ、かじっただけの知識しかないのですが、 そのような者が作るのは、至難の業なのでしょうか？？ よろしくお願いします。

  • ジャバスクリプトを教えて下さい

    教えて下さい。 http://external-file.com/ja/javascript_sample-0.html 上記サイトのように、画面がスクロールされても左にある小さな小窓は くっついてきます。このような物を使用してホームページを作製したいのですが どのようにプログラムを組めば良いのでしょうか？ 宜しくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する