CODEWITHSUNDEEP
htmlcss
Pekka
Pekka

Reputation: 449455

How to make images searchable via Ctrl+F

I have a page with a large products table. Each product is represented by an image.

I would like to make each product name searchable using the browser's "search in page" feature. When searching for a product name, the user should end up at the respective image.

I can not add a product name that is visible as text (the name is already very prominently on each image) but can add text elements that are not visible.

Is there a robust way to do this?

Upvotes: 13

Views: 7721

Answers (4)

Tadeu Marques
Tadeu Marques

Reputation: 844

Providing here a new alternative, taking into consideration accessability:

<div style="position: relative;">
  <img 
      src="path/to/some-house-image.jpg" 
      alt="House floor plan" 
      aria-describedby="house-description"
  />
  <p id="house-description" class="visually-hidden">
      Detailed description of the house floor plan...
  </p>
</div>

with css being:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  top: 0;
  left: 0;
}

This way you'll find the text there, behind the image, with proper accessability

Upvotes: 0

GMchris
GMchris

Reputation: 5648

How about hiding some text behind the image? Something like this.

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

Basically, this will put the image over the img-description element, so you can still search and find it.

Upvotes: 3

Codemonkey
Codemonkey

Reputation: 4807

The solutions here have the problem that the user can't tell they've found something, since the text they're searching for is hidden behind the image. If there's 12 images on screen, it's not obvious which one has matched their search.

I do something similar, but I just have transparent text above the image. <p style="color:transparent">My product title</p>.

That way when the browser scrolls to the right region, the user can also see a blue selection growing around the text as they type it.

(In Chrome at least, the "transparent" text becomes visible once it's selected)

Upvotes: 2

TZHX
TZHX

Reputation: 5377

Using z-index, you can hide the text behind the image. This lets it be searched for with Chrome, Safari and Firefox (unfortunately can't test 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>

It works well in FF & Chrome, however in Safari it pulls the text out from behind the image, which your users may find jarring.

Upvotes: 1

Related Questions