• ベストアンサー

javascriptを使って画像へ移動

http://album.alexflueras.ro/ このサイトのように、画像をクリックして滑らかに横移動させるにはどうしたらいいでしょう？ ソースを覗いてみて、hscroll.jsを呼び出してマウスウィールさせることは出来たのですが… やはりprototype.jsとprototip.jsが必要なのでしょうか？ だとしたらprototip.jsの方はライセンスが必要なようでDL出来ません； あとstyle.cssも見てみましたが、 下の©2011 flueras.com～と書いてあるところ(footer内)は背景が黒になってますよね？ これはどこで指定してあるんでしょう；？

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

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

prottip.jsはツールチップを表示するためのスクリプトなので、 関係無いと思うのですが、とりあえず検証するだけであれば http://album.alexflueras.ro/ で使っているものを直接ダウンロードしてしまえばいいかと思います。 （公開時はライセンスに従う必要がありますので、別の似たスクリプトを探すのが早いかもですが） >下の©2011 flueras.com～と書いてあるところ(footer内)は背景が黒になってますよね？ all.css の15 行目あたりでbodyに対して指定しているものが該当します このあたりはfirefoxアドオンのfirebugを使うと一瞬で調べられるので インストールをお勧めします。

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

関連するQ&A

  • 背景画像がずれる現象について

    フッターの背景をCSSで指定してrepeat-xで横並びに表示したのですが、 上のほうにずれて表示されてしまいます。 フッターの文字だけは、一番下の場所に表示されるのに対して、 背景画像だけが上に表示されるのはなぜでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • スクロールに沿ってjavascriptで背景画像を

    現在webサイトを作成しています。ページのメインビジュアルを「.mainVisual」というclassを作成し背景画像を指定して表示しています。 この背景画像を画面スクロールした際に、下に動くように以下のjavascriptを実装しています。 $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('.mainVisual').css('background-position-y', '0 ' + parseInt( +y / 10 ) + 'px'); }); }); この状態で動くのですが、今回新たに背景画像の元々の表示位置を「background-position」で調整したいと考えています。（単純に画像が下に下がるので、事前に画像の位置を上に上げておきたい） cssの記載で位置の調整はできるのですが、スクロールしてjavascriptが実装されると「background-position」の値が0pxになってしまい、背景画像の指定位置が元に戻ってしまいます。 こちら既に指定指定した「background-position」の値を残しつつ、jsでスクロールに併せて要素を動かすにはどのようにすればよいでしょうか。 わかりにく説明と、ひどく初心者の質問で大変に恐縮ですが、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。

  • javascriptをＣＳＳに書き込むと動作しません。何故ですか？

    下記のjavascriptをＣＳＳに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがｃｓｓにすると動作しません。 何が悪いのでしょうか？ 詳しい方宜しくお願いします。

  • CSSでの背景画像の設定について

    CSSでの背景画像の設定について質問です。 参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。 以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper>　メニューバー部分の背景画像を指定 <topmenu>　margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents>　margin0 auto;で画面中央に配置 <footer-wrapper>　フッター部分の背景画像を指定 <footer>　margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ 解決策を教えて頂ければ幸いです。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • jQueryでCSSの背景画像を切り替えたい

    見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg

    • ベストアンサー
    • CSS
  • 背景画像

    背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>

    • ベストアンサー
    • CSS
  • Javascriptがうまく動作しません。

    こんにちわ。 サイト制作初心者の者です。 サイトにCSSの切り替えが出来る"styleswitcher.js"を使用しているのですが、 切り替えの動作はするものの、ページを更新（リフレッシュ）したり、別のページに移動すると、元のCSSに戻されます。 ネットで同じ様なエラーが出てないか確かめてみましたが、役に立ちそうな答えが見つからなかったので、ここに質問させていただきます。 Styleswitcher.js http://www.alistapart.com/articles/alternate/ サイトでのソース： == <head></head>内：== <script type="text/javascript" src="js/styleswitcher.js"></script> <link rel="stylesheet" href="css/style.css" type="text/css" title="Default" /> <link rel="alternate stylesheet" href="css/style2.css" type="text/css" title="Custom2" /> <link rel="alternate stylesheet" href="css/style3.css" type="text/css" title="Custom3" /> == <body></body>内：== <div class="csspalette"> <a href="#" onclick="setActiveStyleSheet('Default'); return false;"><img src="images/ccss1.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom2'); return false;"><img src="images/ccss2.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> <a href="#" onclick="setActiveStyleSheet('Custom3'); return false;"><img src="images/ccss3.jpg" width="18" height="18" border="0" class="ccss-icon" /></a> </div> ==== コードには問題は無いと思うのですが、 この他にJquery等を使ったエフェクトを入れているので、それが問題なのでしょうか？ ご教授願います。

  • html、CSS、画像を一気にDLする方法

    html、CSS、画像、js等を一気に取得できる方法はありますでしょうか。 windowsですが、ウェブサイトの情報を一気に取得する方法はありますでしょうか。現在は、Ctl + S の「名前をつけて保存」にて、ウェブ情報を取得しておりますが、CSSの一部やCSS内の背景画像は取得できません。 Linuxでは確かできると思うのですが。 特に、CSSの背景画像がすべてDLできれば問題ありません。 Firefox Firebugや、googleのdeveloper tool等でも可能ですが、一つずつ取得していかないといけないので、他の方法があると幸いです。

  • 添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像と

    添付のように背景に画像を張るとき上下の画像を別に切り出して、背景画像としてCSSでレイアウトしたいのですが、うまくいきません。 background-position　の設定をするのだということはわかるのですが、 赤枠でくくった部分の２枚の画像をそれぞれ上下に指定するにはどうしたらよいでしょうか？ どうも今書いているソースではうまくいきませんどなたか回答お願いします。

  • フッターの背景に色を指定したいのですが、

    フッターの背景に色を指定したいのですが、 下記内容でフッターを記述し、 "#"には任意の画像またはテキスト等を指定しています。 <div id="footer"> <img src="#" /> </div> CSSで footerにheight:100%;や、 height:autoを試しましたが無理でした。 下記サイトのような感じで、ブラウザの一番下までフッターの背景の色を指定したいのですが、教えていただけないでしょうか？ 宜しくお願いいたします。 http://www.nattoku.jp/ http://www.lets-co.com/

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する