画像をクリックしてカッコよく表示する方法
- お友達の雑貨屋さんのWEBサイト制作を頼まれた、なんちゃってデザイナーです。画像をクリックするとカッコよく表示する方法を教えてください。
- WEB制作は７年くらいブランクがありますが、最近の方法について教えていただけると助かります。
- http://www.1101.com/books/donabe-cooking/index.html というサイトを参考にしていますが、どのファイルを使えばいいかわからず困っています。
- ベストアンサー
画像をクリックするとカッコよく表示されるようにしたい
画像をクリックするとカッコよく表示されるようにしたい お友達の雑貨屋さんのWEBサイト制作を頼まれた、なんちゃってデザイナーです。(＾▽＾;) WEB制作は７年くらいブランクがあります。 http://www.1101.com/books/donabe-cooking/index.html こちらのサイトのように画像をクリックするとカッコよく表示されるようにしたいのですが、 どういったことを勉強するとよろしいのでしょうか。 何か公開されているものを利用することで実現できたりするのでしょうか。。。 ソースを見てJavaScriptをローカルにコピーして試してみたのですが、どれが必要なファイルかわからなかったのです。 初歩的な質問で恐縮ですが、どうかご教授ください。m(。^＿^。)m
- unetty
- お礼率33% (1/3)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞クリックするとカッコよく表示されるようにしたい 何がカッコよいかは人それぞれですが… ご提示のサイトでは、mootoolsというjavascriptのライブラリをベースにしていろいろな効果を与えているようです。 ソースをご覧になればわかると思いますが、slimbox.jsとかmediabox.jsなどなどを利用しています。 http://blog.livedoor.jp/cie/archives/50629870.html http://www.digitalia.be/software/slimbox2 http://coliss.com/articles/build-websites/operation/javascript/373.html http://iaian7.com/webcode/Mediabox mootoolsと同様のものに、prototypeやjqueryなどがあり、それらを元に同様の効果のものも多数開発されています。 http://www.prototypejs.org/ http://jquery.com/ 画像表示のプラグインではLightboxが有名らしいですが、それに類似するものも多種多様に作られています。 それらの紹介サイトも沢山ありますので、まずはそのあたりを探してみて、気に入ったもの（使いやすそうなもの/わかりやすそうなもの）を使ってみるのがよろしいかも。 ＜一例＞ http://www.goodpic.com/mt/archives2/2007/03/lightboxjs.html http://blog.open-arms.biz/200803/26373.php http://gihyo.jp/design/serial/01/jquery-plugin/0002 英語がわかるなら（私は苦手）オリジナルのサイトで、そうでない場合は日本語で解説しているサイトも結構ありますのでそれも参照しながら手がかりにするのもよいでしょう。 （プラグイン名でぐぐればそれなりに見つかると思います。）
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
Lightboxの亜種を使ってるみたいですね。 Lightboxは結構有名で導入方法の解説なども豊富です。 http://www.google.co.jp/search?q=Lightbox&hl=ja
関連するQ&A
- 画像をクリックすると、詳細の画像が表示される。
最近よくこの画面を見るのですが、ページにう小さい画像がたくさん表示されていて、一つの画像をクリックすると、画像がスーっと大きく表示され、後ろの画面が自動的に暗くなります。 http://kumikofuse.ciao.jp/w_works.html これは何のソフトを使用しているのでしょうか？ あるいは、ソフトでなく、JavaScriptなのでしょうか？その場合どのようにして制作しているのかどなたかわかりますでしょうか？ たとえば、Dreamweaverの機能なのでしょうか？ 私が持っているのは「８」なのですが、単に別ウィンドウで画像が表示されるだけです。「CS３」にすればできる機能なのでしょうか？ どなたかよろしくお願いします。
- ベストアンサー
- JavaScript
- クリックで画像表示、さらに画像の一部をクリックで閉じる
今、Javascriptを使用したページを立ち上げようと しており、以下のようなことをしたいと思っています。 (1) あるテキスト（または画像）をクリック (2) 説明用の画像が表示 (3) (2)で出た画像内の×マークをクリックすると、 その画像が消える。 イメージとしては、GOOGLEローカルのように、 マーカーをクリックすると、 説明文（画像）が出てきて、 ×を押すと閉じるといった内容です。 Javascriptのonclickとかをうまく使えば…と思うのですが、 ホントに初心者なので、分からないことだらけです。 すいませんが、教えていただけないでしょうか。
- 締切済み
- JavaScript
- 複数の画像を先に読み込ませ表示を早くしたいのですが。
はじめまして、Javascriptはほとんどわからないので教えていただけないでしょうか？ WEBサイト制作で、複数の画像を読み込ます事で画像の表示を早くすることができると聞いたのですが調べても思うものを見つけることができませんでした。 ロールオーバー時の画像を先に読み込ませて、Windowsでの砂時計の表示を無くしたいのです。（クライアントからの指示で） <body>タグにonloadを付けることでJavascriptを呼び出す方法らしいのですが詳しいことがわかりません。 Javascriptの記述方法と<body>タグでの呼び出し方を教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像クリックで別の場所の画像を変更
まずは、こちらのサイトを見ていただけるでしょうか? http://www.rocomotion.jp/cgi/sample/ralbum/ralbum.cgi?mode=main&action=view&no=427&photono=1&tailno=.jpg&wno=181&hno=163 このサイトのように「クリックすることで、拡大写真を表示」させたいです。 ただ、このサイトの場合、CGIを利用していますが、JavaScript 等を利用してhtmlファイル上で実現できないか?と考えています。 このようなことがJavaScriptで実現可能でしょうか? ちなみに画像は最大10枚です。絶対10枚と言うものではないです。 方法を教えてください。お願いします。
- ベストアンサー
- JavaScript
- クリックしたらJavaScriptで数カ所に一度に画像を表示させたい
以下のようなことがJavaScriptでできるでしょうか？ できる場合、関数等のヒントをいただけないでしょうか。 webページにおいて、 「画像を表示」というリンク、あるいは同様のボタンをクリックすると、 同ページ内の複数の場所（特定）に、それぞれ指定した画像を一度に表示させる。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像上のクリックした場所が分かるようにマーク表示
画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。 マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。 言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。 お分かりの方、どうぞよろしくお願いします。
- 締切済み
- JavaScript
- クリックしたら記事が表示・非表示
趣味でホームページを作っています。発言小町で使われているタイトルをクリックすると記事が表示（非表示）される仕組みはどうやって実現してるのでしょうか？ たとえば↓このページのようにレスのタイトルをクリックすると本文が表示される仕組みです。 http://komachi.yomiuri.co.jp/t/2008/1008/207312.htm?g=04 Javascriptかなと思ってるんですが素人なもので（涙） 解説しているサイトの紹介でも構いません。お分かりの方、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- HPでの画像の表示方法について
HPの画像表示についてご教授ください。 最近、下記に記載させていただいた、参考サイトのように 画像をクリックすると背景が薄く暗くなり、画像が前面に開くような 表示をするサイトが増えてきています。 最初はFlashで作成しているのかな？と思っていたのですが、どうやら違うようです。 このような画像の表示のさせかたをするにはどのように実現するればよろしいのでしょうか？（CSS？、JavaScript？） ご存じの方がいらっしゃいましたら、ご教授お願いいたします。 --「参考URL」------- http://www.tbs.co.jp/rookies08/gallery/ http://www.dreamofficial.com/news/detail.php?id=1210862632 --------------------
- ベストアンサー
- ホームページ作成ソフト
- 【HP制作】画像を画面いっぱいに表示したい
こんにちは。 質問させていただきます。 現在、サイト制作の勉強をしています。 ブログ記事の中にある画像をクリックすると、灰色に透過されたレイヤーと画像が画面いっぱいに最前面に現れる機能を実現したいのですが、やり方がわからなく困っています。 javascriptを使う？方法だと勝手に推測しているのですが、それ以外は...です。 下記のサイトを参考にしています。（記事中の画像をクリックすると確認できます。） http://blog.honeyee.com/mmizoguchi/ とても基礎的なこととは思いますが、ご教授頂けたら幸いです。 宜しくお願い致します！
- ベストアンサー
- JavaScript
- Sleipnir mixiで画像がクリックして表示できない
Sleipnir（2.8.4）でmixiの画像をクリックして拡大できなくなってしまいました。 IE8なら大丈夫でした。 日記の画像をクリックして画像だけを表示させようとしても開きません。 右クリック→リンクを新しいタブで開くをしても 真っ白なページが開き、アドレスには「javascript:void(0)」となっています。 前はこんなことなかったです。 私だけでしょうか？どうしちゃったんでしょう？
- ベストアンサー
- ブラウザ
