【html】画像にリンクをつける

2023/11/03 00:31

このQ&Aのポイント

html、css、javascriptに関する質問です。ページ内の画像にリンクをつける方法について教えてください。
画像をクリックした際に他のページに飛ばすリンクの付け方はわかるが、それぞれの説明欄が表示される方法がわかりません。
また、クリックによって透過度を変える方法についても教えていただきたいです。

ベストアンサー

【html】画像にリンクをつける

2016/07/19 02:01

ｈｔｍｌ,css,javascriptに関する質問です。ページ内の左半分に人間のシルエットの画像がありその頭の部分、体の部分、手の部分をクリックするとそれぞれの説明欄が同じページの右半分に表示されるというコードを書きたいのですがなかなかうまく行きません。説明欄を初め透過度を0にしておいて画像をクリックすると透過度を１にさせるようにしようと思っています。しかしそもそも画像をクリックすることが出来ません。画像をクリックし他のページに飛ばすリンクの付け方はわかるのですが目的のことができないです。ご存知でしたらその書き方を教えて欲しいです。 <img class="kao" src="img/kao.jpg" alt=""> またjavascriptを用いてクリックによって透過度を変えるという考えですが知識がないのでこれ以上のものを思いつきません。もっと効率の良いものがあればそれも教えていただきたいです。よろしくお願いします。

mist55
お礼率72% (180/247)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

sub_sub
ベストアンサー率65% (15/23)

2016/07/22 16:25 回答No.1

例えばJAVASCRIPTでもできますがめちゃくちゃ簡単にとりあえず設置したい！　という形であれば右側の説明文の所に背景透過のIFRAME置いてしまう　っという方法もあります。 http://www.tagindex.com/stylesheet/frame/background_color2.html 左側に普通にリンクを設置してリンク先のiframeに説明を表示させてしまう形です。 ※margin paddin bordernなどは0　スクロールバーなども消しておく javascriptで書く場合はここが参考になるかと思います。ボタンをリンクにして右半分の画像を置き換えればOKです。 http://weboook.blog22.fc2.com/blog-entry-6.html

質問者

お礼 2016/07/24 19:18

解決しました！！わかりやすい解説、サイトの紹介ありがとうございました。

関連するQ&A

画像をひとつにするには・・・？
$kao = $_POST["kao"]; $karada = $_POST["karada"]; if($kao != "" && $karada != ""){ echo "<center><img src='$kao'></center>"; echo "<center><img src='$karada'></center><br>"; } というように、顔と体の画像を表示させたらふたつの画像として表示されますが、これをひとつの画像とするにはどうしたらよいのでしょうか？回答お願いします！！
- ベストアンサー
- PHP
画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。下記は、現在のソースです。（あまり関係ないと思う部分は省いてます）回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>
- ベストアンサー
- その他([技術者向] コンピューター)
画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。下記は、現在のソースです。（あまり関係ないと思う部分は省いてます）こういうことに関してはまったくの素人です・・・。回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>
- 締切済み
- JavaScript
曜日毎に（画像＋リンク）を変えたい
java練習中の物です。曜日毎に画像とリンクを合わせて変えていきたいのですが画像がうまく表示されません。どなたかわかるかたお願いします。 <script type="text/javascript"> <!-- var jmp = new Array(); var myimg = new Array(); jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://dailynews.yahoo.co.jp/fc/local/kirishima_volcano/?1296624971"; jmp[2] = "http://okwave.jp/qa/q5601548.html"; jmp[3] = "http://www.bb-roller.net/king/reason.php?bd=mf_011"; jmp[4] = "http://javascript.eweb-design.com/0804_ri.html"; jmp[5] = "http://www.yahoo.co.jp/"; jmp[6] = "http://www.livedoor.com/"; myimg[0] = '<img src="img/1.jpg" alt="日曜日">'; myimg[1] = '<img src="img/2.jpg" alt="月曜日">'; myimg[2] = '<img src="img/3.jpg" alt="火曜日">'; myimg[3] = '<img src="img/4.jpg" alt="水曜日">'; myimg[4] = '<img src="img/5.jpg" alt="木曜日">'; myimg[5] = '<img src="img/6.jpg" alt="金曜日">'; myimg[6] = '<img src="img/7.jpg" alt="土曜日">'; var mynow = new Date(); var myweek = mynow.getDay(); document.write("<a href='"+jmp[myweek]+"'><img src="+myimg[myweek]+"></a>"); </script>
- 締切済み
- JavaScript
画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます）回答の方、宜しくお願い致します。  <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'>  </script>  <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head>  <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div>  </div>  <div class="work-bottom">  <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a>  </div>  </div> </div> </div>
- ベストアンサー
- JavaScript
画像をクリックするとリンクを取得
<a href=""><img src="" alt=""></a> こういうタグの場合画像をクリックしただけで、その画像に貼られているリンクが、コピーできるっという jsってないでしょうか？
- ベストアンサー
- JavaScript
こんにちは、javascriptにてボタンを押すと画像が透明度が下がる
こんにちは、javascriptにてボタンを押すと画像が透明度が下がる動きを作っています。ボタンを押すとフェードアウトはできるのですが、フェードアウトした画像を元の透明度にフェードインすることが出来ません。 if文のclassに書かれている変数の扱いがよくわからないので、質問させて頂きました。 forで回してカウントから取得してみようかと,すべての画像に<p class＝"fade1">のようなタグをすべての画像に付けて、javascript記述できればと思っていましたが、classの指定が $(".fade+i img")等と指定してみましたが、動きませんでした。適切な方法がありましたら、教えてください。よろしくお願いします。【html】 <div class="thumbnail"> <img src="g_images/IMG_1470.jpg" alt="画像1" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02564.JPG" alt="画像2" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02227.JPG" alt="画像3" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02555.JPG" alt="画像4" class="item-image" hspace="5" vspace="3" /> <img src="g_images/DSC02558.JPG" alt="画像5" class="item-image" hspace="5" vspace="3" /> </div> 【javascript】 $(document).ready( function(){ $(".thumbnail img").click(function(){ if($(".thumbnail img").css("opacity")!=1.0){ $(".thumbnail img").fadeTo("normal", 1.0); // マウスオーバーで透明度を60%にする } $(this).fadeTo("normal", 0.4); // マウスオーバーで透明度を60%にする }); });
- ベストアンサー
- JavaScript
リンクで画像を置き換えたい
初心者ですが、よろしくお願いします。たとえば 001.jpg 002.jpg 003.jpg という３つの画像ファイルがある場合に、 ---------------------------------- <html> <body> ～省略～ <a href = "#" onclick = "change_img(1)">画像1</a> <a href = "#" onclick = "change_img(2)">画像2</a> <a href = "#" onclick = "change_img(3)">画像3</a> <img src = "XXX.JPG> </body> </html> ---------------------------------- のような感じで画像１，２，３のリンクをクリックすることで、ページ切り替えるのではなく、 XXX.JPGの部分のみ切り替えるscriptを考えているのですが、ご教授願いないでしょうか？要望としては、切替候補の複数の画像はページをロードしたときに最初に全て読み込んでおいて、リンククリック時の画像の切替をスピーディにしたいと考えています。サンプルの上記例にそくしたサンプルのコードなどを回答いただけると助かります。よろしくお願いいたします。
- ベストアンサー
- JavaScript
テキストリンクで
バナータグって、↓のとおりですよね。 <a href="サイトURL" target="_blank"><img src="画像URL" width="幅" height="高さ" alt="説明"></a> テキストリンクだと、<img～>のところがぬけますよね。ですが、どうしてもテキストリンクで alt="説明" の部分をいれたいんです。どうすれば表示されますか?? テキストリンクでは説明はでないのでしょうか?? 説明が分かりにくいかもしれませんが、よろしくお願いします。
- ベストアンサー
- ブログ
画像の入れ替え
先日、ここで質問をして、javascript を使って画像を入れ替える方法を教えてもらいました。 <script type="text/javascript">  </script> … <img src="a.jpg" alt="画像" onclick="toggle(this)"> ということだったのですが、これだと２枚の画像しか入れ替えることができないので、３枚の画像を入れ替えようと、img.src= img.normal ? 'a.jpg' : 'b.jpg': 'c.jpg';と書いてみたのですが、スクリプトエラーが出てしまって、うまくいきません。どのようにすれば、３枚以上の画像を入れ替えることができるでしょうか？ABCDEF→ABCDEFのように変っていくようにしたいのですが。よろしくお願いいたします。
- ベストアンサー
- JavaScript