Zmiana obrazka po najechaniu myszką

Question

Witam.
Pracuje nad stroną internetową i mam pewien problem.
Chcę osiągnąć taki efekt, że gdy po najechaniu na wybrany kafelek zmieni się obrazek tego kafelka na inny ( grafikę już stworzyłem ).
Na chwile obecną doszedłem do tego że po najechaniu na kafelek wyświetla mi oba obrazki które się przesłaniają.
Chciałbym natomiast żeby obrazek zmienił się całkowicie, przysłaniając ten który widzimy gdy myszka jest poza ikoną/kafelkiem.


Kod z pliku .html 

<div class="tile15">
<a href="kontakt.html" class="tilelink"><i class="icon-mail"></i>
<br>Kontakt </br>
</div>

Kod z pliku .css

tile15
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	background-repeat: no-repeat;
	float: left;
	text-align: center;
	
	}
	.tile15:hover
{
background-image: url("koperta_open.jpg");
background-repeat: no-repeat;
}

Co powinienem zmienić aby wreszcie uzyskać pożądany efekt?


Pozdrawiam.
 

Answer 1

Nie prościej będzie ustawić ten "domyślny" obrazek jako tło diva, a po najechaniu myszą podmieniać w CSS tło?

.title15 {
  background-image:url("obrazek1.jpg");
}

.title15:hover {
  background-image:url("obrazek2.jpg");
}

 

Answer 2

http://roberto.ovh.org/html-css/rollover.html ? Ogólnie to brzmi jakbyś szukał rollovera.

Answer 3

A nie możesz po prostu zrobić tak, że dajesz backgorund-image: url("obrazek1") a na hoverze backgorund-image: url("obrazek2")?