Autor Zpráva
draboo
Profil
Zdravim, som uplny zaciatocnik, chcem si urobit web pre svoju buducu firmu , bude uplne jednoduchy, hlavna stranka a nejakych sedem, osem podstranok. Nemam problem si navrhnut koncept a urobit grafiku, no chcel by som tam mat niekolko "spestreni", zatial napriklad vo forme meniacich sa obrazkov odkazov. Po vytriezveni z naivnej predstavy, ze to vsetko vyskladam v nejakom free wysiwyg editore, zacal som trochu studovat pisanie stranok na tomto webe a potom, ako sa mi podarilo dosiahnut par zaciatocnickych "uspechov", zacalo ma to aj celkom bavit. Viem, ze najlepsie je dat urobit stranku profesionalom a urcite v buducnosti, ked budem potrebovat zlozitejsie veci, ich ( vase ) sluzby aj vyuzijem, no chcem do toho trochu vidiet a na zaciatku podnikania aj usetrit nejake peniaze, pochopitelne...:) Tak budem rad, ak mi pomozete. Zatial som sa nepustil do tvorby samotnej stranky, len si tak testujem, pouzivam Kompozer na take to zakladne rozvrhnutie stranky a dopisujem kod.
Konkretne otazky: Chcem si dat na stranku odkazy vo forme obrazkov, to nie je problem, no chcem, aby sa menili po prejdeni mysou ( onmouseover ). Rad by som to urobil cez CSS, no nasiel som len navod, ako urobit meniace sa obrazkove pozadie textoveho odkazu: Příklad měnícího odkazu , ja tam vsak nechcem mat ten text. Preto som to urobil skriptom, v testovacej stranke to vyzera takto:


<br>
<div style="text-align: center;"><a href="podstranky/fgh.html"
onmouseover="document['obrazok1'].src = 'images/zeleny_kruzok.gif' ;"
onmouseout="document['obrazok1'].src = 'images/cerveny_kruzok.gif' ;"><img
src="images/cerveny_kruzok.gif" name="obrazok1" border="0"></a><a
href="podstranky/fgh.html"
onmouseover="document['obrazok2'].src = 'images/zeleny_kruzok.gif' ;"
onmouseout="document['obrazok2'].src = 'images/cerveny_kruzok.gif' ;"><img
src="images/cerveny_kruzok.gif" name="obrazok2" border="0"></a><a
href="podstranky/fgh.html"
onmouseover="document['obrazok3'].src = 'images/cerveny_stvorcek.gif' ;"
onmouseout="document['obrazok3'].src = 'images/modry_stvorcek.gif' ;"><img
src="images/modry_stvorcek.gif" name="obrazok3" border="0"></a><br>
</div>
<br>

Su tam 3 obrazky, ktore sa menia po prejdeni mysou. Chcem sa spytat, ci by sa to teda nedalo urobit cez CSS a ako dosiahnut plynuly prechod medzi dvoma stavmi, teda nie "rychle prebliknutie", ale pomalsi prechod medzi jednotlivymi obrazkami, povedzme v priebehu 1 sekundy...

Za pomoc vopred dakujem
Bubák
Profil
Třeba takto:
<style>
a img {
    border: 2px solid red;
    float: left;
    margin-right: -364px;
}
a img.drudy {
    border: 2px solid blue;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s; } /* CSS3? */
a:hover img.drudy {
    filter: alpha(opacity=0); /* IE */
    opacity: 0;
}
</style>
<a href="#">
    <img src="http://teststranek.kvalitne.cz/images/obrazek-1.jpg" height="240" width="320">
    <img class=drudy src="http://teststranek.kvalitne.cz/images/99ccff-ff6666.png" height="240" width="320">
</a>
V IE nefunfují plynulý CSS transitions, bude fungovat až v IE10.
IE od verze 5.5 5.5 umí transitions, zprovozňuje se se to jinak, ale nechce se mi hledat, jak na to.

Klasické řešení je měnit javascriptem opacity.
Chamurappi
Profil
Reaguji na draboa:
Rad by som to urobil cez CSS
Přechody v CSS mají nižší podporu než JavaScript.
draboo
Profil
Dik moc
draboo
Profil
Bubák:
Este by som mal k tomuto jednu otazku. Potreboval by som v jednom riadku viac takychto obrazkovych odkazov, bude ich na sirku stranky asi 8, tesne vedla seba, bez medzier a okrajov. Sirka stranky bude 1000 px. Cize potreboval by som individualne nastavit polohu kazdemu takemuto odkazu, preto by asi bolo lepsie zapisat do tagu odkazu, nie do style... Som z toho ale trochu blby ( mozno len lenivy...), vedeli by ste mi poradit, ako to zapisat ? V bubakovom priklade su oba obrazky odkazu zarovnane dolava a neviem s tym pohnut, ked napr. zmenim margin-right, tak mi to posunie len jeden obrazok, druhy zostava na povodnom mieste, cize to neviem predefinovat ani v style...:( Ked pochopim toto, dam nacas pokoj...:)

Pripadne, ak by sa niekto nudil, mohol by mi poradit, ako dosiahnut plynuly prechod scriptom ( v suvislosti s tym prikladom, ktory uvadzam hore... ):
<a href="podstranky/fgh.html" 
onmouseover="document['obrazok1'].src = 'images/zeleny_kruzok.gif' ;" 
onmouseout="document['obrazok1'].src = 'images/cerveny_kruzok.gif' ;"><img 
src="images/cerveny_kruzok.gif" name="obrazok1" border="0"></a>

Este som sa nerozhodol, ktorym sposobom to urobim...

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: