• ベストアンサー

カーソルが画面端に来たとき横スクロールするhtml

ページ全体に画像を貼り、カーソルが画面の左右数センチに来たときに横にゆっくりスクロールされていくhtml(又はcss、スクリプト)を教えて下さい。 絵巻物を見るような感覚のページを作りたいと考えています。 また、その画像の上に、背景の上に付けるようにリンクを何箇所か乗せることは可能でしょうか? 可能でしたら、その方法も是非お聞きしたいです。 複雑な上に説明がわかりづらくて申し訳ありません。

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

マウスのポイントで横スクロールはjqueryにあります。  ⇒画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) - かちびと.net( http://kachibito.net/web-design/224-image-jquery-collection.html ) 画像の上にリンクを置くのは、単にナビゲーションのデザインです。 HTMLは、 <div class="nav">  <ol>   <li>    <ol>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>    </ol>   </li>   <li>    <ol>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>     <li><a href=""></a></li>    </ol>   </li> ・・・【中略】・・・  </ol> </div> で良いです。HTMLさえ正しく書けていれば、どうにでもなりますよ。  ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )  にて、[表示]→[スタイルシート]→[画像の上に配置]がひとつの方法化と・・

kuroneko0405
質問者

お礼

web初心者ゆえせっかくの参考資料も上手く応用させることが出来ませんでしたが、これからの質問の参考にしていただこうと思います。ご回答有難うございました。

関連するQ&A

  • Aタグがスクロールしないと有効にならない

    メニューページから内容のページにnameを使ってリンクさせているのですが、 開かれたページの指定されたname部分に飛ばず、普通にページが開いてしまいます。 しかもこの内容のページの一番上部にはメニューページに戻るリンクもあるのですが、それも全く反応ナシで カーソルを合わせてもカーソルが変わらずクリックしても無反応です。 それなのに何故かその内容ページのスクロールバーに触れると突然nameもメニューに戻るリンクも正常になります。 これは何が原因なのでしょうか? ページ自体が重いので読み込みに時間がかかるのかとも思ったのですが ページ全体で15k程度で画像は使っていません。 CSSを多用しています。 Aタグと相性の悪いタグやCSSがあったりするのでしょうか? 色々CSSを外してみたりもしたのですが直りません。 どうかお知恵をお貸しください(T-T)

  • ページがスクロールするのについてくる背景画像

    わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはOKなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか? cssかjavaでできるでしょうか? 教えてください。 よろしくお願いします。

  • 勝手にスクロールして動いてしまう

    jqueryを使用してメインビジュアルの自動画像切り替えをしているのですが、 不具合が発生していて、しばらくすると、勝手にスクロールして動いてしまいます。 CSSとjqueryが複雑にはりこんでいるので、不具合を修正するは難しいと思い、 勝手にスクロールするのを禁止するスクリプトがあれば…、と思い投稿しました。 スクロールするのを禁止する方法が、もしあれば教えて頂けると助かります。 よろしくお願いします。

  • 横スクロールについて教えてください

    以下のようにごくごく普通にタグを使ってページを作っています。フレームのページのナビゲーションバーが左、右にこのページが出てくるようにしているのですが、なぜかこのメインページに横スクロールが出てきてしまいます。テーブルを使っているのでもなく、とても単純なページにも関わらずなぜなのか不思議でしょうがありません。 原因として考えられるのはどういうことでしょうか? <!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=shift_jis"> <title>○○○○</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> 文をずらずら・・・ </body> </html>

  • スクロールで背景画像が隠れてしまう

    CSSを始めたばかりの初心者です。 フレームでメニューを表示させています。 CSSで背景画像を固定にしているのですが、 長いメニューでスクロールが出て来ると、 ブラウザの表示領域外にあったテキストの背景が白く表示され、 そこから下の背景は画像も見えず真っ白になってしまいます。 ブラウザを引っ張ると背景画像もまた出てくるのですが… これは一体どうしたらいいのでしょう? お答え頂けたら嬉しいです。

  • jqueryを使ったスクロール画面が正しく作動しません。

    jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字(この場合は「テスト」)が右からでてきません。左端に現われてすぐに消えてゆきます(一様左にスクロールされながら消えるのですが)。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>&nbsp;&nbsp;&nbsp;&nbsp; テスト</span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 背景を固定したままスクロールするには?

    WEBページに背景をいれると画面を覆いつくすように何枚も表示されてしまいます。 一枚の画像(背景)の上を文字だけがスクロールされるようにするにはどうすればいいのでしょうか?

  • FLASHに併せたときのカーソルについて

    FLASHに併せたときのカーソルについて教えて下さい。 先日画像が横に自動でスクロールしており、 クリックするとスクロールが止るというFLASHを 作成しましたが、FLASHにカーソルを合わせると リンクが付いていないのに、指のカーソルになって しまいます。 そのカーソルを通常の矢印のカーソルにしたいのですが、 どうすれば良いのでしょうか? どなたか申し訳御座いませんが、ご存知の方いらっしゃい ましたら、ご教授願えないでしょうか? 以上宜しくお願い致します。

    • ベストアンサー
    • Flash
  • Windows8Chrome上のカーソル消去したい

    windows 8 でchromeを閲覧しているとき、ページ上に スクロールしたり、ページを戻すカーソルを消したいです(画像の赤で囲った部分) 設定をそうすればよいでしょうか?? よろしくお願いしますm(__)m

  • 画像クリックでスクロールバーの色を変える方法

    カテゴリー的にここかなと思うので質問させていただきます。 よく画像の素材サイトで 「サンプル画像をクリックすると、背景がその画像に変わる」 というものを見かけますが、 あれと同じ事をCSSのスクロールバーのカラー指定に対してやってみたいのです。 つまり、スクロールバーのサンプル画像をクリックすると、そのページ自体のスクロールバーが変わっていくというもの。 スクロールバーの色がIEでしか変わらない事は存じております。 私はHTMLとCSSの理解は深い方ですが、JavaScriptはほとんどわかりません。 よろしくお願いします。

専門家に質問してみよう