Görüntülerin Ctrl + F aracılığıyla nasıl aranabilirim?

Büyük ürünler tablosu olan bir sayfam var. Her ürün bir görüntü ile temsil edilir.Görüntülerin Ctrl + F aracılığıyla nasıl aranabilirim?

Tarayıcının "sayfadaki arama" özelliğini kullanarak her ürün adını aranabilir hale getirmek istiyorum. Bir ürün adı ararken, kullanıcı ilgili görüntüde sona ermelidir.

Metin olarak görülebilen bir ürün adı ekleyemiyorum (ad zaten her görüntüde çok belirgindir) ancak görünmeyen metin öğeleri ekleyebilir.

Bunu yapmanın sağlam bir yolu var mı?

kaynak

2016-05-21 Pekka 웃

Yani, CTRL + F 'alt' özniteliğini kullanın? – 4castle

@ 4castle aslında, evet - HTML metin ve CSS ile (güvenilir) shenanigans açık olmasına rağmen. –

Gerçekten bunu yapmanın bir yolu olduğunu düşünmüyorum, sayfanızda görüntülerin "alt" özelliğini kullanarak arama yapan bir arama kutusu gibi bir şey olması daha iyi bir çözüm olacaktır. Bunu Javascript ile yapabilirsin. –

Resmin arkasındaki metni gizlemeye ne dersiniz? Böyle bir şey.

<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; 
}

Temelde, bu img-description öğenin üzerine resim koymak, bu yüzden hala arama ve bulabilirsiniz.

kaynak

2016-05-21 19:37:55 GMchris

Bunu denedim ve çalıştığını doğrulayabilirim. Çok yaratıcı! Benim fikrim çok küçük (1px gibi) olan metinleri kullanmaktı. Ayrıca çalıştı. – 4castle

z-index'u kullanarak, resmin arkasındaki metni gizleyebilirsiniz. Bu, Chrome, Safari ve Firefox ile aranabilir (maalesef IE'de test yapamaz).

<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>

O FF & Chrome'da çalışır ancak Safari'de bu kullanıcıların sarsıcı bulabilir görüntü arkasından metni çeker.

kaynak

2016-05-21 19:54:36 TZHX

Görüntülerin Ctrl + F aracılığıyla nasıl aranabilirim?

cevap

İlgili konular