No.3ベストアンサー
- 回答日時:
そういうことをやろうとした友人のために書いた簡単なコードがある。
勝手に使いやがれ…ではなくて宜しければどうぞ(ぉ
★サムネイル画像をクリックするとポップアップウインドウが開いて画像が表示されます。
★JavaScriptが無効となっている場合は画像を直接新しいウインドウで開きます。
☆これをHTMLファイルの<head>~</head>間にコピーしてね
<script type="text/javascript">
<!--
function PIC_OPEN(image,width,height){
var PIC;
PIC=window.open("","_blank","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width="+ width +",height="+ height +"");
PIC.document.open();
PIC.document.write("<html>\n<head>\n<title>Garelly</title>\n");
PIC.document.write("</head>\n");
PIC.document.write("<body topmargin='40'>\n");
PIC.document.write("<center>\n<img src='"+ image +"'>\n");
PIC.document.write("<hr>\n");
PIC.document.write("<a href='javascript:window.close();'>Close</a>\n</center>\n");
PIC.document.write("</body>\n");
PIC.document.write("</html>\n");
PIC.document.close();
}
//-->
</script>
★<title>Garelly</title>は開かれるポップアップウインドウのタイトル部分。適宜変更。
★topmargin='40'がページ上部の余白設定
☆サムネイルの部分をこういう風に書こうね
<a href="image01.png" target="_blank" onclick="PIC_OPEN('image01.png','400','450');return false;"><img src="image01_s.png" border="0"></a>
★image01.pngが表示させたい画像(※二ヶ所あります)
★image01_s.pngがimage01.pngのサムネイル画像
★PIC_OPEN('image01.png','400','450');の部分は
★image01.pngが表示させたい画像のパスまたはファイル名
★400が開かれるポップアップウインドウの幅、画像の幅+100位を目安にどうぞ
★450が開かれるポップアップウインドウの高さ、画像の高さ+150を目安にどうぞ
No.2
- 回答日時:
steel_grayさんも指摘されてますが、一つのhtmlページで(ページを切り替えずに)画像を切り替え表示させたいようでしたら、javascriptを使わないとできないと思います。
lightboxというのは画像閲覧などのために一般公開されているjavascriptのコード(ライブラリ)です、ググってみれば使用方法などもたくさん出てきますよ。
それか、ちょっと高度な方法であればcssのa:hoverを使って表示させる方法もありますけど、、、ちょっとむずいと思います。
No.1
- 回答日時:
画像だけを変えるなら、HTMLではなく画像を直接リンクしては?
説明文とか画像以外も変える必要があるならもちろんHTMLとして個別に作る必要があります。
HTMLにリンクして表示したい理由が、サイズ指定したウィンドウに開きたい、とかって事なら「Lightbox」とか使った方がいいかと思う。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
期間ごとに画像表示を切り替え...
-
画像クリックでクリップボード...
-
ボタンを押したままにする。
-
バナーのURLについて
-
[twip]から[pixel]への変換
-
クリッカブルMAP領域が分かる様...
-
web制作中にQRコードを入れるには
-
背景が透明なリンクボタンで、...
-
pngやjsの後ろの英数字の意味は...
-
画像にリンクするには? 説明す...
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
元々あるファビコンが消えない
-
画像サイズをHTMLタグやCSSで統...
-
IMGタグでTIFF画像を表示
-
予約語の表示について
-
複数のボタンで1つのエリアに...
-
thickboxでcloseボタン右上配置...
-
Webサイト制作について相談です。
-
クリッカブルマップがうまく使...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
フォルダ内の画像をウェブでラ...
-
期間ごとに画像表示を切り替え...
-
pngやjsの後ろの英数字の意味は...
-
onmouseoverに複数の命令を書き...
-
「DecareステートメントにPtrSa...
-
リンク先にしているページを小...
-
画像クリックでクリップボード...
-
IE11にてonclickの動作不良
-
[twip]から[pixel]への変換
-
HTMLだけで画像をクリックして...
-
アルバムをめくるように、画像...
おすすめ情報