Změna vzhledu obrázku po najetí myši

Prosím Vás potřebuju poradit jak změním SMĚR změny vzhledu obrázku po najetí myši na obrázek, který má počátek v pravém horním rohu.

Nastavil jsem několik obrázků, které se mění vždy z levé strany na pravou nebo zhora dolů, každy z nich má jiný počátek vždy
<div style="position: absolute; top: 0px; left: 0-xxx px;"> měnící se vždy směrem doprava. Nyní potřebuju nastavit počáteční polohu prvnímu obrázku začínající v pravém horním rohu tak, že se po najetí myší změní na větší obrázek směrem doleva. Problém je ten, že nevím jak nastavit souřadnice obou obrázku.

Současný kod používam viz. tento:
1. obrázek musí mít počátek v top: 0px; left: 699px;
2. obrázek musí mít počátek v top: 0px; left: 683px;
aby byly zarovnány s pravou stranou

<div style="position: absolute; top: 0px; left: 699px;">
<a href="někam.html"
onmouseover="document['obrazek'].src = 'druhy.gif' ;"
onmouseout="document['obrazek'].src = 'prvni.gif' ;">
<img src="prvni.gif" name="obrazek">
</a>
</div>

Díky za rady

Nakonec jsem změnil velikost plátna 1. obrázku (zvětšil podklad ne obrázek) tak, aby to vypadalo po najetí myší, že se to zvětšilo. Pokud je i jiná možnost něž toto tak bych ji rád věděl.

Zkoušel jsem to, ale nefunguje.

do HTML jsem zadal

<a href='http://mujweb.cz' class='odkaz'></a>

a do CSS:


.odkaz {
display: block;
width: 200px;
height: 200px;
background: url('http://mujobrazek') no-repeat;
background-position: 50px 0
}
.odkaz:hover {
background-position: 0 0
}