Chris Hinton Chris Hinton - 4 months ago 10
HTML Question

Img src from hex color?

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-color
property the title text (and alt text does this too) is being displayed on top of the colour as well as on hover.

Titles should not be visible here

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

Answer

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

Comments