Pomoc se sloučením

Ahoj,

potřeboval bych pomoc se sloučením 2 kódů v CSS. Jeden zařizuje to, aby se při najetí myši na stávající obrázek se změnil na jiný; a druhý kód je k tomu, aby při najetí na obrázek (odkaz) zobrazil v bublině další obrázek. Bohužel se mi pořád nedaří tyto 2 kódy sloučit k sobě, aby fungovali oba zároveň.

www.masozraverostliny.com


/*tenhle kód zajistí aby se v bublině zobrazil text nebo obrázek*/

a.cephalotus_obr {
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
text-decoration:none}

a.cephalotus_obr:hover {z-index:25; background-color:#ff0}

a.cephalotus_obr span {display: none}

a.cephalotus_obr:hover span { /*the span will display just on :hover state*/
display:block;
position:absolute;
top:0em; left:2em; width:15em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: center}

V HTML je to takhle:

<a href="#" class="info"><span><img src="pix/tlacitka/fotogalerie_unactive.png"></span></a>

Takhle samotné to funguje.


A tady je druhý kód:

/*tenhle kód zajistí, aby se při najetí myši na stávající obrázek změnil na jiný*/

div.cephalotus {
float: left;
width: 132px; height: 34px;
background: url( '../pix/tlacitka/cephalotus_active.png' ) 0 no-repeat;
}

div.cephalotus a {
display: block;
margin: 0; padding:0;
width:132; height:34;
overflow:hidden;
background: url( '../pix/tlacitka/cephalotus_unactive.png' ) top left no-repeat;
}
div.cephalotus span {
display: block;
}
div.cephalotus a:hover {
background-position: 134;
}

V HTML je to takhle:

<div class="cephalotus"><span class="cephalotus">
<a href="odkazy/cephalotus.htm" target="_self" title="Cephalotus (Láčkovice)"></a></span></div>

Takhle samotné to také funguje


Kdyžtak se ještě můžete podívat na externí CSS [url=http://www.masozraverostliny.com/css/pozice.css
]www.masozraverostliny.com/css/pozice.css
[/url]

A také si můžete zobrazit zdrojový kód na adrese www.masozraverostliny.com


Poradil by mi prosím někdo jak to sloučit, aby to fungovalo - při najetí myši na obrázek aby se změnil v jiný a zároveň aby se v bublině zobrazil obrázek?

Díky moc

Pavel

Tak jsem přepsal úvodní text

Toho sem se obával, taky mě napadlo že to budu muset celé předělat, ale nedá se nic dělat. TAkže zatím díky.

Jo a stím rozlišením je to tak, že mám verzi pro 1024x768 a verzi pro 600x800. S tou mojí grafikou jsem nucen to udělat to takhle.

Tak už jsem zprovoznil to menu, ale teď vůbec nefunguje ten obrázek v bublině nevím proč.

www.masozraverostliny.com/1024x768/index2.htm

Jo super, už to funguje, už to musim jenom odladit pro všechny prohlížeče. Vidim, že se mám ještě co učit v CSS :-)

Jo IE je někdy fakt dost *******. Takže díky moc.

Peta: díky ještě za ten jednoduší css těch prvních řádků. Jak říkám, zjistil jsem, že CSS ještě moc dobře neumím, ale to se snad podá.

Jinak tu dlouhou cestu k obrázkům mám schválně. To proto, že když to musim třeba za rok předělat jako třeba teď, tak se nemusim koukat jak a kde mám co uložený a rovnou píšu (jinak mi to stejně doplňuje editor). Ale dík

Takže ještě jednou moc díky

Tak už jediný problém je ten, že v Mozzile jsou odkazy roztáhlí a v IE normální.

peta: <div class="x uvodnik">
.x {position: relative; top: 35px; font-size: 1.2em; line-height: 130%; font-family: Arial, Verdana, "Verdana CE", "Geneva CE"; }
.uvodnik {left: 220px; z-index:17}
.rostliny {left: 220px; z-index:18}
)

to jsem udělal akorát nefunguje to left: 0px nevim proč

Ještě prosím o jednu radu. Potřeboval bych ještě nějak nastavit to, aby se mě ty obrázky zobrazovali tak uprostřed toho menu a nesjížděli pořád dolů. Nevím jak na to.

www.masozraverostliny.com/1024x768/index1.htm

díky

Jo tak tohle sem nakonec vyřešil ale ten css kód musí být dlouhý bohužel