Img src from hex color?

Question

I need to add some alt text and/or titles to some image tags on a webpage.

The html structure is not really in my control, so image tags are required even though the tags themselves are being set to display a flat colour derived from a hex-code stored in a SQL table.

Like This

<img style="background-color:{@hexCode};" title="{@colourName}"/>

With @hexCode being the colour code in question (i.e. '#1f1f1f') and @colourName being the descriptive name for the colour chosen by the client.

The problem I'm having is that because the colour is being set by the background-colorproperty the title text (and alt text does this too) is being displayed on top of the colour as well as on hover.

Google has not given me any useful solutions and I can't just not add the titles to the images? What should I do?

Possible duplicate of [What's the valid way to include an image with no src?](http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src) — imtheman, Aug 04 '16 at 23:31

imtheman · Accepted Answer · 2016-08-04T23:19:41.593

1

Why not use divs instead. The reason that the title or alt is showing up is because they are supposed to be displayed if the image is not found, and you are not giving a src.

<div style="background-color: gold; height: 30px; width: 30px;" title="Gold"></div>

However, if you must use an img tag with no source you can use src="//:0" to fake a valid source.

<img src="//:0" style="background-color: gold; height: 30px; width: 30px;" title="Gold" />

edited Aug 04 '16 at 23:19

answered Aug 04 '16 at 23:13

imtheman

4,713
1
30
30

He said `The html structure is not really in my control` – animesh manglik Aug 04 '16 at 23:18
@animeshmanglik I must have skipped over that part. Thank you for pointing it out. – imtheman Aug 04 '16 at 23:25
2

Nothing is holy in this question... D: – TheThirdMan Aug 04 '16 at 23:35

score 0 · Answer 2 · answered Aug 04 '16 at 23:21

The problem I'm having is that because the colour is being set by the background-color property the title text (and alt text does this too) is being displayed on top of the colour as well as on hover.

No - The title and alt text is being displayed because your image is not loaded, precisely why they are used. https://jsfiddle.net/b0njy0gg/

When an image source is present https://jsfiddle.net/thajo9pL/

score 0 · Answer 3 · answered Aug 04 '16 at 23:34

I assume since you're defining img tags without a src attribute, SEO isn't one of your goals - if that's the case, the following solution of setting the font-size of your image to 0 will also affect the rendering of the alt text rendering, as you can see in this example:

img {
  border: 1px solid #aaa;
  display: block;
  font-size: 0;
  width: 200px;
  height: 50px;
}

<img alt="Test" />

For anyone concerned about w3c validity or SEO-friendlyness: Do not try this at home!

Img src from hex color?

3 Answers3