Cum pun imagini de socializare in header phpbb3

Buna ziua, as dori un cod sa pun si eu ca si aici niste imagini de socializare cu efectul ala cand pui masusul pe imagine se ridica in sus pe versiunea phpBB3:

Multumesc !

Cod jQuery:

Cod:

jQuery(document).ready(function() {
jQuery('.headerbar').before('
<div class="social">
<a href="link"><img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/32/facebook.png" /></a>
<a href="link"><img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/32/twitter.png" /></a>
<a href="link"><img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/32/rss.png" /></a>
</div>
');
});

Cod CSS:

Cod:

.social img {
height: 16px;
width: 16px;}

.social img:hover {
height: 32px;
width: 32px;}

Eu doresc codul asta daca se poate de hover: http://fguide.all-up.com/ (nu e reclama)

Buna ziua,
Codul dat de Omu este intocmai cel dorit de dumneavoastra. L-ati testat?

Da dar imaginile nu apar ca si in aceea imagine. In imagine sunt jumatate imaginile la mine sunt intregi si as vrea sa fie si la mine ca si in aceea imagine si cand sa pun click pe imagine atunci sa fie imaginea normala.

JavaScript

Cod:



jQuery(document).ready(function() {
jQuery('#wrap').before('
<div class="social">
<a href="LINK1"><img src="LINK IMG1"></a>    <a href="LINK2"><img src="LINK IMG2"></a>  <a href="LINK3"><img src="LINK IMG 2"></a>
</div>
');
});

Cod:

.social {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -100px -57px no-repeat transparent;
height: 33px;
left: 18px;
position: relative;
width: 50px;
}

.social:hover  {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -100px -57px no-repeat transparent;
height: 33px;
left: 18px;
position: relative;
width: 50px;
}
 
 
.social:hover {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") 0px -13px no-repeat transparent;
height: 33px;
width: 50px;
}

.social {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") 0px -57px no-repeat transparent;
height: 33px;
width: 50px;
}


.social:hover {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -50px -13px no-repeat transparent;
height: 33px;
width: 50px;
}


.social {
background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -50px -57px no-repeat transparent;
height: 33px;
left: 33px;
position: relative;
width: 50px;
}

CSS

Degeaba nu merge.

Cod:

jQuery(document).ready(function() {
jQuery('.headerbar').before('<div class="social1"></div><div class="social2"></div><div class="social3"></div>');});

Cod:

.social1 {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -100px -57px no-repeat transparent;
    height: 33px;
    position: relative;
    width: 50px;
    }

    .social1:hover  {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -100px -57px no-repeat transparent;
    height: 33px;
    position: relative;
    width: 50px;
    }
   
   
    .social2:hover {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") 0px -13px no-repeat transparent;
    height: 33px;
    width: 50px;
    }

    .social2 {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") 0px -57px no-repeat transparent;
    height: 33px;
    width: 50px;
    }


    .social3:hover {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -50px -13px no-repeat transparent;
    height: 33px;
    width: 50px;
    }


    .social3 {
    background: url("http://i42.servimg.com/u/f42/15/42/26/78/social13.png") -50px -57px no-repeat transparent;
    height: 33px;
    position: relative;
    width: 50px;
    }

Te-aş ruga doar să schimbi imaginea aceasta: https://i.servimg.com/u/f42/15/42/26/78/social13.png

Imagine aceasta: https://i.servimg.com/u/f42/15/42/26/78/social13.png sa o schimb cu o alta imagine tot asa cu 3 imagini pe un rand sau cu cate o imagine ?

Pai daca vrei un asemenea hover, va trebuii sa schimbi acele 3 imagini uc altele 3 imagini, dar sa fie set .

Deci tot nu inteleg.

Cum sunt acestea sase imagini

Asa va trebuii sa faci si tu, trei sus cu culoarea dorita, iar trei jos cu culoarea de la hover .