| Autor | Zpráva | ||
|---|---|---|---|
| draboo Profil |
#1 · Zasláno: 12. 1. 2012, 11:52:37 · Upravil/a: draboo
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 |
#2 · Zasláno: 12. 1. 2012, 15:39:21
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>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 |
#3 · Zasláno: 12. 1. 2012, 15:55:44
Reaguji na draboa:
„Rad by som to urobil cez CSS“ Přechody v CSS mají nižší podporu než JavaScript. |
||
| draboo Profil |
#4 · Zasláno: 15. 1. 2012, 00:07:47
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... |
||
|
Časová prodleva: 12 let
|
|||
0