PNG als aanklikbare knop gebruiken

[Molovhic]

Hallo

Ik heb een tabel met daar wat icoontjes in zoals hieronder afgebeeld, de icoontjes zijn grijs als zijnde "niet ingevuld/geklikt".

Bedoeling is dat als ik met de muis erover ga dat deze dan een kleur krijg (eigenlijk wordt het een andere png die in mijn images map zit)

Als ik erop klik dan moet deze veranderen in de 2de png die kleur bevat, klik ik nog eens gaat deze terug naar de eerste png met grijswaarden..



Dit is mijn code hoe de html eruit ziet, ik weet echter niet hoe ik van de png's een aanklikbare knop kan maken
Het zou super zijn moest iemand mij op weg helpen...

<td data-label="Alert" class="alertmeldingen"><a href="#"><img src="images/alert2.png" alt="alert" id="Alert" class="alertclass" width="30px" height="30px"></a></td>
			<!-- Kolom met n/a, ok, n.ok 3figuren -->
			<td data-label="Acceptable" class="acceptablemeldingen">
				<img src="images/na.png" alt="Not Applicable" id="na" width="30px" height="30px">
				<img src="images/checked2.png" alt="Checked" id="checked" width="30px" height="30px">
				<img src="images/error2.png" alt="Error" id="error" width="30px" height="30px">
			</td>
			<!-- Kolom met comment en apparaat, foto 2figuren -->
			<td data-label="Comments" class="commentsmeldingen">
				<img src="images/comment2.png" alt="Comment" id="comment" width="30px" height="30px">
				<img src="images/camera2.png" alt="Camera" id="camera" width="30px" height="30px">
			</td>

 

[bron]

Dit is een voorbeeld.

html

<table>
  <tr>
    <td class="imgHover">
      <img src="images/foto1-color.jpg" class="imgColor" alt="foto" width="200" height="150">
      <img src="images/foto1-white.jpg" class="imgWhite" alt="foto" width="200" height="150">
    </td>
  </tr>
</table>

css

.imgHover {
  position: relative;
  vertical-align: top;
  line-height: 1;
}
.imgHover img {
  display: block;
  position: absolute;
  top: 0; left: 0;
}
.imgWhite:hover,
.imgWhite:active {
  opacity: 0;
}

Suc6. Have fun.

 

[bron]

Je kan ook de iconen afbeelding (als background-image) telkens van positie laten veranderen.
Voordeel is dat pagina iets sneller laadt. Nadeel is dat je veel moet meten om alles goed te krijgen.

 

[Molovhic]

Hoi, dit zijn idd goede voorbeelden.
Echter lost dit mijn probleem niet helemaal op, de iconen moeten "aanklikbaar" zijn.
Pas als er op geklikt wordt gaat deze moeten veranderen in een andere png
Gr

 

[bron]

Eerste voorbeeld. De regel .imgWhite:hover, weghalen.

.imgWhite:hover,
.imgWhite:active {
  opacity: 0;
}

Tweede voorbeeld. Wijzigen in .backgrImage:active

.backgrImage:hover {
  background-position: -110px -36px;
}