「HPで写真をクリックすると大きい写真で見られる」というのがよくありますが、あれはどうやって作るのでしょうか?大きい写真のページを作って一つ一つ小さい写真からリンクを張るのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (6件)

ご想像の通りです。



ただ、画像ごとにページをデザインするのが大変だぁ、という場合は、リンク先に画像ファイル名を直接指定すると、真っ白のページに画像だけ表示されます。シンプルですが、作成は楽です。
例:<a href="111.jpg"><img src="111_small.jpg" border=0>クリックすると大きな画像が表示されます</a>

ただし、画像はブラウザで通常表示できるGIFかJPGのみにしてください。
    • good
    • 0
この回答へのお礼

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

お礼日時:-0001/11/30 00:00

みなさんおっしゃる通りですが、蛇足を少し。



GIFがライセンスの都合で、タダで使えなくなってしまいました。
加えて、今後JPEG2000というファイル形式が一般的に
(言い換えれば、標準的なブラウザで扱えるようになれば、の話)
なれば、わざわざ小さい画像(サムネイル)を作成しなくても
よくなります。
JPEG2000では、一つのファイルの縦横サイズを指定して柔軟に、
画像の圧縮を行えるようです。
(ただし従来のJPEGとは別物)

あ、もし画像閲覧にsusieなどお使いでしたら、サムネイル作成機能が
ありますので試してみてください。
    • good
    • 0
この回答へのお礼

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

お礼日時:2000/12/12 14:25

z-tonさんのおっしゃる方法が、最も一般的だと思いますよ。


実際に見せたい大きな画像は、別のHTMLを用意するなり、
ファイル単体で置いておき、直リンクさせるなりして、
メニューには、縮小したサムネイルを置いておくと言う事で。
初心者の人などで、『画像を縮小する』の意味が理解できていない人などは、
大きな画像ファイルのまま、表示サイズだけ縮小している事がありますが、
そんな状態で写真が10も20も並んだメーニューを作られたら、
見る側からしたら、たまったモンじゃありません。
以前。とあるネットアイドル(自称)のHPを見てみたら、
1つ250~300KBもある様な巨大な画像ファイルが20個以上も並んだ
写真集のページがあって、全部を表示し終わるまでに
30分以上かかった事がありました。
本人は『メニユー用に小さい写真を用意しました』なんて書いてましたけど(笑)

ちなみに、もっと凝ったやり方をするのであれば、
Java Scriptか何かを使って、並んだサンプル画像の上に
カーソルを合わせると、決められたワクの中に大きな画像が
表示される、なんて事もできるみたいですよ。
確か、『スライドショー』とか言ったかも知れません。
    • good
    • 0
この回答へのお礼

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

お礼日時:2000/12/12 14:25

普通に考えれば、皆さんのおっしゃる通り小さい画像を用意して、大きい画像にリンクを設定してやればOKです。


ただ数が多くなると面倒です。
そういうことを自動で処理してくれるソフトがあります。
面倒なのでそのソフトに処理してもらいましょう。
自分で最初から作るのは時間のムダのような気がします。

参考URL:http://www2a.biglobe.ne.jp/~fukatsu/soft/

この回答への補足

参考URLを見させていただきましたが、どのソフトですか?

補足日時:2000/12/12 01:40
    • good
    • 0

まぁ、通常はみなさんおっしゃる通り、サムネイル(小さいサイズ)を別に作ります。

GIFで作るのが一般的ですね。
ただ、面倒だと言う場合は大きい画像のまま、属性のWIDTHとHEIGHTを設定して無理矢理小さく表示させることも可能です。
が、この場合小さくなるのはピクセルサイズのみで、ファイルサイズ自体はかわらないので、重いです。
やはり快適に見てもらうには、GIF等で減色させるべきでしょう。
フリー&シェアウエアを探せば、JPEGをピクセル縮小させつつGIFに変換してくれるソフトもあるので、探してみてはいかがでしょうか?

参考URL:http://www.vector.co.jp/
    • good
    • 0
この回答へのお礼

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

お礼日時:-0001/11/30 00:00

私が作るときには、ご質問の通り、別ページにリンクして作ります。


最初から大きい(=重たい)写真を載せるのは見てくれる人に失礼ですよね。
 小さい写真は、色数も落として(GIFでもいいかも)、大きい写真はきちんと?JPEGなどできれいに作るのが普通ではないでしょうか。
    • good
    • 0
この回答へのお礼

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

お礼日時:-0001/11/30 00:00

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJQueryでクリック時のタグの親子の関係について

以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。
spanをクリックしてもdivをクリックしたことにしないようにするには
どうすればよいのでしょうか?
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div {
padding: 20px;
background: #EEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("div").click(function(){
console.log("click div");
});
$("span").click(function(){
console.log("click span");
});
});
</script>
</head>
<body>
<div>
<span>Click!</span>
</div>
</body>
</html>

以下のコードのspanをクリックするとspanとdivをクリックしたことになってしまいます。
spanをクリックしてもdivをクリックしたことにしないようにするには
どうすればよいのでしょうか?
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div {
padding: 20px;
background: #EEE;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$("div").click(function(){
console.log("click div");
});
$("span").click(function(){
consol...続きを読む

Aベストアンサー

ライブラリを使用しない場合は、
divとspanの両方にイベントハンドラを登録した場合、"click span"のあとに"click div"の2つのアラートが順番に出るはずです。

jQueryを使用した場合に"click div"しか出ないのであれば、
jQueryの内部処理にて、click spanが抑制されていると思います。

すみませんがjQueryについてはわかりかねますので、内部処理の抑制を解く方法を知らないのですが、
.click()を呼び出す(イベントハンドラを登録する)順番を逆にするとどうでしょうか。

$(function(){
$("span").click(function(e){
e.stopPropagation();
console.log("click span");
});
$("div").click(function(e){
e.stopPropagation();
console.log("click div");
});
});

その上で、No.2に書かれているような処理の伝播を止める方法を使えばいいと思います。

--------
別の方法として。

<div>にだけイベントハンドラを登録して、その内部でどの要素がクリックされたかを判断してみてはどうでしょうか。

$(function(){
$("div").click(function(){
if( $(this).get(0).nodeName==='SPAN' ){
console.log("click span");
}else{
console.log("click div");
}
});
});

ライブラリを使用しない場合は、
divとspanの両方にイベントハンドラを登録した場合、"click span"のあとに"click div"の2つのアラートが順番に出るはずです。

jQueryを使用した場合に"click div"しか出ないのであれば、
jQueryの内部処理にて、click spanが抑制されていると思います。

すみませんがjQueryについてはわかりかねますので、内部処理の抑制を解く方法を知らないのですが、
.click()を呼び出す(イベントハンドラを登録する)順番を逆にするとどうでしょうか。

$(function(){
$("span").click(fun...続きを読む

Q部屋の蛍光灯がこのところ、頻繁にきれてしまいます。丸いのが大きいの小さ

部屋の蛍光灯がこのところ、頻繁にきれてしまいます。丸いのが大きいの小さいのがついているのですが、蛍光管は新しいものなので、故障だとは考えにくいのです。しばらく消しておいたら、2本ともつきますが、また、切れてしまいます。どんな故障が考えられるでしょうか? 小さな管は見えますが、点灯管は外からは見えません。

Aベストアンサー

抽象的な書込のため推測でと言う事で考えられる事は

>丸いのが大きいの小さいのがついているのですが
>点灯管は外からは見えません。
これは、二灯サークラインでインバーター式と思われます

>小さな管は見えますが
これは、常夜灯ではないでしょうか

>しばらく消しておいたら、2本ともつきますが
と言う事で考えられる事はインバーター回路の不具合ではないかと思います
消灯する事でインバーター回路が冷えて正常になり暫く点灯しておくと熱でおかしくなっているものです
器具自体古い物なのでしょうか、そうだとすれば、器具の買い換え又はインバーター基板交換しか有りません

QワードプレスでjQuery 右から飛び出ているボタンをクリックするとボックスがスライドして出てくるよ

ワードプレスでjQuery

右から飛び出ているボタンをクリックするとボックスがスライドして出てくるようにしたのですが、ワードプレスでjQueryを使う方法が調べてもよくわかりませんでした。
(調べるとたくさん出てくるのですが、その通りにやってもうまく動きません)

この件で何日も悩んでいて本当に困っています。
知識のある方、教えていただけませんか?

どうか宜しくお願いします(TT)

Aベストアンサー

>これをダウンロードして、どこへダウンロードしたデータをアップロードしたらよいのでしょうか?
答えはすべて前回のところにありますよ。
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/jquery.bxslider.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.bxslider.min.js"></script>
これです。
なので、私の場合は、テーマの中に「css」と「js」フォルダを作ってその中に入れているので、js/jquery.bxslider.min.jsこのようにしてます。
すべてここで聞くのではなくて、ネットで調べたらたくさんでてきます。
今後自分で作っていくのであれば検索して解決していかないと何もできませんよ。

Q【初心者です】HP作成しています。ヘッド画像をクリックして、トップページへリンクのタグを教えてください。

HTMLとCSSを勉強しながらHP作成している初心者です。

外部CSSを使ってHPを作ってるんですが、 
ヘッド画像(W830px×H390px)をクリックしたら、トップページへ飛べるようにするには、CSS側とHTML側、それぞれどのようなタグにしたらいいのでしょうか??


困っています!
どなたか教えてください。よろしくお願いします。

Aベストアンサー

■index.html
├imgフォルダ
│└header.jpg(ヘッダー画像)

├cssフォルダ
│└外部css.css

├他のhtml

└他のhtml

こんな感じの階層でトップページがindex.htmlだったら
<a href="index.html" title="トップページへ"><img src="img/header.jpg" width="830" height="390" alt="ヘッダー" /></a>
こう書けばいいのかな

Q1枚の画像をクリックして複数の画像と詳細を入れられるJQueryのLightBoxプラグイン

JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。

今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。

何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。

最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み、下に詳細をHTML・CSSで作成していたのですが、どうしてもポップアップしてからのスライドショーがうまく動かず、ブラウザのウィンドウの横幅をずらずと、スライドショーが正常に動くのですが、色々CSSなどをいじってみたのですが、解決しなかったため、LightBoxのプラグインならやりたいことができるかと思い、探しているんですが、詳細情報をHTML・CSSで実装できないものばかりです。

そこで良いJQueryのプラグインを知っている方がいれば教えていただきたいです。

宜しくお願いします。

JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。

今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。

何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。

最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み...続きを読む

Aベストアンサー

こんにちは
少し調べてみただけなので、ヒントにでもなれば程度ですが・・・


>一覧の商品画像が並んでいて、その画像をクリックすると、
>その商品の他の画像も見れて、そこには、簡単な商品情報を
>写真の下にHTMLで記載できるようなタイプを探しています。
LightBox系のプラグインは数多くあるので種々様々ですが、画像のグループ化ができて、キャプションを付けられるものが多くあります。
画像グループの一つだけを表示して(残りは非表示)おいて、利用すれば似たようなことが実現可能と思います。
ただし、大抵の場合、キャプション部分はtitle属性やrel属性を利用していると思いますので、テキストになってしまいます。

>ポップアップのみ実装して、そこにスライドショーをはめ込み、
>下に詳細をHTML・CSSで作成していたのですが、どうしても
>ポップアップしてからのスライドショーがうまく動かず~
この方法もありのように思います。
ポップアップの実装はライブラリを利用したのでしょうか?
LightBox系のライブラリの多くは、背景レイヤや表示レイヤなどの構成があるので、先にこれらの要素を作成しておいて、その中に表示する要素の『コピー』を作成して表示しているものが多いと思います。
それなので、最初のHTML要素にスライドショーを設定しても、コピーには反映されないということが起こっていたりしませんか?
表示の際のイベントを取得できるAPIを用意しているプラグインを利用すれば、セット後に表示用の要素に対してスライドショーの初期設定を行うようにすれば実装可能ではないかと想像します。
ただし、この場合は画像ではなくコンテンツを表示できるタイプのプラグインである必要がありますね。

>詳細情報をHTML・CSSで実装できないものばかりです。
上にも述べましたが、画像専用ではなく、コンテンツを表示できるタイプのものを選べばHTML、CSSともに利用可能と思います。
ただし、要素のコピーが表示される可能性があるので、CSSの要素指定には少しだけ注意が必要かもしれません。

>ポップアップした写真をクリックすると、外部リンクへいき、
>矢印をクリックすると次の画像が見れる仕様にできるものを探しています
通常のLightBox系のものでは、対象の指定が
 <a href="one.jpg" title="Image Caption">
  <img src="one_thumb.jpg" alt="">
 </a>
のような構造になっているものが多いと思いますので、これに対してさらにリンクを設定しようとすると、別途工夫が必要になりそうです。
それよりも、インラインコンテンツなどを表示可能なプラグインを利用なさる方が、HTMLでのリンク設定が可能になるので、扱いは楽になりそうですね。

数は少ないかも知れませんが、コンテンツ表示でグループ化できそうなものもあるようです。
配布サイトの雰囲気を見ただけで、実際にはテストしていませんので明言できませんが、例えば・・・
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto
下の方にある「Inline content」の例を見ると、複数のコンテンツをページングしていますので、このような利用方法で実現の可能性があるのではないかと推測します。

あるいは、
http://fancybox.net/home
fancyboxもコンテンツ表示が可能なプラグインですが、一番下の「manual call 」で、manual2の指定では直接に複数の画像を指定しています。
exampleは画像なのですが、対象の指定にインラインコンテンツ(またはjQuery オブジェクトやHTML要素など)を指定できるなら、同様に実現できそうに思えます。
ただし、このタイプの書式の説明がサイト内をざっと見ても見当たらなかったので、残念ながら可能なのかどうかがわかりません。

※ 簡単に調べてみただけなので、とてもお役には立たないと思いますが、少しはご参考にでもなれば・・・

こんにちは
少し調べてみただけなので、ヒントにでもなれば程度ですが・・・


>一覧の商品画像が並んでいて、その画像をクリックすると、
>その商品の他の画像も見れて、そこには、簡単な商品情報を
>写真の下にHTMLで記載できるようなタイプを探しています。
LightBox系のプラグインは数多くあるので種々様々ですが、画像のグループ化ができて、キャプションを付けられるものが多くあります。
画像グループの一つだけを表示して(残りは非表示)おいて、利用すれば似たようなことが実現可能と思います。
ただ...続きを読む

QHP作成の小窓リンクを作るには?

HPを作成していてわからないことがあります。
よくHPで画像とかを閲覧すると、小さいウインド(アドレスなどは無し)で新しいウインドウが開くことがあります。あれはどのように作成するのでしょうか?
わかるかたお願いします。

使っているソフトは、ホームページビルダー バージョン6です。

Aベストアンサー

[文字リンクの場合]
<html>
<head>
<script language=JavaScript>
<!--
function subWin1(){
window.open("アドレス","window2","resizable=no,menubar=no,directories=no,status=yes,location=no,scrollbars=yes,toolbar=yes,width=横幅,height=高さ,left=出す位置(左からの距離),top=出す位置(上からの距離)");
}
//-->
</script>
</head>
<body>
<a href="javascript:subWin1();">文字リンクの場合</a>
</body>
</html>

[画像リンクの場合]
<html>
<head>
<script language=JavaScript>
<!--
function subWin1(){
window.open("アドレス","window2","resizable=no,menubar=no,directories=no,status=yes,location=no,scrollbars=yes,toolbar=yes,width=横幅,height=高さ,left=出す位置(左からの距離),top=出す位置(上からの距離)");
}
//-->
</script>
</head>
<body>
<a href="javascript:subWin1();"><img src="画像アドレス" width="幅" height="高さ" border="0"></a>
</body>
</html>

[文字リンクの場合]
<html>
<head>
<script language=JavaScript>
<!--
function subWin1(){
window.open("アドレス","window2","resizable=no,menubar=no,directories=no,status=yes,location=no,scrollbars=yes,toolbar=yes,width=横幅,height=高さ,left=出す位置(左からの距離),top=出す位置(上からの距離)");
}
//-->
</script>
</head>
<body>
<a href="javascript:subWin1();">文字リンクの場合</a>
</body>
</html>

[画像リンクの場合]
<html>
<head>
<script language=JavaScript>
<...続きを読む

QjQueryでネスト構造の
  • がクリックされた時にそのidを取得する方法について
  • jQueryでネスト構造になっているリストがクリックされた時に、そのidを取得するプログラムを作っています。
    第一階層は取得できるのですが、第二階層の<li>をクリックすると二重に処理が動いたり、親要素の値が取得されてしまったりしてうまく動きません。

    jQueryでの取得方法を教えていただければと思います。

    [HTML部分]
    <ul id="sample">
    <li class="parent" id="1-1">項目1−1
    <ul class="children">
    <li class="chaild" id="2-1"></i>項目2-1</li>
    <li class="chaild" id="2-2">項目2-2</li>
    <li class="chaild" id="2-3">項目2-3</li>
    </ul>
    </li>
    <li class="parent" id="1-2">項目1−2</li>
    </ul>

    [jQuery部分]
    <script type="text/javascript">
    $(document).on('click', '.parent , . child', function (e) {
    var id = $(this).attr("id");
    alert(id);
    });
    </script>


    onクリックのセレクタの指定をいろいろと試してみましたが、下記のような結果となりうまく動作しません。
    ('.parent , . child')
    親は正しくidが取得できたが、子はすべて1-1となってしまい、正しく取得できない。

    ('li')
    親は正しくidが取得できたが,子は2-1と取得できてから、もう一度1-1と取得され、2回処理が動いてしまっている。

    ('.parent')
    親は正しくidが取得できたが、子は全て1-1と取得される。

    ('#sample>.parent li')
    子要素は正しく取得できるが、親要素が取得できない。

    jQueryでネスト構造になっているリストがクリックされた時に、そのidを取得するプログラムを作っています。
    第一階層は取得できるのですが、第二階層の<li>をクリックすると二重に処理が動いたり、親要素の値が取得されてしまったりしてうまく動きません。

    jQueryでの取得方法を教えていただければと思います。

    [HTML部分]
    <ul id="sample">
    <li class="parent" id="1-1">項目1−1
    <ul class="children">
    <li class="chaild" id="2-1"></i>項目2-1</li>
    <li ...続きを読む

    Aベストアンサー

    クリックしたliだけつかみたいなら、e.stopPropagation()してバブリングを抑止してください
    <script>
    $(document).on('click', 'li', function (e) {
    var id = $(this).prop("id");
    console.log(id);
    e.stopPropagation();
    });
    </script>

    <ul id="sample">
    <li class="parent" id="1-1">項目1-1
    <ul class="children">
    <li class="chaild" id="2-1">項目2-1</li>
    <li class="chaild" id="2-2">項目2-2</li>
    <li class="chaild" id="2-3">項目2-3</li>
    </ul>
    </li>
    <li class="parent" id="1-2">項目1-2</li>
    </ul>

    [jQuery部分]

    Q自分のHPがどのくらい外部のHPからリンクがはられているのか知る方法

    どなたか、ご存じでしたら教えて下さい。
    あるサイトが、他のサイトからどれくらいリンクを張られているかを、検索サイト
    から調べることができるらしいのです。
    その方法をご存じの方いらっしゃいませんか。
    例えば、A社のサイトは、D社とE社からリンクを張られているので
    「2」という具合に。)

    Aベストアンサー

    下記のURLで逆リンク検索をすると出ると思います.

    参考URL:http://www.searchdesk.com/

    QjQueryで右クリック禁止後に再度有効にする方法

    以下のコードでブラウザ上の右クリックを禁止にしましたが、
    再度再開をしたい場合どのように記述すればよろしいのでしょうか?

    $(document).bind('contextmenu', function(e) { return false; });

    jQueryのverが古いのは気にしないで下さい。
    是非宜しくお願い致します。

    Aベストアンサー

    $(document).unbind('contextmenu');

    もしくは

    var お控えください = true;
    $(document).bind('contextmenu', function(e) { return !お控えください; });
    // 再開時
    お控えください = false;

    Q庭園など写真のHPを作りたいのですが?

    庭園や公園などデジカメ写真のHPを作り
    たいのですが入場料や拝観料を払って入る
    所の写真をHPに載せても大丈夫でしょうか?

    Aベストアンサー

    撮影対象の管理事務所に、問い合わせるのが、一番、無難かと思われます。


    人気Q&Aランキング

    おすすめ情報