Zdravim, potreboval by som pomoct s efektom ako je na stranke http://www.billboard.com.
Ide o tie obrazky hore (Hot 100, Billboard 200...) , na ktore po nabehnuti mysou sa zmeni pozadie na ruzove, ale nielen jednej casti, ale vsetkych prvkov v obrazku naraz, cize aj horny nadpis, aj ten text v dolnej casti obrazku.
Mne sa to podarilo spravit len pomocou css hover, no to funguje vzdy len na jeden prvok (bud len horny nadpis, alebo len text dole). Ale na tej stranke to bude asi nejaky javascript, ktory zabezpeci ze staci nabehnut na obrazok a zmeni sa farba vsetkych prvkov v tom obrazku akokeby to bol jeden objekt. Vedel by mi niekto pomoct ako spravit takyto efekt ?
zmena pozadia po nabehnuti mysou
-
Biohazard66
Light Expert
- Príspevky: 63
- Registrovaný: 08 nov 2011, 19:16
Re: zmena pozadia po nabehnuti mysou
Tak zatiaľ to spraviť neviem ale urobíš to cez PHP alebo javascript určite 
-
audiotrack
VIP
- Príspevky: 25958
- Registrovaný: 09 sep 2005, 18:39
- Kontaktovať používateľa:
Re: zmena pozadia po nabehnuti mysou
cez php asi tazko
-
Biohazard66
Light Expert
- Príspevky: 63
- Registrovaný: 08 nov 2011, 19:16
Re: zmena pozadia po nabehnuti mysou
moc sa v tom ale fakt sa to nedá v php ???
-
94jakub
Guru wannabe
- Príspevky: 2037
- Registrovaný: 15 dec 2006, 13:18
- Bydlisko: Martin/BA
- Kontaktovať používateľa:
Re: zmena pozadia po nabehnuti mysou
Biohazard66:
Keď sa v tom nevyznáš (to je asi to slovo, ktoré ti chýba
) tak načo píšeš takú odpoveď.
fortes:
Je to robené cez Javascript. Trochu zapojiť hlavu a určite prídeš na podobné riešenie.
Poprípade použiť nejakú knižnicu(jQuery alebo čo). Tam to asi pôjde jednoduchšie.
Keď sa v tom nevyznáš (to je asi to slovo, ktoré ti chýba
) tak načo píšeš takú odpoveď.fortes:
Je to robené cez Javascript. Trochu zapojiť hlavu a určite prídeš na podobné riešenie.
Poprípade použiť nejakú knižnicu(jQuery alebo čo). Tam to asi pôjde jednoduchšie.
Re: zmena pozadia po nabehnuti mysou
cez javascript to dáš, poprípade cez jquery
A samozrejme treba nabindovať funkciu aj na mouseout, aby sa vrátilo pozadie naspäť.
Nejak takto by to mohlo fungovať.
Kód: Vybrať všetko
function vyfarbi {
$('#obrazok').css({
"background-color" : "farba"; //farbu si definuj
"line-height" : "2px";
});
}
$('#obrazok').bind("mouseover", "vyfarbi");Nejak takto by to mohlo fungovať.
-
94jakub
Guru wannabe
- Príspevky: 2037
- Registrovaný: 15 dec 2006, 13:18
- Bydlisko: Martin/BA
- Kontaktovať používateľa:
Re: zmena pozadia po nabehnuti mysou
Ani som ho neskúšal, no ten tvoj script určite neurobí to, čo chcel.
Tam bude toho treba oveľa viac.
Tomu divu nastaviť border, tomu vrchnému textu zmeniť background-color a ten spodný stačí len zobraziť.
Tam bude toho treba oveľa viac.
Tomu divu nastaviť border, tomu vrchnému textu zmeniť background-color a ten spodný stačí len zobraziť.
Re: zmena pozadia po nabehnuti mysou
Dalo by sa to este zjednodusit, no viac sa mi stym hrat nechce.
Kód: Vybrať všetko
<style>
#image {
background-image: url('promoImage1003.jpg');
width: 186px;
height: 93px;
}
#image:hover {
border: solid purple 1px;
}
#image:hover .title, #image:hover .info, #image:hover .info_text {
background-color: purple;
display: block;
}
.title {
background-color: #000;
opacity: 0.4;
font-weigh: bold;
color: #fff;
width: 100%;
height: 20px;
}
.title_text {
position: absolute;
color: #fff;
font-weight: bold;
margin-top: -20px;
margin-left: 5px;
}
.info {
background-color: #000;
opacity: 0.4;
font-weigh: bold;
color: #fff;
width: 100%;
height: 20px;
margin-top: 53px;
display: none;
}
.info_text {
position: absolute;
color: #fff;
font-weight: bold;
margin-top: -20px;
margin-left: 5px;
display: none;
}
</style>
<div id="image">
<div class="title"></div><div class="title_text">Hot 100</div>
<div class="info"></div><div class="info_text">No 1. is fun again</div>
</div>- Prílohy
-
- promoImage1003.jpg (48 KiB) 573 zobrazení
Re: zmena pozadia po nabehnuti mysou
super, tak predsa to ide cez css. dakujem 