छवियों को Ctrl + F

के माध्यम से खोजने योग्य कैसे बनाएं मेरे पास एक बड़ी उत्पाद तालिका वाला एक पृष्ठ है। प्रत्येक उत्पाद को एक छवि द्वारा दर्शाया जाता है।छवियों को Ctrl + F

मैं ब्राउज़र के "खोज में पृष्ठ" सुविधा का उपयोग करके प्रत्येक उत्पाद का नाम खोजने योग्य बनाना चाहता हूं। किसी उत्पाद नाम की खोज करते समय, उपयोगकर्ता को संबंधित छवि पर समाप्त होना चाहिए।

मैं एक उत्पाद नाम नहीं जोड़ सकता जो टेक्स्ट के रूप में दिखाई दे रहा है (नाम प्रत्येक छवि पर पहले से ही बहुत ही महत्वपूर्ण है) लेकिन टेक्स्ट तत्वों को जोड़ सकते हैं जो दिखाई नहीं दे रहे हैं।

क्या ऐसा करने का कोई मजबूत तरीका है?

स्रोत

2016-05-21 Pekka 웃

तो, CTRL + F को 'alt' विशेषता का उपयोग करें? – 4castle

@ 4castle अनिवार्य रूप से, हां - हालांकि मैं HTML पाठ और सीएसएस के साथ (विश्वसनीय) शेंगेनियों के लिए खुला हूं। –

मुझे नहीं लगता कि वास्तव में ऐसा करने का एक तरीका है, बेहतर समाधान आपके पृष्ठ पर एक खोज बॉक्स जैसा होगा जो छवियों की 'alt' विशेषता का उपयोग करके खोज करता है। आप जावास्क्रिप्ट के साथ ऐसा कर सकते हैं। –

छवि के पीछे कुछ पाठ छिपाने के बारे में कैसे? कुछ इस तरह।

<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 तत्व पर छवि रखा जाएगा, ताकि आप अभी भी खोज और इसे पा सकते हैं।

स्रोत

2016-05-21 19:37:55 GMchris

मैंने इसे आजमाया, और मैं यह सत्यापित कर सकता हूं कि यह काम करता है। बहुत रचनात्मक! मेरा विचार टेक्स्ट का उपयोग करना था जो बहुत छोटा था (जैसे 1 पीएक्स)। यह भी काम किया। – 4castle

z-index का उपयोग करके, आप छवि के पीछे पाठ को छुपा सकते हैं। यह क्रोम, सफारी और फ़ायरफ़ॉक्स के साथ खोजा जा सकता है (दुर्भाग्य से आईई में परीक्षण नहीं कर सकता)।

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

यह एफएफ & क्रोम में अच्छी तरह से काम करता है, सफारी में लेकिन यह छवि है, जो अपने उपयोगकर्ताओं कर्कश मिल सकता है पीछे से बाहर पाठ खींचती है।

स्रोत

2016-05-21 19:54:36 TZHX

छवियों को Ctrl + F

उत्तर

संबंधित मुद्दे