プロが教える店舗&オフィスのセキュリティ対策術

元が小さい画像をクリックしたら別窓が開いて大きくなる、
あれはどうやってできるのでしょうか?
ブログの中で使ってみたいのですが

A 回答 (3件)

小さい画像を拡大すると画質が悪くなってしまいますので、


元々大きい画像を小さく表示して、
クリックしたら別窓で元のサイズが表示されるというのが適切でしょうか。

やり方としては#1さんのように
<a href="元の画像のURL" target="_blank">
<img src="元の画像のURL" width="小さく表示するときの横幅" height="縦幅" alt="画像の説明">
</a>

なお#2さんがおっしゃっているように、
ドキュメントタイプがxhtmlで、xhtmlがどうとかに気を向けるのでしたら、
target属性はあまり使わないほうがいいので、次のようにしたほうが良いでしょう。

<a href="元の画像のURL" onClick="window.open('元の画像のURL,'subwin','width=800,height=600'); return false;">
<img src="元の画像のURL" width="小さく表示するときの横幅" height="縦幅" alt="画像の説明" />
</a>
    • good
    • 0

別窓で開くには、target="_blank"が必要です。

全体的には以下のタグで表示出来ます。テキストリンクを別窓で開く場合も target="_blank"が使えます。大きい画像を別窓で開く実際のタグは以下のように指定して下さい。


<a href="大きい画像" title="クリックすると拡大します" target="_blank"><img src="小さい画像" width="" heigth="" alt="" /></a>

大きい画像
新しいウィンドーで開く部分

小さい画像
元のページに表示させる部分

サイズ
width="" heigth=""の部分は小さい画像を右クリックしプロパティで確認出来ます。そこの高さをheigthへ、幅をwidthの次の""の間に"100px"のような感じでサイズ指定をします。

alt="" には画像の代替文字を入れます。
alt="腕時計"という感じです。
xhtmlとhtmlで画像のタグの閉じ方が違うので気を付けて下さい。
上のタグではxhtmlのサンプルです。
htmlの場合は
「 /></a>を→/></a>」に変更して下さい。
スラッシュの前に半角スペースが有る方がxhtmlの閉じ方です。
    • good
    • 0

JAVAやFLASHなどのスクリプトを使ってカッコよくやる方法もありますが、ブログですと制限も多いと思いますので一番簡単でどのブログでも出来る方法としては。



Aという大きな画像があるとします、これをWEB上にアップロードしてアップロードしたWEB上のアドレスを控えてから下記のようにブログの記事に記述します。
<a href=Aの画像があるURL><img src=Aの画像があるURL with=50 high=50></a>
with= high=には表示させたい大きさの数値を入れてください。
クリックすると元の大きさの画像を見ることができます。
    • good
    • 0

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