CODEWITHSUNDEEP
htmlcss
Forest
Forest

Reputation: 938

Silently hiding icon if the image can't be loaded

On the website that I'm working on, there is a menubar which includes several options with icons next to them. These icons are purely decorative, and don't need alt text as a result.

Unfortunately, the images have styles - a margin set which correctly aligns them in the menubar, which is 30px high.

This is the code for the button itself (the icon is 32x32px, but is resized down to 16x16px):

<a class="button" href="#">
    <img src="images/crosshair.png" alt="">
    <span>Track and Trace</span>
</a>

The CSS:

.button {
    display: block;
    padding: 3px 8px;
    background: #343434;
    text-decoration: none;
    color: #ececec;                     
    font-size: 0; // used by inline-block
}
.button img {
    display: inline-block;
    vertical-align: top; // needed to align the image properly; I couldn't find a better way.
    height: 16px;
    border: 0;
    font-size: 16px;
    margin: 4px 6px 4px 0;
}
.button span {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
}
.button:hover {
    background: #2E2E2E;
}

When the image doesn't load, this has the effect of leaving a space because of the margin.

What do other people do when they want to have an icon disappear completely if it can't be loaded?

Upvotes: 0

Views: 37

Answers (1)

Dave Draper
Dave Draper

Reputation: 1845

You could make use of the "onerror" attribute of the the "img" element to call a function that sets display: none on the outer "a" element.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Upvotes: 1

Related Questions