- ベストアンサー
ロールオーバーを含む複数の動作について
- ロールオーバーを含む複数の動作についての質問です。具体的には、横180px縦50pxの画像をロールオーバーさせると同時に横590px縦300pxのメイン画像も変えたいです。また、ロールオーバーした画像にリンクを貼りたいです。
- セブンイレブンのトップページで使用されているフラッシュを参考にし、JavaScriptを使用して同様の動作を行いたいです。フラッシュによる動作は行えないため、JavaScriptで可能な限りの動作を実現したいです。
- 自分で試行錯誤してみましたが、うまくいきませんでした。参考になるサイトや方法があれば教えていただきたいです。
- ishibo_062
- お礼率26% (8/30)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- 画像のロールオーバーとアクティブページでの画像ロールオーバーについて
javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ（アクティブページ）のメニュー画像をロールオーバー（ロールオーバーをオンマウス状態に）させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。
- ベストアンサー
- JavaScript
- CSSでのロールオーバーについて
アメーバにてブログを作ろうと思い、実験用に作ってみました。 まずは自分の作って失敗したものを見てもらいたいのです。 ttp://ameblo.jp/bakasuke-11/ ですが、ここではページ中段にある次の記事へという部分をロールオーバー用の画像にしたのですがうまくロールオーバーできません。 よくブログなどでは使われていてたぶん出来ると思うのですが たとえばこのようにしたいのです。 ↓ ttp://ameblo.jp/sunsuntaiyo/ 自分のサイトではロールオーバーの部分は .topPaging{ margin: 0px auto 10px auto;/*注1*/ width:360px;/*全体の幅注2*/ position:relative; text-align:center; } .topPaging a.firstPage{/*最初のページへ*/ background:url(http://stat.ameba.jp/user_images/a0/a8/10081778130.gif) top center no-repeat; display:block; width:18px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:0px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.previousPage{/*前のページへ*/ background:url(http://stat.ameba.jp/user_images/05/f6/10081778131.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; left:45px;/*左からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.nextPage{/*次のページへ*/ background:url(http://stat.ameba.jp/user_images/8e/fd/10081778132.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:45px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } .topPaging a.lastPage{/*最後のページへ*/ background:url(http://stat.ameba.jp/user_images/1e/78/10081778133.gif) top center no-repeat; display:block; width:98px;/*画像の横*/ height:18px;/*画像の縦*/ text-indent:-9000px; position:absolute; top:0px; right:0px;/*右からの位置注2*/ } .topPaging a.firstPage dt a:hover{ background-position:0 -18px; } としました。 どこが間違っていてどうすれば正常に動作するのが教えてもらいたいです。 長々と見にくいですが回答お願いします。
- 締切済み
- HTML
- セブンイレブンのHPのように印刷時に横幅の自動調整をしたい
セブンイレブンのホームページのように、 横幅を768pxとっているのにも関わらず、A4縦での印刷時に横幅が切れないようにしたいのですが、どのようにしたらできますか？ いろいろ試してみたのですが、横幅が750pxを超えると、切れてしまいます。 ◆セブンイレブンジャパン http://www.sej.co.jp/faq/index.html 環境は、 Windows IE5.5↑ HTML、CSS、Javascriptのみ使用可能。
- ベストアンサー
- HTML
- flashのように徐々に画像が変化していくロールオーバー
以前、どこかのサイトで見たのですが画像が良くあるjavascriptの一種で変わるロールオーバーではなく、Flashのように徐々に変化していくものがあったのですが、それを作りたいと思っています。 そんなサイトを見つけようともしたのですが、やはりサンプルが見当たりません。全部、普通のロールオーバーばかりでした（以前見たというそのサイトは今どこにあるか不明です）。 正直、Javascriptは概念自体ほとんど判っていないので、そういった人間でもできるようなさんぷるとうをみつけたいのですが、誰か判る方はいますでしょうか。 よろしく、お願いします。
- 締切済み
- JavaScript
- ロールオーバー効果ウィザード
ホームページビルダーｖ６．５を使用してHPを作成しているのですが、ロールオーバー効果ウィザードで通常時は横長の画像で、マウスポインタが上にきた時には縦長の画像を使用したいのですが、そうなるとやはり通常の画像が横長ですと、マウスポインタが上にきた時には縦長の画像は横に伸びてしまいました。そうならないように、縦は縦、横は横という様には出来ないものでしょうか？
- 締切済み
- HTML
- ロールオーバー時に画像がクルッと横に回転するJS
ロールオーバー時に画像がクルッと横に回転するJavaScriptを探しています。 例： ２枚の画像を用意します。 □、■ まずは□の画像を配置し、ロールオーバー時に横にクルッと回転して■の画像に変わるというやつです。 上記の様なJavaScriptを探しています。 知っている方いらっしゃればお力添えください。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptで作ったロールオーバーがロールオーバーのままになってしまう
質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- MovableTypeでロールオーバー保持
現在、MovableTypeでグローバルメニューのモジュールを作成しております。 普通にロールオーバーはできるのですが、リンク先のページに遷移された時のボタンのロールオーバー保持ができません。 javascriptの使用は、したくないです。 MTのタグ＋CSSでどうにかならないでしょうか。 MT4.2を使用しております。
- 締切済み
- ブログ
- cssとjavascriptを使って画像の一部をロールオーバー
以下の条件でロールオーバーをさせることが可能かどうか、また可能な場合はどのようにしてやるのか教えていただきたいです。 (1)1枚のgif画像がある。画像内にいくつか文字があり、文字の上にカーソルが上がった時に文字の色を変えたい。 (2)文字がすべてロールオーバーしていない元画像と、文字がすべてロールオーバーした画像の2枚を用意。 (3)CSSとjavascriptを駆使して作りたい。 元画像を背景に設定し、その上にロールオーバー後の画像を配置し、隠す。→文字の上にカーソルが来たら、隠していたロールオーバー後の画像の一部をその同じ場所に表示させる というような考え方でやってみたのですが、どうもうまくいきませんでした。Flashでやった方が簡単なのですが、Flashは使わずに作るということになっているので困っています。 何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- クリッカブルマップとロールオーバー
今サイトを作っています。クリッカブルマップでロールオーバーにしようと思っています。なんとか試行錯誤してクリッカブルマップはできるようになったんですけど、ロールオーバーがうまくいきません。なんとか自力で解決しようと思いましたがちょっとわからなくなりました。どうすればいいでしょうか？教えて頂けたら幸いです。 下が参考にしたサイト達です。 http://www.ryokurian.jp/atelier/cliroll/ http://www.geocities.jp/margin0px/sample/mapimg.html
- 締切済み
- HTML
- 4月中旬頃、Windows10をアップデートしたら、音が出ない状態となりました。
- スピードのアイコンに赤い×がついており、「オーディオ出力デバイスがインストールされていません」と表示されます。
- デバイスマネジャー→サウンド、ビデオ、およびゲームコントローラー→ドライバーの更新→インストールされましたとなり→再起動→インストールされていない
お礼
サンプルまで作っていただきありがとうございます。 早速画像を替えて試してみます。 全てJavaScriptかと思いきやスタイルシートで位置づけするなど、 奥が深いんですね。自分も質問をしてから２日間本やネットを介して 勉強し、自作で作ってみましたが最終的にはsteel_grayさんがサンプルを作っていただいた用にメイン画面の画像が横のロールオーバーからカーソルを外した際に元の画像に戻らなかったりで四苦八苦でした。 また、スクリプトを一つ一つ確認しながら勉強させていただきます。 また、不明な点がありましたら宜しくご教授下さい。