Problēma ar hover

[janjiss]

Problēma ir sekojošā:

nevaru izdomāt, kā pareizi pielietot CSS failu ar hover efektu uz linku ar bildi (<a href="......."><img src="......."></a> ),

tā lai uzbraucot ar peli nomainītos attēls.

Uzrakstīju šādu CSS failu:

a.menu:li {
width: 77 px;
height: 99 px;
background-image: url(images/home.jpg);
display: block;
border: none;
}

a.menu:hover {
background-image: url(images/home_hover.jpg);
border: none;
}

 

un pielietoju:

 <a href="......."><img class="menu"></a>

Es zinu ka kautkas ir nepareizi, bet nezinu, kas.

Edited July 14, 2007 by janjiss

[dmitriy]

Nezinu vai sitais tev palidzes:

a:hover img
{
//contents
}

Edited July 14, 2007 by dmitriy

[andrisp]

HTML kodā neliec vispār bildi. Izmanto tikai CSS.

[janjiss]

Sanāk ka <img> tagu nerakstīt vispār, tikai <a class="img hover" ?

[Kristabs]

.menu a{

background-image:url(bilde.gif);

display:block;

width:100px;

height:50px;

}

.menu a:hover{

background-image:url(cita_bilde.gif);

}

 

<div class="menu">

<a href="#">teksts</a>

</div>

[andrisp]

Vēl jau krutāk būtu:

<ul id="menu">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>

[janjiss]

Vēl jau krutāk būtu:

<ul id="menu">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>

Labi jau būtu, bet bildes katram linkam ir citas..

Tātad , neder..

[andrisp]

Nu vari jau katram li nodefinēt savu klasi atkarībā no bildes un tad caur CSS norādīt kādu background <a> elementam likt.

 

Bet vispār - ļauj man minēt - tev vizuāli visas bildes ir vienādas, tikai teksts uz katras ir atšķirīgs ? Ja jā, tad iesaku izmantot vienu bildi kā backgroundu un tekstu likt iekš HTML koda. Ar CSS palīdzību nocentrēt un piefīčot kā vajag.

[janjiss]

Kristabs variants arī nestrādā.

Mans HTML kods:

<td><div class="izvelne"><a href="./index.html"></a></td></div>

CSS:

.izvelne a{
background-image:url(images/home.jpg);
display:block;
width: 77 px;
height: 99 px;
}
.izvelne a:hover{
background-image:url(images/home2.jpg);
}

Bildes vietā rādās tikai balts laukums!

[janjiss]

Bildes vizuāli nav vienādas mainās tonis un teksts jau ir uz bildes.

Katrai bidei ir divi varianti parastais un hover(ar to pašu tekstu tikai hover ir nedaudz gaišākas)

[Paulinjsh]

janjiss tev tagi nepareizā kārtībā tiek aizvērti!

[Delfins]

Kāda jēga no TD-DIV !?

 

Imo... jāizmanto prasts saraksts. Piemēri pilns internets

[janjiss]

Ar sarkstiem liela pisha sanāk, atradu variantu ar java script:

 

<script type="text/javascript">
<!--
img1 = new Image;
img2 = new Image;
img1.src = '/img1.jpg';
img2.src = '/img2.jpg';
//-->
</script>
<a href="/blablabla.html" onmouseover="document.hover.src=img2.src" onmouseout="document.hover.src=img1.src">
<img src="/img1.jpg" style="border:0;" name="hover">
</a>

,

bet rodas problēma ar lapas izkārtojumu, bilde uzlec nedaudz uz augšu+lapas apakšā rodas gljuks un tikai pēc refresh viss nostājas savās vietās.

Dažu reizi atverot visss ir kārtībā, bet kād JS kodu pielieto uz vairākiem attēliem kods nestrādā vispār/

Secinājums: Purvā līdz ausīm :)