大きな商品表があるページがあります。各製品は画像で表されます。Ctrl + Fで検索可能な画像を作成する方法
ブラウザーの「ページ内検索」機能を使用して各商品名を検索可能にしたいと考えています。製品名を検索するとき、ユーザーはそれぞれのイメージに終わるはずです。
テキストとして表示される商品名を追加することはできません（名前はすでに各画像に非常に目立っています）が、表示されないテキスト要素を追加することはできます。
これを行うには堅牢な方法がありますか？
画像の後ろにテキストを隠すのはどうですか？このようなもの。
<div class="image-block">
<div class="img-description">Some text.</div>
<img>
</div>
.image-block {
position: relative;
}
.img-description {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.image-block img {
position: relative;
z-index: 5;
}
基本的に、これはimg-description要素の上に画像を配置しますので、あなたはまだそれを検索して見つけることができます。
私はこれを試して、それが動作することを確認することができます。非常に創造的！私の考えは、（1pxのような）非常に小さいテキストを使用することでした。それはまた働いた。 – 4castle
z-indexを使用すると、画像の背後にあるテキストを非表示にすることができます。これにより、Chrome、Safari、Firefoxで検索することができます（残念ながらIEでテストできません）。
<html>
<body>
<style>
.product-image {
position: relative;
width: 100px;
height: 100px;
display: block;
overflow: hidden;
}
img.product {
position:absolute;
height: 100px;
width: 100px;
}
div.product {
z-index: -1;
position: absolute;
}
</style>
<table>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">name 1</div></div></td></tr>
<tr><td><div class="product-image"><img src="product-image.png" class="product"></img><div class="product">something else...</div></div></td></tr>
<table>
</body>
</html>
しかし、Safariで、それはあなたのユーザーが不快感を与えるかもしれ画像、背後からテキストを引き出し、FF & Chromeでうまく動作します。
同様に、CTRL + Fで 'alt'属性を使用するようにしますか？ – 4castle
@ 4castle本質的に、はい - 私はHTMLテキストとCSSで（信頼性の高い）嫌悪者には開いていますが。 –
私は本当にこれを行う方法はないと思っていますが、よりよい解決策は、あなたのページ上に画像の 'alt'属性を使って検索する検索ボックスのようなものを置くことです。あなたはJavascriptでこれを行うことができます。 –