Chris Hinton Chris Hinton - 1 year ago 145
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}"/>

being the colour code in question (i.e. '#1f1f1f') and
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
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download