HTMLページに、CSSのvisibility: hidden
で非表示に設定した画像を掲載しています。このリンクをクリックすると画像が表示されるようにしたいと思います。
通常、<a href=...>
の付いたリンクは他のページにリンクするので、どうやってそのようなリンクを作ればいいのかわかりません。私の場合は、画像を表示するためのJavaScriptを起動するようなリンクにしたいのです。
すでに、画像を表示するためのshowImage
というJavaScriptの関数が定義されている場合は、そのようにリンクすることができます。
<a href="javascript:showImage()">show image</a>
もし、関数の定義に助けが必要な場合は、試してみます。
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
あるいは、もっといい方法があります。
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
そうすると、あなたのリンクは
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
それはとてもシンプルなことです。
HTMLです。
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScriptです。
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSSです。
#theImage { visibility: hidden; }
以下はその例です。
(jQueryを使用)<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});