小さな画像をクリックすると、
ポップアップウィンドウで大きな画像が見れる、というものを作りました。
DREAMWEAVERのビヘイビア→ブラウザウィンドウをクリックで開く、としたのですが、
これですとその画像をクリックしたら大きな画像が見れる、ということは一見分かりません。
普通のリンクですと、マウスが乗っただけでカーソルが変わるので
リンクされていると分かりますよね?
そんな感じでカーソルが変わる等、分かりやすくする方法はないでしょうか?
文字のポップアップ表示、もやってみましたが、気付きにくく、イマイチでした。
初心者なので、訳のわからない質問かもしれませんが、
ご教授頂けると嬉しいです。
No.2
- 回答日時:
横槍ですが補足。
> 画像のまわりに枠線を表示する
> 枠線の色を変える
コレを使う場合は互換性などの問題に気をつけてください。
http://www6.atwiki.jp/uriaplus/pages/33.html#ex6
http://www6.atwiki.jp/uriaplus/pages/33.html#ex12
> 小さな画像を大きな画像の一部を切り取ったものにする。
> 小さな画像内に「CLICK!」という文字を足してみる。
> 小さな画像をモノクロにする。
> 小さな画像(の一部又は全体に)にモザイクをかける。
CSS でモザイクやモノクロ処理を施せる方法はありますが、特定環境でしか動作しません。
画像そのものを加工しておくといいのではないかと思います。
また、サムネイルとして表示する画像は width 属性などで縮小せず、
画像そのものを縮小した状態にしておいてください。ユーザー側の負担を減らすことが出来ます。
No.1ベストアンサー
- 回答日時:
リンクのようにマウスカーソルを乗せるとカーソルの形状が変わるようにするにはCSSを使えば可能です。
CSSについて検索して調べてみてください。
カーソルの形状を変えるほかにマウスを乗せたら
画像のまわりに枠線を表示する
枠線の色を変える
画像の位置を微妙にずらす
など、それがリンクである事を主張させる効果を色々つけることもできます。
テキストのリンクについての解説がほとんどですが「リンク 装飾」といったキーワードで検索すると様々なサンプルが見つかると思います。中には画像リンクに応用できるものもあると思います。
また、多くの場合単純に全体を縮小した画像にしていますが、小さな画像自体を工夫するという方法もあります。
小さな画像を大きな画像の一部を切り取ったものにする。
小さな画像内に「CLICK!」という文字を足してみる。
小さな画像をモノクロにする。
小さな画像(の一部又は全体に)にモザイクをかける。
等々。それが実物の代用である事を主張すればクリックする事を促す効果があります。
確実に利用者に伝える事が重要であれば画像をクリックする事で拡大画像を表示するのではなく、テキストで「拡大画像を表示」と、別にリンクを用意した方がいいかもしれません。(商用サイトの商品画像などはこのパターンが多いようです。)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 2つのウィンドウ選択時の表示について 10 2023/07/25 08:48
- その他(IT・Webサービス) どうすればgoogleのポップアップの表示が消えますか? 3 2022/09/11 14:04
- その他(クラウドサービス・オンラインストレージ) firestorage_androidスマホでダウンロードできない 1 2022/10/25 08:18
- その他(プログラミング・Web制作) pythonで、tkinterとpillowの組み合わせ 2 2022/08/16 17:42
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Windows 10 (緊急)windowsのタスクバーやアプリ?が反応しない 3 2023/03/28 05:03
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- PDF 保存したPDFファイルが開けなくなり、困っています 1 2022/09/15 21:08
- Chrome(クローム) googleアカウントのアイコンをローマ字または漢字で表示させたい 2 2023/05/06 22:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでのpdf資料のリンク方法
-
サムネイル(画像)をクリックす...
-
form以外でのpostってできますか?
-
同じページの最上部へ戻るボタ...
-
クリックしても、リンクに飛ば...
-
[twip]から[pixel]への変換
-
リンクバナーのHTMLタグ。画像...
-
【OpenCV】BGRからHSVへの画像変換
-
マウスオーバーで薄いホワイト...
-
背景が透明なリンクボタンで、...
-
IMGタグでTIFF画像を表示
-
PerlのCGIの中で画像表示(html)
-
htmlでのページの作り方を教え...
-
透過GIFが表示されないんで...
-
画像を重ねて表示したい
-
HTMLのレイヤーとは?
-
gooの無料ホームページへアップ...
-
サムネイル画像をクリックする...
-
【PHP+lightbox2】 キャプショ...
-
alt属性を付けるとは?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
IMGタグでTIFF画像を表示
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
拡張子無しで画像を表示したいです
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
クリックしても、リンクに飛ば...
-
予約語の表示について
-
HTMLでデスクトップの画像がでない
-
崩れたレイアウトが更新すると...
-
カーソルを合わせると文字が出...
-
カウンターのHTMLソースを教え...
-
画像クリックでクリップボード...
-
tifファイルが表示されない
-
IFRAME内に収まるように画像を...
おすすめ情報