Наведите указатель мыши на изображение значка?

Question

Я сделал нить раньше о размещении значков в строке. Но теперь у меня проблемы с попыткой навести изображение значка. Например, скажем, у меня есть значок facebook, если мышь находится на этом значке, я хочу, чтобы этот значок был немного ярким (а не фоном, только значок), чтобы указать, что курсор находится на значке. Из моей памяти это было сделано с помощью двух отдельных изображений (один с обычным значком, другой ярче обычного значка), и вы играете с фоновым изображением внутри hover в css, но я не могу работать так. В этом примере, скажем, facebook1.png - яркая версия, а facebook.png - обычная.

HTML

<a class="icons" href="http://www.facebook.com"><img src="images/facebook.png"></a> 

CSS

.icons a{ 

    display: inline-block; 
    width: 64px; 
    height: 64px; 
} 

.icons a:hover { 
    background: url(../images/facebook1.png); 
} 

до сих пор не могу показаться, чтобы получить эту работу ...

Любая помощь будет принята с благодарностью.

Заранее спасибо.

Answer 1

Использование

<a class="icons" href="http://www.facebook.com"></a> 

и стиль, как

<style> 
.icons{ 
    background: url(../images/facebook.png); 
    display: inline-block; 
    width: 64px; 
    height: 64px; 
} 

a.icons:hover { 
    background: url(../images/facebook1.png); 
} 
</style> 

Answer 2

Сначала к якорю, который нравится следующее:

<a class="icons" href="http://www.facebook.com">f</a> 

И изменить CSS следующим образом:

.icons { 
    background: url(../images/facebook.png); 
    display: inline-block; 
    width: 64px; 
    height: 64px; 
    content:""; 
} 

.icons:hover { 
    background: url(../images/facebook1.png); 
} 

Это изменит ваше фоновое изображение.

Answer 3

Простой способ сделать это - использовать Javascript. Попробуйте использовать этот код:

<script> 
function changeImage() 
{ 
element=document.getElementById('myimage') 
if (element.src.match("fb_high")) 
    { 
    element.src="fb_low.gif"; 
    } 
else 
    { 
    element.src="fb_high.gif"; 
    } 
} 
</script> 

<img id="myimage" onhover="changeImage()" 
src="fb_low.gif" width="#" height="#"> 

Просто вставьте это в свой код, где хотите, и он должен работать. Вы также можете сделать это с помощью значка Twitter, но вам нужно будет иметь две отдельные фотографии.