Jump to content
php.lv forumi

Background-image


Sugarfree

Recommended Posts

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?

Link to comment
Share on other sites

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 by Mr.Key
Link to comment
Share on other sites

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 by Sugarfree
Link to comment
Share on other sites

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 by Mr.Key
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

×
×
  • Create New...