• 締切済み

異なる大きさのロールオーバーって？

Java Script初心者です。 ロールオーバーは作れるのですが 時々gooのTopページのバナーにあるような オンマウスをすると表示されている画像サイズより 大きい画像に入れ替わるロールオーバーを作りたいのです。 普通に作ったら、大きく変わる画像のサイズ分 余白を取っておかないといけないと思うのですが gooのTopページのバナーは テキストがある上に画像がかぶさるように なっています。 ご存知の方は是非教えていただけますか？ よろしくお願いします。

みんなの回答

  • itomizu
  • ベストアンサー率47% (8/17)
回答No.2

gooのtopページのソース見たけど、初心者にはちょっと難しいですね。 433行目のdocument.writeの中身見れば大体の感じは掴めると思います。 補足に使い方がよく分かりませんと書いてありますが、CSSは属性として使えますから<a>タグ内ならどこでもいいですよ。 他の属性値の真ん中みたいな変なところじゃなければ。 style = "position:absolute; visibility:hidden;" あとabsoluteを使うならleft:**pt; top:**pt;も入れた方が良いかな。 実際に作ってみたこと無いので自信は無しとします。 間違ってたらゴメンナサイ。

  • todo36
  • ベストアンサー率58% (728/1234)
回答No.1

スタイルシートだす。 position:absolute と visibility を使っています。

参考URL：
http://tohoho.wakusei.ne.jp/www.htm
butibuti
質問者

補足

早速のご回答ありがとうございます。 「とほほ..」を見て納得しましたが、 使い方がよく分かりません。 CSSを使うとき、下記のタグの どこに入れたらいいのでしょうか？ お時間あるときで結構ですので 教えていただけますか？ <a onMouseOver="MM_swapImage('bag','','image/■■■.jpg',0)" onMouseOut="MM_swapImage('bag','','image/▲▲▲.jpg',0)"> 画像が変わります。 </a>

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

関連するQ&A

  • 画像のロールオーバーとアクティブページでの画像ロールオーバーについて

    javascriptでの画像のロールオーバーについて質問させてください。 現在、あるサイトを作成中なのですが、グローバルナビゲーションメニューにjavascriptで画像のロールオーバーを設定したいと思っています。 このスクリプト自体はwebで簡単に見つかったのですが、これにプラスアルファで現在見ているページ（アクティブページ）のメニュー画像をロールオーバー（ロールオーバーをオンマウス状態に）させる方法が見つかりません。 あらゆるサイトでよく見るので簡単に見つかると思ったのですが・・・ どなたかこの両方の機能を実装できるjavascriptを御存知の方がいらっしゃいましたらご紹介ください。

  • jQueryを使ったロールオーバーについて

    初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！

  • WordPressで画像のロールオーバーをさせたい

    WordPressのブログや固定ページの記事の中で、 ２枚の画像を使って、画像のロールオーバー（マウスオーバー）をさせたいのですが、 やりかたがわかりません。 Java Scriptではなく、CSSで行いたく思い、 検索していろんなサイトに行きましたがうまくできませんでした。 もし可能であれば、単純にこれをコピーしたらできる というＣＳＳをご提示していただけないでしょうか。

  • 初心者なのにJAVAスクリプトを使うから！

    HP作成初心者で、特にJAVAスクリプトに関しては赤子にも及びませんが助言して頂けたら幸いです。 まずいくつかの画像を、全部暗い感じにしてオンマウスでスポットライトがあたったように明るくなるような（フェードインする感じです）JAVAスクリプトを使いました。 そして同じ画像ににオンマウスで任意のテキストを表示させるJAVAスクリプトを使いたいのですが、やり方がよくわかりません… 個々には出来るのですが…(当たり前ですが；） そもそもHEAD間に２つJAVAスクリプトを書いていいかもよくわかっていませんし、 BODY間のその2種類のJAVAスクリプトを呼び出したい場所での書き方もよくわかりません。 自分なりに色々と調べてはみたのですが、答えが見つかりませんでした… 本当に初心者丸出しで、質問の意味もわかりにくいかとは思いますが、わかる方がいらっしゃいましたら是非教えて下さいませ<(_ _)>

  • Java Scriptの件で質問をさせて頂きます。よろしくお願いいたし

    Java Scriptの件で質問をさせて頂きます。よろしくお願いいたします。 よく、ホームページの一番下に「このページのトップへ」とか「ＨＯＭＥ」などとあり、それをクリックすると、当該のページの一番上まで行くものがありますが、あれはJava Scriptを使っているのでしょうか ？私としては、出来るかどうかは不明なのですが、Java Scriptをcssのような感じで外部ファイルにして「このページのトップへ」を作成したいと考えております。どなた様かご指導のほどよろしくお願いいたします。 また、「このページのトップへ」にやはり何らかのリンクを張るのだと思いますが、その点に付きましてもご指導をどうかよろしくお願いいたします。 また、話は少し変わってしまうのですが、ロールオーバーをホームページの上部に横に並べて表示させたいのですが、このようなこともJava Scriptで出来るのでしょうか？現在はcssで試行錯誤している最中ですが、Java Scriptでも可能ならとも考え合わせてご質問をさせて頂きました。 どなた様か、ご指導のほどよろしくお願いいたします。

  • モバイルサイトでリンク画像をロールオーバー処理したいのですが・・・

    モバイルサイトでリンク画像をロールオーバー処理したいのですが・・・ 慣れないモバイルサイトを仕事で制作しています。 リンク画像をオールオーバー処理したいのですが、 javaによるonMouseOverの方法しか知りません。 モバイルでjavaが利用できないことは知っているのですが、 ロールオーバーのようなリンクを作っているサイトはいくつも見たことあります。 javaが使用できないのなら、Flashでのアクションスクリプトかとも思ったのですが、 単純にボタンシンボルを作成してswfの拡張子で書き出して <object data="ファイル名.swf" type="application/x-shockwave-flash"> <param name="src" value="ファイル名.swf"> <param name="loop" value="true"></object> 的なタグ埋め込んだ場合ではダメでした。 （サーバーにアップする前にブラウザでチェックした場合は画像を読み込めず、 サーバーにアップした場合は何らかのプログラムにひっかかったのか、ページを開くことさえできませんでした。） モバイルでロールオーバーする方法をお教えいただけないでしょうか？ ・別にFlashを使いたいわけではありません。単にオンマウスで画像を変更したいのです。簡単な方法があればそれが最適です。 ・画像をオンマウスで変更する必要があるので、cssで背景色を変える方法は無しです。 何卒よろしくお願いいたします。

  • ロールオーバーを含む複数の動作について

    製作初心者ですが宜しくお願いします。 今回ホームページを作るにあたり、以下のJavaScriptを使用した動作を検討中です。内容に心当たりがありましたらご教授下さい。 先ず横590px縦300のメイン画像があり、その横に横180px縦50pxの画像を６個にしての設置を行います。 横の180px縦50px画像をロールオーバーにし、更にその画像にマウスを乗せた時に横590px縦300pxのメイン画像も同時に変えたいのですが、これらの動作は可能でしょうか？ また、欲を言えば…ロールオーバーにした画像にリンクを貼り、目的のページへ移動をしたいとも考えております。 参考なサイトとしましては、セブンイレブンのトップページで使用しているフラッシュによる事ですが、あいにくフラッシュは未経験でソフトも無く行えませんので、JavaScriptで可能な限り動作的に行えればと考えております。 参考ＵＲＬ： http://www.sej.co.jp/index.html 自分でも色々探してみましたが、なかなか見つからずスクリプト同士を連結したりして試しても見ましたが動作にバグが生じ、上手くいきませんでした。 そこで、参考になるサイトがあれば教えてください。 宜しくお願いします。

  • CSSのみでのロールオーバーについて

    リストで並べてたテキストにマウスをのせると、別の箇所にある画像が変化するようにしたいのですが、CSSだけでできるでしょうか。 具体的には、A,B,C....というようにテキストのリストを並べて、Aというテキストにマウスを置くと、任意の場所にある画像がAの画像になり、同じようにBというテキストにマウスを置くと、今度はその画像がBの画像に変わるというものです。 Java scriptを使わずおこないたいためアドバイスいただけませんでしょうか。

    • ベストアンサー
    • CSS
  • javascriptを使って画像のランダム表示とロールオーバーをセット

    javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

  • ロールオーバーで切り替えられるのは出来るの画像だけ？

    リモートロールオーバーで、サイトの更新情報を表示しようと思っています。 テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。 更新情報だけは、画像が半分のサイズで、もう半分にテキスト（更新情報）を表示したいのです。 （以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます） ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか？ また、テーブルの一つのセルの中に、画像とテキストの２種類をオンマウスで表示させる事は可能でしょうか？ 御回答頂けると嬉しいです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する