Temos pavadinimas: WordPress, Shopify ir PHPFusion programuotojų bendruomenė :: Nuoroda paveiksliuke

Parašė Erdfcvxl· 2013 Sau. 9 18:01:13
#1

Sveiki, gal pasiulytumete alternatyviu budu padaryti paveiksliukine nuoroda su hoveriu. Dabar viskas yra taip:

		<div class="EN"/><a href="EN"/></a></div>
		<div class="LT"><a href="LT" /></a></div>
		<div class="RU"><a href="RU" /></a></div>
		<div class="PL"><a href="PL" /></a></div>


Css:
.EN a,
.LT a,
.RU a,
.PL a{
display: block;
background-repeat:no-repeat;
width: 26px;
height: 11px;
}

.EN a{
background-image: url("img/EN.png");
margin-left: 600px;

}

.LT a{
background-image: url("img/LT.png");
margin-left: 640px;
margin-top: -11px;
}

.RU a{
background-image: url("img/RU.png");
margin-left: 680px;
margin-top: -11px;
}

.PL a{
background-image: url("img/PL.png");
margin-left: 720px;
margin-top: -11px;
}

Ir nuoroda veikia tik ant PL, ant paskutiniojo elemento, jei nutrinu PL tada nuoroda veiki ant RU. Zodziu kazkodel veikia tik paskutinysis ir vienintelis elementas. Taigi arba pasiulykit kaip pataisyti arba kita buda sukurti nuoroda su paveiksliuku.

Parašė Pakartoti slaptažodį· 2013 Sau. 9 19:01:32
#2

Paeksperimentavau kažkiek, viską supaprastinau, turėtų dirbti.

<style>
.EN a,
.LT a,
.RU a,
.PL a{
display: block;
width: 128px;
height: 128px;
}
.EN a {
background-image: url("lt.png");
}
.EN a:hover {
background-image: url("lt2.png");
}

.LT a {
background-image: url("lt.png");
}
.RU a {
background-image: url("lt.png");
}
.PL a {
background-image: url("lt.png");
}
</style>
<div class="EN"/><a href="EN"></a></div>
<div class="LT"><a href="LT"></a></div>
<div class="RU"><a href="RU"></a></div>
<div class="PL"><a href="PL"></a></div>

Redagavo Pakartoti slaptažodį· 2013 Sau. 9 19:01:49