画像をクリックしたときにテキストを表示するための最も簡単なマークアップは何ですか?
トグル、CSSまたはJavascriptはありません。クリックしたときにキャプションを付けたい一連の親指があります。私はとても単純に見えるものを何時間も探していましたが、私はそれを理解できません。
画像をクリックしたときにテキストを表示するための最も簡単なマークアップは何ですか?
トグル、CSSまたはJavascriptはありません。クリックしたときにキャプションを付けたい一連の親指があります。私はとても単純に見えるものを何時間も探していましたが、私はそれを理解できません。
次のアプローチはかなり単純ですが、画像のキャプション テキストは、ページ内の他の何かをクリックしてリンクをたどるまでしか表示されません。(これでいいのか、という質問からはよくわかりません。)
CSS を使用して、画像のキャプション テキストを最初は非表示にします。画像をそのキャプションへのリンクにし、:target
疑似クラスを使用して、リンクがクリックされたときにキャプションが表示されるようにします。デモ: jsfiddle .
<style>
a img { border: none; }
.caption { visibility: hidden; }
.caption:target { visibility: visible; }
</style>
<a href=#capt1><img src=test1.png alt=foo></a>
<div class=caption id=capt1>Image caption text</div>
<a href=#capt2><img src=test2.png alt=foo></a>
<div class=caption id=capt2>Image caption text 2</div>
副作用として、リンクをクリックすると、ページが少し下に移動する場合があります。これが問題になる場合は、代わりに「自己参照」リンクを使用できます。
<a href=#capt1 id=capt1><img src=test1.png alt=foo><br>
<span class=caption>Image caption text</span></a>
次に、必須の CSS ルールでセレクターを変更します。
:target .caption { visibility: visible; }
これは、IE 8 以前を除くすべてのブラウザーで機能します。それらはポリフィル、つまりネイティブ サポートなしでブラウザの疑似要素へのサポートをエミュレートする JavaScript コードを使用してカバーできます。css :target、not()、および [tilde] 兄弟セレクターのポリフィルを参照してください。
this will work
<label for="toggle">
<img src="your image path" />
</label>
<input type="checkbox" id="toggle" />
<span>your text here</span>
for the CSS
#toggle{
position: absolute;
top: -9999px;
left: -9999px;
}
span{
display: none;
}
#toggle:checked + span{
display: block;
}
img{
cursor: pointer;
}
But by doing this, against semantic rule of HTML.
Here the result.
画像ごとにjQueryon()を使用してから、それらのクリックイベントを使用してキャプションの.toggleClass('visible')を実行します。
次のようなもので動作させることができるかもしれません:
<img src="myimage.png" tabindex="1" /><div class="caption">Some text!</div>
CSS:
img~.caption{display:none}
img:active~.caption{display:block}
ただし、これはせいぜいハッキーです。このようなことは、実際にはJavaScriptで行う必要があります。
方法はありますか?はい!クロスブラウザの方法はありますか?いいえ!
クロス ブラウザーまたは有効な HTML であることが心配でない場合は、次のようにするとうまくいく可能性があります。
http://jsfiddle.net/charlescarver/XRBCF/
HTML:
<input hidden/>
CSS:
input{
-webkit-appearance:none;
-o-apperance:none;
-moz-appearance:none;
-ms-appearance:none;
padding:0;
border:0;
background-image:url(http://placedog.com/400/300);
height:300px;
width:400px;
display:block;
cursor:default;
}
input:focus{
outline: none;
}
input:focus:after{
content:"TEST";
background-color:red;
height:30px;
width:100%;
display:block;
position:relative;
top:270px;
}