ポップアップウィンドウを気付かせたい

質問

小さな画像をクリックすると、
ポップアップウィンドウで大きな画像が見れる、というものを作りました。

DREAMWEAVERのビヘイビア→ブラウザウィンドウをクリックで開く、としたのですが、
これですとその画像をクリックしたら大きな画像が見れる、ということは一見分かりません。

普通のリンクですと、マウスが乗っただけでカーソルが変わるので
リンクされていると分かりますよね？
そんな感じでカーソルが変わる等、分かりやすくする方法はないでしょうか？

文字のポップアップ表示、もやってみましたが、気付きにくく、イマイチでした。

初心者なので、訳のわからない質問かもしれませんが、
ご教授頂けると嬉しいです。

回答No.1

steel_gray · ベストアンサー

リンクのようにマウスカーソルを乗せるとカーソルの形状が変わるようにするにはCSSを使えば可能です。
CSSについて検索して調べてみてください。

カーソルの形状を変えるほかにマウスを乗せたら
画像のまわりに枠線を表示する
枠線の色を変える
画像の位置を微妙にずらす
など、それがリンクである事を主張させる効果を色々つけることもできます。

テキストのリンクについての解説がほとんどですが「リンク 装飾」といったキーワードで検索すると様々なサンプルが見つかると思います。中には画像リンクに応用できるものもあると思います。

また、多くの場合単純に全体を縮小した画像にしていますが、小さな画像自体を工夫するという方法もあります。
小さな画像を大きな画像の一部を切り取ったものにする。
小さな画像内に「CLICK!」という文字を足してみる。
小さな画像をモノクロにする。
小さな画像（の一部又は全体に）にモザイクをかける。
等々。それが実物の代用である事を主張すればクリックする事を促す効果があります。

確実に利用者に伝える事が重要であれば画像をクリックする事で拡大画像を表示するのではなく、テキストで「拡大画像を表示」と、別にリンクを用意した方がいいかもしれません。（商用サイトの商品画像などはこのパターンが多いようです。）

お礼

CSSでできました！
ありがとうございます。

回答No.3

tany180sx

dreamweaverは分からないので的外れかもですが、

<img src="thumbx.jpg" onclick="open()" />
となっているのなら

<a href="bix.jpg" onclick="open();return false;" target="_blank"><img src="x" /></a>
とすれば普通のリンクと同じ感じになります。
またJavascriptOffでも動きます。

お礼

ありがとうございます。
いろんなやり方があるのですね。

回答No.2

noname#19206

横槍ですが補足。

> 画像のまわりに枠線を表示する
> 枠線の色を変える
コレを使う場合は互換性などの問題に気をつけてください。
http://www6.atwiki.jp/uriaplus/pages/33.html#ex6
http://www6.atwiki.jp/uriaplus/pages/33.html#ex12

> 小さな画像を大きな画像の一部を切り取ったものにする。
> 小さな画像内に「CLICK!」という文字を足してみる。
> 小さな画像をモノクロにする。
> 小さな画像（の一部又は全体に）にモザイクをかける。
CSS でモザイクやモノクロ処理を施せる方法はありますが、特定環境でしか動作しません。
画像そのものを加工しておくといいのではないかと思います。
また、サムネイルとして表示する画像は width 属性などで縮小せず、
画像そのものを縮小した状態にしておいてください。ユーザー側の負担を減らすことが出来ます。

お礼

ありがとうございます。
いろいろルールがあるのですね。
勉強になりました。