Prozirnost ćelije i teksta

Ako smo u background ćelije tablice stavili sliku, može li se nekako namjestiti da prelaskom miša preko te ćelije, ta sličica u pozadini izblijedi?
Naravno, dolazi u obzir i to da se prelaskom miša preko ćelije, sličica promijeni (da se prikaže neka druga, a ta se onda može podesiti da bude bljeđa verzija prve).

Npr. na ovoj stranici

http://public.carnet.hr/~ahorvate/pitanje/price.htm

nariktano je da prelaskom miša preko slika (cvjetova) ti slike mijenjaju prozirnost, a slično bih volje da se desi kad mišem prelazim preko vodoravnog izbornika - da se osim underline-a linka, dogodi i promjena prozirnosti pozadine ćelije.

(Inače, većina linkova ne radi, web je u izradi…)

  1. Može li se i sa tekstom (koji nije link) napraviti taj efekt prozirnosti? Npr., na gornjoj stranici mislim na onaj narančasti tekst “Priče” koji je iznad narančastog ljiljana.

http://public.carnet.hr/~ahorvate/pitanje/stilovi.css

Prouči pojmove hover, opacity, pogledaj gdje su i kako funkcioniraju…

A onda na http://www.w3schools.com/ potraži te pojmove i pogledaj njihovu primjenu.

[quote=“t00m”]http://public.carnet.hr/~ahorvate/pitanje/stilovi.css

Prouči pojmove hover, opacity, pogledaj gdje su i kako funkcioniraju…

A onda na http://www.w3schools.com/ potraži te pojmove i pogledaj njihovu primjenu.[/quote]

Sad se malo vrtimo u krug.

Ja sam upravo sa
http://www.w3schools.com/css/default.asp
i pokupila to kako ću u CSS staviti naredbe za opacity, za hover itd.
I uspjela sam ih prilagoditi onome kako želim da rade, dakle valjda bar neke najosnovnije osnove kužim.

Međutim, ono što je tamo objašnjeno za hover, djeluje samo na tekst, a ne kužim kako da sa tim hover dohvatim pozadinu ćelije preko koje prelazim, i da onda ta pozadina pobljedi.

Dakle, kako da naredbu

a.one:hover {color:#000000; text-decoration:underline; }

prilagodim, pa da mi prelaskom miša izblijedi pozadina ćelije u kojoj je link, odnosno ćelije iznad koje je miš?

Isto tako, ne znam kako da opacity koristim za tekst, jer na

http://www.w3schools.com/css/css_image_transparency.asp

piše uputa samo za slike. A to što sam koristila glasi npr.

img.b0 { opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier / }
img.b0:hover { opacity:1 ;
filter:alpha(opacity=100); /
For IE8 and earlier */ }

Kako da to primijenim na tekst? Probala sam umjesto onog ‘img’ staviti riječ ‘text’…, ali nije profunkcioniralo…

[quote=“ahorvatek”]Sad se malo vrtimo u krug.

Ja sam upravo sa
http://www.w3schools.com/css/default.asp
i pokupila to kako ću u CSS staviti naredbe za opacity, za hover itd.
I uspjela sam ih prilagoditi onome kako želim da rade, dakle valjda bar neke najosnovnije osnove kužim.

Međutim, ono što je tamo objašnjeno za hover, djeluje samo na tekst, a ne kužim kako da sa tim hover dohvatim pozadinu ćelije preko koje prelazim, i da onda ta pozadina pobljedi.

Dakle, kako da naredbu

a.one:hover {color:#000000; text-decoration:underline; }

prilagodim, pa da mi prelaskom miša izblijedi pozadina ćelije u kojoj je link, odnosno ćelije iznad koje je miš?

Isto tako, ne znam kako da opacity koristim za tekst, jer na

http://www.w3schools.com/css/css_image_transparency.asp

piše uputa samo za slike. A to što sam koristila glasi npr.

img.b0 { opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier / }
img.b0:hover { opacity:1 ;
filter:alpha(opacity=100); /
For IE8 and earlier */ }

Kako da to primijenim na tekst? Probala sam umjesto onog ‘img’ staviti riječ ‘text’…, ali nije profunkcioniralo…[/quote]

nemoj mijenjati text kako sam vidio ono ti je

tag pokusaj njega na css promjeniti

sorry, nisam skuzio da je to tvoj sajt, mislio sam da pitas kako napraviti nesto kao ta slika…

a.one:hover {color:#000000; text-decoration:underline; background-color: #tvoja boja;}

Nema problema…

[quote=""]
a.one:hover {color:#000000; text-decoration:underline; background-color: #tvoja boja;}[/quote]

Sa ovime, kad stavim miša preko teksta, ne oboji mi se cijela ćelija tom bojom, već samo mali dio oko teksta.
Evo gdje sam to probala,

http://public.carnet.hr/~ahorvate/pitanje/price.htm

(vodoravni izbornik) .

No, kad bi se obojala i ćelija, pitanje bi bilo može li se postaviti neka slika umjesto te boje.

No, zapravo mi se nakon ove probe čini da to meni ni tada ne bi bilo zadovoljavajuće, jer meni ćelija ne ide do one uspravne crte (koja dijeli linkove), već završava prije te crte, pa ta promjena slike niti ne bi dobro izgledala. Pa mislim da ću odustati od ovakvih pokušaja…

U svakom slučaju hvala, da nisam isprobala ovo, ne bih znala da mi neće odgovarati ni ono drugo…
I isprika što sam zagnjavila s ovim, a sad ispada da ne treba…

[quote=“ahorvatek”]Probala sam ovo sa

tagom i radi. Puno hvala!

Doduše, radi samo u FF, a ne radi u IE, iako sam u kodu predvidjela i ono za IE,

tr.prozredak { opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier / }
tr.prozredak:hover { opacity:0.5 ;
filter:alpha(opacity=50); /
For IE8 and earlier */ }

no, možda takav kod (ovo sa filter:alpha) za IE radi samo kod slika…
Za tekstove (tj. za

tagove) možda u IE postoji neka druga naredba… ili ne postoji nikakva…

Joj, koja gnjavaža sa tim pretraživačima…

No, ako i ne proradi u IE, lijepo je već i ovo u FF… hvala još jednom![/quote]

ah sry zaboravio sam reci ubaci ovo

filter: alpha(opacity=80);
zoom:1;

na taj tr tag to ti ej za IE…

[quote=“stefy”]ah sry zaboravio sam reci ubaci ovo

filter: alpha(opacity=80);
zoom:1;

na taj tr tag to ti ej za IE…[/quote]

Ja sam to ubacila, ali opet ne radi,

http://public.carnet.hr/~ahorvate/pitanje/price.htm
.

Dakle, sad to u CSS-u izgleda ovako:

tr.prozredak {opacity:1;
filter:alpha(opacity=100); zoom:1; /* For IE8 and earlier / }
tr.prozredak:hover {opacity:0.5 ;
filter:alpha(opacity=50); zoom:1; /
For IE8 and earlier */ }

Jesam li tu nešto pogriješila?

Ne znam zašto kompliciraš uopće… Kao prvo radiš sa tablicama, što je zastarjelo… Pogledaj moderne načine izrade web stranica…

a.one:hover {color:#000000; background-color: #ffcc66; width:#širina čelije; height:#visina čelije;}

Nisam skuzio da su to slike ispod linkova, opet sorry, ne gledam dobro…

Probaj ovako nešto

a.one:link {color:#000000; text-decoration:none; background-image:url(‘slike/lisce10.jpg’);}

a.one:hover {color:#000000; background-image:url(‘slike/lisce10.jpg’); opacity:0.5; filter:alpha(opacity=50); zoom:1;}

Ako razumiješ logiku… Stavi sliku lišća kao pozadinu linka, i sliku lišća prozirnu kao hover…

[quote=“t00m”]
a.one:link {color:#000000; text-decoration:none; background-image:url(‘slike/lisce10.jpg’);}

a.one:hover {color:#000000; background-image:url(‘slike/lisce10.jpg’); opacity:0.5; filter:alpha(opacity=50); zoom:1;}

Ako razumiješ logiku… Stavi sliku lišća kao pozadinu linka, i sliku lišća prozirnu kao hover…[/quote]

Ni to ne radi kako treba. Jednostavno, slika se tako složi u samu pozadinu teksta, a neće se raširiti i malo šire od njega.

http://public.carnet.hr/~ahorvate/pitanje/aforizam3.htm

Probala sam ubaciti i one naredbe za width i height koje si predložio u prošlom postu, ali na njih uopće ne reagira. Mogu staviti brojeve koje hoću - 20, 200, 2000, no nema promjene, slika je uvijek samo uz tekst. Probala sam da uz te brojeve ne piše nikakva mjerna jedinica, ili da piše px ili pt, i ništa se ne mijenja. Sad trenutno su gore u css-u naredbe

a.one:link {color:#000000; text-decoration:none; background-image:url(‘slike/lisce10.jpg’); width:#20; height:#20;}

a.one:visited {color:#000000;text-decoration:none; background-image:url(‘slike/lisce10.jpg’); width:#20; height:#20;}

a.one:hover { background-image:url(‘slike/lisce10.jpg’); opacity:0.5; filter:alpha(opacity=50); zoom:1; color:#000000; width:#20; height:#20;}

Uz to, sad se događa i to da izblijedi i tekst kad miš dođe preko njega. To bi se moglo riješiti time da pod hover stavim neku drugu sliku (koja će biti jednostavno izbljeđena verzija sadašnje slike), pa onda ne bi trebao opacity. No, sliku nikako da proširim…


Copyright © 2020 WM Forum - AboutContact - Sponsored by: Mydataknox & Webmaster.Ninja