<a> works for only a small part of an image? - html

Question

The question doesn't describe this pretty well.
So I got three small images that are suppose to change on hover and work as a link, but it ''detects'' the hover only in a small part of the image. If I drag my mouse to the bottom of the image link, it's not even clickable, so the link only works in the top part of the image.
See for yourself:
http://jsfiddle.net/M3LC9/ (JSFiddle doesn't like pictures..)
<div class="kielet">
<nav>
<!--Englanti-->
<img class="icon" src="iconit/en.gif" title="in english" onmouseover="this.src='iconit/en_hover.gif'" onmouseout= "this.src='iconit/en.gif'">
<!--Ruotsi-->
<img class="icon" src="iconit/swe.gif" title="på svenska" onmouseover="this.src='iconit/swe_hover.gif'" onmouseout="this.src='iconit/swe.gif'">
<!--Venäjä-->
<img class="icon" src="iconit/ru.gif" title="По русски" onmouseover="this.src='iconit/ru_hover.gif'" onmouseout="this.src='iconit/ru.gif'">
</div>
.kielet {
top:0px;
width:100%;
background: black;
right: 0px;
margin-bottom:0px;
padding:0px;
}
.kielet nav {
right: 0px;
margin-right: 0px;
text-align: right;
}
.icon {
width: 50px;
height: 100%;
right: 0px;
margin: 20px;
margin-top:0px;
margin-bottom:0px;
display:inline;
padding: 0px;
}

Answer 1

You currently have your images set to display as inline. This will make them adhere to any line-height defaults a browser may have set on your a element, keeping your a element at a smaller height. This can be visualised in Chrome's Element Inspector:
To change this, simply set the display on your a elements to inline-block:
a {
display: inline-block;
}
JSFiddle demo.
Note that you may want to be a bit more specific with your a selector by specifying .kielet nav a, for instance, or giving your a elements their own class identifier.

Answer 2

Try changing the display property to display:inline-block
.icon {
width: 50px;
height: 100%;
right: 0px;
margin: 20px;
margin-top:0px;
margin-bottom:0px;
display:inline-block; <----
padding: 0px;
}
JSFiddle

Answer 3

Usually you don't implement your hover-state with javascript and <img />
You can easily do this with CSS.
HTML
<div class="kielet">
<nav>
<!--Englanti-->
<!--Ruotsi-->
<!--Venäjä-->
</nav>
</div>
CSS
.kielet {
background: black;
padding: 5px;
text-align: center;
}
a.icon {
display: inline-block;
width: 16px;
heiht: 16px;
line-height: 16px;
}
a.icon_ru { background: url(http://placehold.it/16x16/ffc) center no-repeat; }
a.icon_ru:hover { background: url(http://placehold.it/16x16/ff0) center no-repeat; }
a.icon_en { background: url(http://placehold.it/16x16/cff) center no-repeat; }
a.icon_en:hover { background: url(http://placehold.it/16x16/0ff) center no-repeat; }
a.icon_swe { background: url(http://placehold.it/16x16/fcf) center no-repeat; }
a.icon_swe:hover { background: url(http://placehold.it/16x16/f0f) center no-repeat; }
jsFiddle