Come rendere le immagini ricercabili tramite Ctrl + F

Ho una pagina con una tabella di prodotti di grandi dimensioni. Ogni prodotto è rappresentato da un'immagine.Come rendere le immagini ricercabili tramite Ctrl + F

Vorrei rendere disponibile il nome di ogni prodotto utilizzando la funzione "cerca nella pagina" del browser. Durante la ricerca di un nome di prodotto, l'utente dovrebbe finire con l'immagine corrispondente.

Non riesco ad aggiungere un nome di prodotto che sia visibile come testo (il nome è già molto visibile su ogni immagine) ma può aggiungere elementi di testo che non sono visibili.

C'è un modo efficace per farlo?

fonte

2016-05-21 Pekka 웃

Così, fai CTRL + F a usare l'attributo 'alt'? – 4castle

@ 4castle in sostanza, sì - anche se sono aperto a (affidabile) shenanigans con testo HTML e CSS. –

Non penso che ci sia davvero un modo per farlo, una soluzione migliore sarebbe avere qualcosa come una casella di ricerca sulla tua pagina che cerca usando l'attributo 'alt' delle immagini. Puoi farlo con Javascript. –

Come nascondere un testo dietro l'immagine? Qualcosa come questo.

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

In sostanza, questo metterà l'immagine sopra l'elemento img-description, in modo da poter ancora cercare e trovare esso.

fonte

2016-05-21 19:37:55 GMchris

Ho provato questo, e posso verificare che funzioni. Molto creativo! La mia idea era di usare un testo molto piccolo (come 1px). Ha funzionato anche. – 4castle

Utilizzando z-index, è possibile nascondere il testo dietro l'immagine. Questo lo consente di essere cercato con Chrome, Safari e Firefox (sfortunatamente non è possibile testare in 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>

Funziona bene in FF & Chrome, tuttavia in Safari tira il testo da dietro l'immagine, che gli utenti possono trovare stridente.

fonte

2016-05-21 19:54:36 TZHX

Come rendere le immagini ricercabili tramite Ctrl + F

risposta

Problemi correlati