| Autor | Zpráva | ||
|---|---|---|---|
| fanky Profil |
#1 · Zasláno: 20. 10. 2005, 17:35:58
Mám menu ve formátu *.jpg. Je to celé lišta (obrázek) a v ní jednotlivé položky napsané. Chtel bych, aby mi po najetí na ně myší trošku zbělaly, zesvětlily... tuším, že se to dá nějak udělat pomocí css, ale vubec nevím jak a případně jak to implementovat do html kódu.. nevim o tom skoro nic... Je někde na tomto webu o tom stať ??? Díky
|
||
| Timy Profil |
#2 · Zasláno: 20. 10. 2005, 17:52:37
pokud máte celé menu jako jeden jpg obrázek, tak to asi jen tak nepůjde, jednodušší by bylo rozstříhat to na dílčí odkazy a pak to měnit docela jednoduše buď přes css nebo přes JS
|
||
| fanky Profil |
#3 · Zasláno: 20. 10. 2005, 18:14:18
no rozstrihat to muzu trebe v Adobe Photoshop Image Ready, to by nebyl problem, ale hledam prave stranku, kde je popsane, jak to udelat aby mi ty polozky zmenily tu barvu, jak prave pres to CSS ???
|
||
| Timy Profil |
#4 · Zasláno: 20. 10. 2005, 18:16:37
|
||
| peta Profil * |
#5 · Zasláno: 20. 10. 2005, 19:03:09
fanky
s rozstrihanim by to bylo lepsi, ale i bez toho by to slo. Da se to udelat CSS filtry jakpsatweb - CSS - filter width:98%; /* IE filter musi mit jeden rozmer pevny */ /* moz */ -moz-opacity:0.7; /* IE 4 */ filter:Alpha(opacity=70); } v pripade, jak to mas, bys musel do oblasti obrazku napozicovat nejake prvky, nejlepe odkazy (jinak musis mit csshover.htc pro hover v IE) Pak pridas do css akci hover, kde das zmenit pozadi na bile a nastavis filtr treba na 0.2 Problem je, ze bez filtru ti prekryje cely odkaz bilym obdelnickem. v pripade rozstrihani je to pak jednodussi, tam nemusis davat filtry, muzes menit obrazek 1 za obrazek 2 viz jakpsatweb - Vylepsene odkazy mozna jakpsatweb - CSS - Vylepsene odkazy |
||
| fanky Profil |
#6 · Zasláno: 20. 10. 2005, 20:19:55
tak se v tom nějak plácám... nějak nemůžu přijít na to, jak to nadefinovat... mám obrázek, rozřezal jsem ho a jednotlivým částem jsem přiřadil různé adresy, ale jak udělat aby po najetí myši na jednotlivé položky ty časti změnily bravu??? je na to nějakej jednoduchej kód, který bych měl napsat do hlavičky???
|
||
| Anonymní Profil * |
#7 · Zasláno: 20. 10. 2005, 21:57:28
a:hover {background-color: "o neco svetlejsi barva nez mas"; color: "o neco svetlejsi barva nez mas";}
tak asi takhle bych rek, ne? |
||
| fanky Profil |
#8 · Zasláno: 20. 10. 2005, 22:14:59
mám tam tohle a nic se nedeje :(
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>fanky</title> <style type="text/css"> a:hover {background-color: "#000000"; color: "#000000";} </style> </head> <body> <img src="menu_hotovo.jpg" alt="menu" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="0,0,72,24" href="kraj.jpg" alt="kraj" /> </map> </body> |
||
| peta Profil * |
#9 · Zasláno: 20. 10. 2005, 23:11:24
fanky
MAP ale obrazek nerozrezava. rozrezat na casti se mysli na casti, jednotlive obrazky. img1.gif, img2.gif... Nicmene ani to neni treba. U MAP ti hover nikdy nebude fungovat. Ty sis vubec nedal praci a neproledl sis vse, co se o hover v casti CSS pise. Tak ti to rozepisi podrobneji... jakpsatweb http://www.jakpsatweb.cz/ - odkaz "Vše o pozadí" http://www.jakpsatweb.cz/pozadi.html -odkaz "Zdokonalení odkazů" http://www.jakpsatweb.cz/odkazy.html CSS http://www.jakpsatweb.cz/css/ (ted koukam, ze on nema v prehledu vpravo uvedeny hover, takze sory, to bylo na jine strance) - odkaz "ruzne barvy odkazu" http://www.jakpsatweb.cz/css/css-odkazy-class.html - odkaz "Odkaz jako tlačítko" *** http://www.jakpsatweb.cz/priklady/jakotlacitko.html CSS - priklady http://www.jakpsatweb.cz/css/priklady/index.html - nadpis "Odkazy" Hm? Mam pokracovat? Jinak... <head> <style> .menu {width:100px;height:500px;background:url("obrazek.gif")} .menu a {display:block;font-size:0;line-height:40px;width:100px} .menu a:hover {background:#fff; /* moz */ -moz-opacity:0.3; /* IE */ filter:Alpha(opacity=30); } -120px} </style> </head> <body> <div class="menu"> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> </div> </body> !!! Jo, a precti si neco o CSS !!! Z techto radku je z cela jasne, ze snaha nic, ani zadny priklad sis neprohlidl a:hover {background-color: "#000000"; color: "#000000";} <img src="menu_hotovo.jpg" alt="menu" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="0,0,72,24" href="kraj.jpg" alt="kraj" /> </map> Najdi mi tam jediny tag A, na ktery bych mohl aplikovat vlastnost :hover ? Bodejd by ti to fungovalo. Pripis pred /body toto: <a href="#">Zcernam, bez mysko pryc</a> A pak to zkus znova |
||
| peta Profil * |
#10 · Zasláno: 20. 10. 2005, 23:16:55
sory, 2 takove chybky, sem si trekl, ze to jeste odkousim...
Najdi 10 rozdilu :) Schvalne :) <head> <style> .menu {width:100px;height:300px;background:url("obrazek.gif")} .menu a {display:block;font-size:0;line-height:40px;height:40px;width:100px} .menu a:hover {background:#fff; /* moz */ -moz-opacity:0.5; /* IE */ filter:Alpha(opacity=50); } </style> </head> <body> <div class="menu"> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> <a href="#"> </a> </div> </body> |
||
| Radek Hrabůvka Profil |
#11 · Zasláno: 21. 10. 2005, 00:23:58
fanky http://www.volny.cz/teststranek/css-rollover/ a http://www.volny.cz/teststranek/menu1/ Je to zjednodušenina toho, co doporučuje Timy.
Žádné není, co přesně potřebuješ, ale dá se to odvodit, u každé položky menu bys měl jiný obrázek. To co chceš, se dá vyřešit jedním obrázkem, kde by byla tmavá a světlá varianta, ale neviděl bych to jako praktické řešení, spousta čísel pro "napozicování" pozadí, čtyři pro každý odkaz, což by bylo nevýhodné při změně menu, málokdo by se v tom vyznal. Já to "šoupu" jenom nahoru-dolů, nebo doprava-doleva. Kdyby byl problém, hoď menu obrázek na web a pomůžu, pokud mě někdo nepředběhne ;—) |
||
| fanky Profil |
#12 · Zasláno: 21. 10. 2005, 13:42:50 · Upravil/a: fanky
http://charon.hkfree.org/~fanky/menu_hotovo.jpg tady je to menu, a chtel bych, aby po najeti mysi na jednotlive polozky se ty polozky nejak zmenily inteligentne (vysvitily nebo neco podobneho), porad se mi to nejak nedari
|
||
| Timy Profil |
#13 · Zasláno: 21. 10. 2005, 13:52:09
Asi to pořád nechápeš. Musíš z tohoto jednoho obrázku udělat sedm obrázků - pro každý odkaz jeden obrázek - a pak je jenom poskládat vedle sebe. Potom musíš udělat další várku sedmi obrázků, které budou světlejší a pak budeš pouze měnit ten původní obrázek za ten světlejší, žádným tagem obrázek nezesvětlíš.
Druhá (lepší) možnost je ta, že budeš mít pouze dva obrázky - jeden tmavý a jeden světlý - a budou nastaveny pouze jako pozadí pro odkaz. Text, který tam máš, bude pak normálně v html, nebude součástí toho obrázku. Což by u tebe nebyl problém, jen by jsi se musel obejít bez toho stínu u odkazech. |
||
| peta Profil * |
#14 · Zasláno: 21. 10. 2005, 19:03:35
fanky
//peter-mlich.wz.cz/x/ww/css/pr/hoverx.htm Tot je ten priklad, co jsem popsal vys. Ty to mas vedle sebe a mas to rozdilne sirky, takze je to trosku obtiznejsi... <head> <style> .menu {width:500px;height:40px;background:url("obrazek.gif"); position:relative} .menu a {display:block;font-size:0;line-height:40px;height:40px; position:absolute} .menu a:hover {background:#fff; /* moz */ -moz-opacity:0.5; /* IE */ filter:Alpha(opacity=50); } #m1 {width:100px;left:0} #m2 {width:70px;left:101px} #m3 {width:30px;left:171px} #m4 {width:130px;left:201px} #m5 {width:90px;left:331px} </style> </head> <body> <div class="menu"> <a id="m1" href="#"> </a> <a id="m2" href="#"> </a> <a id="m3" href="#"> </a> <a id="m4" href="#"> </a> <a id="m5" href="#"> </a> </div> </body> k videni na //peter-mlich.wz.cz/x/ww/css/pr/hoverx.htm |
||
| peta Profil * |
#15 · Zasláno: 21. 10. 2005, 19:04:03
oprava
//peter-mlich.wz.cz/x/ww/css/pr/hover2x.htm |
||
| peta Profil * |
#16 · Zasláno: 21. 10. 2005, 19:05:29
samozrejme, jako vetsina, takovehle menu zavrhuji. Kde neni text, tam neni nic. Z nejakeho duvodu se nezobrazi obrazek a stranka je nepouzitelna.
|
||
| Radek Hrabůvka Profil |
#17 · Zasláno: 21. 10. 2005, 19:10:41 · Upravil/a: Radek Hrabůvka
fanky Jsem si dovolil pár CSS-ek z vlastní zahrádky. Celé menu je jedním obrázkem, protože jsi poslat jen "tmavou" verzi, tak světlou jsem přidal podle oka já.
http://www.volny.cz/teststranek/menu3/ Menu se sedmi obrázky by mělo jednodušší kód a dalo by se snáz změnit, např. přidat položku, pokud by to bylo třeba. |
||
| Timy Profil |
#18 · Zasláno: 21. 10. 2005, 19:18:26
Radek Hrabůvka
pěkné:-) Tohle by mě vskutku nenapadlo... |
||
| fanky Profil |
#19 · Zasláno: 21. 10. 2005, 19:44:50
to Radek Hrabůvka: thx moc, to je super, jinak ja to mam rad takhle v celku a přidávat položku zřejmě nebudu, jelikož toto menu je i velikostí přizpusobeno designu mých novýcg stránek, thx moc, fakt
|
||
| fanky Profil |
#20 · Zasláno: 21. 10. 2005, 20:05:13
dá se ještě udělat, aby to menu, které teď "svítí" šlo napozicovat přesně tam kam chci???
|
||
| Radek Hrabůvka Profil |
#21 · Zasláno: 21. 10. 2005, 20:30:31
Menu dáš do DIVu, kterému dáš pro jistotu rozměry, a ten DIV si umístíš, kam potřebuješ. Horizontální centrování pro všechny prohlížeče se tady probírá i několikrát za týten, také Yuhů to má na stránce.
|
||
| fanky Profil |
#22 · Zasláno: 21. 10. 2005, 20:59:06 · Upravil/a: fanky
ale já to menu v divu mám, je to podle toho tvého kódu, mám tam center, ale přitom to je ulevého kraje...
|
||
| Radek Hrabůvka Profil |
#23 · Zasláno: 21. 10. 2005, 21:40:16
Na http://www.volny.cz/teststranek/menu3/ máš novou, centrovanou verzi. Kdyby menu nebylo uprostřed, máš v keši "starou" verzi, stiskni F5.
<OT>Uděláš pro mě nápis? Pošlu poštou, adresu vím, nespěchá.</OT> |
||
| fanky Profil |
#24 · Zasláno: 21. 10. 2005, 22:36:55
nápis? co máš na mysli??? jo, klidně pošli :-)
|
||
| fanky Profil |
#25 · Zasláno: 21. 10. 2005, 23:00:00
ještě mám jeden problémek... mám udělaný tento podklad: http://charon.hkfree.org/~fanky/indexn.html ale když přidám do kódu této stránky ten kód od Radka Hrabůvky, tak mi ten podklad zmizí a ještě se mi to menu malinko rozcentruje..??? nevím ale proč???
|
||
| Radek Hrabůvka Profil |
#26 · Zasláno: 22. 10. 2005, 22:26:25
fanky když přidám do kódu této stránky ten kód od Radka Hrabůvky, tak mi ten podklad zmizí
Ve svém kódu styluji body, jestli jsi celý můj css kód nakopíroval za svůj, tak moje deklace: body {background: white} přebila tvé pozadí, protože zápis "background: white" znamená: {background-color: white; background-image: none; repeat; background-position: left top; background-attachment: scroll;} Jde totiž o sdruženou vlastnost, co v ní není deklarované, nastaví se na výchozí hodnoty. ještě se mi to menu malinko rozcentruje Jestli myslíme to samé, tak v IE to menu "poskakuje" oprotí pozadí při změnách šířky okna asi o 1-2px. Nevím, co s tím. Tvé pozadí má 30,4 kB, stačí 184 bajtů, což je 170x méně! 
|
||
| fanky Profil |
#27 · Zasláno: 23. 10. 2005, 00:28:47 · Upravil/a: fanky
tak celé body jsem vymazal a už to je good, jestli se tedy body smazat muze??? jinak rozcentrovani je zvlastni, ale ja mam rad Operu a tam to je OK :-)) a to body mohu nechat smazáno? a to posledni abych mohl stránku dokončit je pozicování na výšku, abych mohl přesně to menu umístit na jakou výšku chci... ????? <OT> na nápisu už pracuju, jen kdyžtak pošli pls ještě link na ty stránky</OT>
|
||
| Radek Hrabůvka Profil |
#28 · Zasláno: 23. 10. 2005, 10:11:50
fanky tak celé body jsem vymazal a už to je good, jestli se tedy body smazat muze??? Svůj styl pro element body ti doporučuji na stránce ponechat. Já jen, že pokud jsi můj styl pro body z příkladu za svůj, tak ti ho přerazí. Yuhů tohle nejzákladnější pravidlo tuším vysvětluje jako "kdo se směje naposled, ten se směje nejlíp". Takže prostě moje stylování pro body nepoužiješ, svoje stylování body podle libosti.
abych mohl stránku dokončit je pozicování na výšku div s menu umístím podobně jako například "obyčejný" nadpis, volný prostor nahoře, vpravo, dole, vlevo se dělá pomocí marginu nebo paddingu nebo obojím. Není to záměr dát zrovna tenhle odkaz, ale na stránce www.volny.cz/cbov/zakladni/uvod.htm takovým způsobem ve stylu umísťuji obrázkový nápis, v CSS #logo v HTML id=logo <ot>Tak máš tady link, na stránce je JS přesměrování, kdyby ti to vadilo, vypni si JS.</ot> |
||
| Radek Hrabůvka Profil |
#29 · Zasláno: 23. 10. 2005, 11:46:28
Omlouvám se udělal jsem změny v kódu a obrázkový nápis se nezobrazoval. Už jsem chybu napravil.
|
||
| fanky Profil |
#30 · Zasláno: 23. 10. 2005, 20:04:19
tady pridavam svuj navrh na index, ale nevim jak prirazit to menu k tomu obrazku :-(( poradi mi pls nekdo, zatim ctu, ale jsem z toho zmatenej http://charon.hkfree.org/~fanky/peta.html to jediny mi chybi k dokonceni
|
||
|
Časová prodleva: 21 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0