Background-image

[Sugarfree]

Iekš Topic description jau praktiski viss ir pateikts (background-image uz a:hover "uziet virsū" <img src="lalala" />)

 

Vai tas maz ir reāli? Varbūt ir kāds cits atribūts, nemaz nav jāizmanto background iekš CSS? Vārds background pats par sevi pasaka visu, bet varbūt tomēr tas ir iespējams?

[bubu]

Nekā nesapratu, kas pateikts iekš Topic description.

[Mr.Key]

Pareizi uzdots jautājums (saprotami aprakstīta problēma) ir puse no atbildes.

 

Mēs neesam telepāti. Iespējams, tev liekas, ka mēs sapratīsim tavu domu no pāris teikumiem. Bet tā tas nav, tāpēc, lūdzu, izskaidro plašāk, kas tevi tieši interesē.

Edited August 3, 2008 by Mr.Key

[Sugarfree]

Pieņemsim, ka ir attēls, links:

 

<a id="abc" href="#"><img src="images/pic-0.PNG" alt="Jaunumi" /></a>

 

CSS:

a#abc:hover {
 background: url(images/pic-1.PNG) no-repeat;
 ...
}

 

Man vajadzētu tā, ka tas attēls pic-1.PNG nomainītu attēlu pic-0.PNG uz hover... Vai ir tas maz ir iespējams?

Zinu, vienkāršs veids kā atrisināt šo būtu pievienot iekš CSS šādu rindiņu:

 

a#abc {

background: url(images/pic-0.PNG) no-repeat;

...

}

 

vai background: -???px; //sprite tehnika

 

BET, tad es saskaros ar problēmu dēļ kuras arī sāku domāt, kā tad to pareizāk izdarīt. Apskatot savas lapas teksta versiju iekš google, ievēroju, ka navigācijas liste kā tāda vispār it kā neeksistē! šos background attēlus acīmredzot google vispār ignorē, kā arī iekš <a href="#">...</a> man arī nekas nav norādīts, jo vajadzīgais teksts (par mums, jaunumi, galerija utt) jau ir uz attēliem (pogām), ko es izveidoju.

Lasīju, ka google spētu sagremot šos linkus, ja attēliem ir pievienoti klāt alt tagi, bet, ja es turpinu lietot tos pašus background attēlus, kā lai es pievienoju alt tagu - unreal? Ir kādi ieteikumi?

Edited August 3, 2008 by Sugarfree

[Mr.Key]

tev ar CSS ir jānoņem nost html image un jāuzliek background image ... varētu būt kaut kā šitā:

 

<a id="abc" href="#"><span><img src="images/pic-0.PNG" alt="Jaunumi" /></span></a>

 

a#abc img { display: none; }

 

a#abc:link span { width: x; height: y; background-image: url('...'); }

 

a#abc:hover span { background-image: url('...'); }

 

vai arī iztiekot bez span, pa tiešo likt background image a elementam.

 

 

Par google - risinājums ir img likt caur css:

 

<h1 id="jaunumi"><span>Jaunumi</span></h1>

 

Css:

 

h1#jaunumi span { display: none; }

h1 { height: 30px; background: transparent url('title-jaunumi.png') left top no-repeat; }

Edited August 3, 2008 by Mr.Key

[bubu]

Nav gluži elegantākais risinājums, bet nu šķiet ka jāstrādā:

a#abc img.hovered
{
display: none;
}
a#abc:hover img.hovered
{
display: inline;
}

a#abc img.normal 
{
display: inline;
}
a#abc:hover img.normal 
{
display: none;
}

<a id="abc" href="#">
<img class="normal" src="pic0.png" alt="Jaunumi" />
<img class="hovered" src="pic1.png" alt="Jaunumi" />
</a>

[Sugarfree]

Liels paldies par risinājumiem! Viss strādā kā iecerēts.