CODEWITHSUNDEEP
htmlcss
Bruno De Faria
Bruno De Faria

Reputation: 179

Replace a img using only CSS and cannot change HTML

I'm working on a project that has 2 different CSS, one light and one dark. And a few images are inside the <img> tag, and I need to change their colors, only using css, since I'M NOT ALLOWED TO CHANGE HTML OR JAVASCRIPT

So, I thought on using their ID to overlap them. I actually got the image to be on the same place, however, behind the original image.

Any ideas?

The HTML

<div id="div-icones" style="width: 164px;">

<ul id="ulIcones" class="icones">
    <li>
        <a href="#" class="" title="Trocar para a versão simplificada" onclick="ChangeVersionHB('min');">
            <img title="Trocar para a versão simplificada" id="imgChangeVersion" src="images/ico_hb_min.png" width="16" height="16">
        </a>
    </li>
    <li>
        <a href="#" class="" title="Salvar Configuração" onclick="saveCfg();">
            <img title="Salvar Configuração" id="imgSave" src="images/ico_sv.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Restaurar Configuração Padrão" onclick="resetCfgDefault();">
            <img title="Restaurar Configuração Padrão" id="imgConfDefault" src="images/folder_image.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Bloquear funções de Layout" onclick="oSTBroker.fixLayout();">
            <img title="Bloquear funções de Layout" id="imgCadeado" src="images/lock_open.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Configuração do Cliente" onclick="showCfgCli();">
        <img title="Configuração do Cliente" id="imgCliCfg" src="images/ico_cg.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Teclas de Atalho" onclick="showHotkeys();">
        <img title="Teclas de Atalho" id="imgHotkeys" src="images/ico_hk.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Manual" onclick="AbrePagina(ConfigHB.urlManual, 'WINmn', '', 'no', 'yes', '780', '560', false);">
        <img title="Manual" id="imgAjuda" src="images/ico_aj.png" width="16" height="16">
            </a>
        </li>
    <li>
        <a href="#" class="" title="Seleciona CSS" onclick="AbrePagina('LstEstilos.aspx', 'LstEstilos', '', 'no', 'yes', '780', '300', false);">
            <img title="Selecione o layout" id="imgSelCss" src="images/ico_ml.png" width="16" height="16">
        </a>
    </li>
</ul>

My CSS to change the image

#imgChangeVersion {

box-sizing: border-box;
background: url(images/ico_hb_minc.png);
background-size: 16px;

}

Upvotes: 2

Views: 108

Answers (3)

Stickers
Stickers

Reputation: 78686

Since you cannot have pseudo elements with <img> tag (although it might work in some browsers, but it's certainly non-standard). So you'll have to use parent selectors if they have unique classes, ids or attributes.

In your example, all the <a> have different title values. So you can do:

a[title="Trocar para a versão simplificada"] {...}
a[title="Trocar para a versão simplificada"] img {...}

a[title="Salvar Configuração"] {...}
a[title="Salvar Configuração"] img {...}

You can hide the img by applying display:none (collapse) or visibility:hidden (keep space).

Then apply background image on each a tag, you probably also want to set it to display:block or inline-block and give it some width and height.

Upvotes: 2

Tim Willis
Tim Willis

Reputation: 51

Sounds like you should use the solution that was described in some of the comments on the initial question along with css selectors like nth-of-type() or nth-child() since your <a> tags don't have classes.

img {
   display: none;
}
a:nth-of-type(){
   background-image: url('');
   width: 16px;
   height: 16px;
}

Read up on the nth-of-type selector and nth-child selector

Also consider using + selector to target <a> elements immediately within <li> elements such as:

li + a:nth-of-type(){
    background-image: url('');
    width: 16px;
    height: 16px;
}

In both of these solutions make sure to put a number inbetween the parentheses following nth-of-type, i.e. nth-of-type(3) to target the 3rd element.

Upvotes: 0

itailitai
itailitai

Reputation: 459

Try using the "content" property, like so:

#imgChangeVersion {
box-sizing: border-box;
content:url(images/image.png); /* change image here */
background-size: 16px;
}

JSFiddle

Upvotes: 0

Related Questions