文字のロールオーバ効果を実現する方法

このQ&Aのポイント
  • 文字のロールオーバ効果を実現する方法について説明します。具体的な手順や必要なツール、テクニックを解説します。
  • ロールオーバ効果により文字を動かす方法をご紹介します。CSSやJavaScriptを使用して、文字にアニメーションを追加することができます。
  • あるホームページで使用されている文字のロールオーバ効果について解説します。メニューの文字にカーソルを当てると、少し下に動いて、カーソルを外すと元の位置に戻ります。この効果を実現するためには、文字を画像化する必要があります。
回答を見る
  • ベストアンサー

文字のロールオーバ効果見たいというか文字が動く効果をかけたい。

文字のロールオーバ効果見たいというか文字が動く効果をかけたい。 あるホームページ、ある、金持ち兄さんというサイトですが、 メニューの文字にカーソルを当てると文字が少し下に動き逆にカーソルを 文字からはなすと、元の位置に戻ります。 このような、効果は、どうやってできるのでしょうか? ちなみに、、下のアドレスが、文字に効果がかかっているアドレスです。 http://rich-navi.com/ ちなみに、このサイトは、ホームページビルダで作られているそうです。 私も、ビルダーを持っているので、IBMのカスタマに電話で聞いた見たのですが 文字を画像化してないと、そのような、揺れるロールオーバ効果をだせないそうですが でも、私の見る限りあきらかに、メニューは、文字テキストで、マウスのカーソルをあてると、動き また、クリックすると、リンクの色も一度クリックしたあかしとして色が青から紫色の、変わります。 文字が画像だったら、メニューのテキストリンクの色は、変わらないと思います。 ということで、文字に揺れる効果見たいのを私もかけたいのですけど その方法を、教えてくださいよろしくお願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

スタイルシートで A:HOVER { position : relative; top : 1px; left : 1px; } としていることによる効果でしょう。

kensin9
質問者

お礼

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

関連するQ&A

  • ロールオーバがブラウザで正しく表示されない

    現在ホームページを作っています。ロールオーバーの設定(カーソルを合わせると色が変わる設定)をしたのですがカーソルを合わせると×が表示させて正しく表示させません。ロールオーバ用に作った画像はPNGですが、JPEGに変更しても症状は変わりません。 基本的な問題なのかもしれませんが、教えて下さい。 ロールオーバ用に作った画像はPNGはAdobeのfireworksで作り、ロールオーバの処理はホームページビルダー上で設定しました。

  • ロールオーバーのリンク

    ビルダー6でHPを作成しています。 ロールオーバーを使ってみたのですが、リンク先を指定して無いのに カーソルを合わせると指先カーソルになるし、そのページ内にリンクが貼られてしまいます。 このリンクを無くすにはどうしたら良いのでしょうか?

    • ベストアンサー
    • HTML
  • HPB8の文字オーバーロール?機能について

    こんにちは。 HPB8をつかってHPを作っている者です。一つどうしても分からないことがあるので助けてください。 画像にオーバーロール効果を使用することは出来るのですが、文字にもその効果を使うにはどうしたらよいのでしょうか?説明文などの上にカーソルを持っていくと文字の色が変わるのではなく、文字のバックグラウンド?の色が変わるようにしたいのです。あと、スタイルシートという機能を使ったことがないのですが、これは何なんでしょうか? 下手な説明ですが、よろしくお願いします!

  • ロールオーバーで小窓を出したい。

    今、ロールオーバーでリンクを指定してあります。 ロールオーバーはHPビルダー2001でつけました。 そのロールオーバーの編集でリンク付けてあります。 このリンクをロールオーバーしている画像を押した時に 小窓で表示される様にするにはどうすれば良いのでしょうか? 教えてください。

    • ベストアンサー
    • CSS
  • ロールオーバを保持したい

    いつもお世話になってます。 ロールオーバの保持をしたいのですがどのように行っていいのかがわかりません。わかるかたいましたらご協力お願いします。 例 トップページからリンクページに移動する際にリンクのボタンにカーソルをあわせると違う画像になります。もちろんカーソルを話すと元の画像に戻ります。リンクボタンを押してリンクのページに移動したらカーソルをあわせたときの画像のままにして強調させたいんです。 誰か方法わかりましたらご教授お願い致します。

  • ロールオーバーで…

    ホームページビルダーV6を使っています。 ロールオーバー効果を使って、メニューのロゴの上にポインタを持ってくると隣の何もない余白からポンと別の画像が出てくるようにするにはどうしたらいいでしょうか。 つたない説明ですがよろしくお願いします。

    • ベストアンサー
    • HTML
  • ホームページビルダーで出来ますか?

    リンク先をクリックした時に「新しいウィンドウ」で設定しているとメニュー付きのブラウザそのものが立ち上がってきますが、よく何のメニューもないウィンドウだけが出てくるページを目にします。あれはどうやっているんでしょうか?それとフォントのロールオーバーってホームページビルダーでは出来ないのでしょうか?画像データにしてやるとあまりにレスポンスが悪いのでフォントの色だけを変えるようなロールオーバーをしたいのですが・・・是非教えてください。お願いします。

  • ロールオーバーした画像の保存

    カーソルを合わせると変わる画像ってありますよね?普通画像を保存するときは画像にカーソルを合わせて右クリックで画像の保存にしますが、ロールオーバーされた画像の場合、カーソルを合わせる前の画像を保存できません。どうにか保存することができる方法はありますか? 教えてください。

  • ロールオーバーで…

    ホームページビルダーでページを作っています。 横に2マスある表を1つ作り、横幅を100%に指定、右のセルを幅50%に指定しました。 左側には40x40のサムネイルを100個ほど置いています。全部見るにはスクロールする必要があります。 右側のセルに右側のサムネイルをクリックしたときにプレビューを表示するようにしたいのですがうまく出来ません。 まず、ロールオーバーで右側セルにプレビューを表示することは出来ました(ビルダーの機能で出来ました)。 ---------------------------------------------- <A href="#" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/auto-mes/00/mes00-01.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/blank.gif');"><IMG src="pict/auto-mes/00/mes00-01-s.jpg" width="40" height="40" border="0" name="_HPB_ROLLOVER1"></A> -------------------------------------------------- しかし、右側セル中央に表示指定にしているため一番上・下のものをロールオーバーさせると絵の全部が見えません。 写真のサイズは決まっておらず、まちまちです(縦長横長がランダムにある)。 そこで、ロールオーバーではなくクリックで右セルに表示させる方法とセル中央ではなく画面中央に表示させる方法があれば教えてください。 もしくは、ほかに何か良い方法がないでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • Flash、ロールオーバーで情報を表示させたい

    海外向けのサイトで、日本地図の各県にロールオーバーすると、欄外にその県の面積や人口などの情報(テキストor画像)を表示させ、クリックすると各県のサイトへリンクしたい。 情報(テキストor画像)を表示させる位置は、どの県でも同じ位置に固定させたい。 リンクは  on (release)  {   getURL("url", "_blank");  } で分かるのですが、ロールオーバーで各県の情報を同じ位置に次々に表示させる方法が分かりません。 60歳の手習いで、Flash CS4を使っています。よろしくご指導ください。