Aktiv CSS menupont (Szöveg helyett Képpel) - Lehetetlen?
HTML-ben írtam egy ilyet:
<A HREF="#" onMouseOver="document.image2.src='button2.gif';"
onMouseOut="document.image2.src='button1.gif';">
<IMG SRC="button1.gif" NAME="image2" width="140" height="40" border="0"></A>
Ezt szeretném én CSS-ben megvalósírtani.
■ <A HREF="#" onMouseOver="document.image2.src='button2.gif';"
onMouseOut="document.image2.src='button1.gif';">
<IMG SRC="button1.gif" NAME="image2" width="140" height="40" border="0"></A>
Ezt szeretném én CSS-ben megvalósírtani.
Ilyenen még nem gondolkodtam :)
Mr.Tiny
en sem vagyok a kepek hive
http://www.mek.hu/ << valami ilyesmit szeretnel ?
Hover effekt képpel
http://www.magyarorszag.hu/hirek (bal menü)
-boogie-
keress rá a FIR css
ferenc voltam
Leírnád a megoldást?
Én a Css-ben ezt írtam:
.menu_index {background: url('button1.gif') no-repeat; height: 40px;}
.menu_index a:hover {background: url('button2.gif') no-repeat; height: 40px;}
A HTML-ben pedig:
<A HREF="@">
<div class="menu_index"></div>
</a>
Rossz nyomon járok?
Rossz
aegy inline elem, adivpedig egy blokk elem, inline elemen belül nem lehet blokk elem, tehát linken belül blokk elem. Még ha a böngésző nem is fog érte szólni, semmiképp sem ajánlott.Alapvetően nézzed meg a mo.hu-n, hogy hogyan van. Nézzed meg, milyen azonosítók, osztályok vannak a HTML forrásban, s párosítsd össze a CSS-sel. A lényeg, hogy először kiteszel egy sima linket, majd valamelyik "image replacement" módszerrel elrejted a tartalmát, s kiteszel helyette egy képet, s végül a
hoversegítségével megcsinálod a képváltást. A probléma a megközelítéseddel, hogy üres linket nem teszünk ki, csak olyat, ami kikapcsolt képek esetén is megjelenít valamilyen szöveget, illetve felolvasószoftverek számára is megoldást nyújt.Az ide vágó CSS a http://misc.magyarorszag.hu/css/mohu_hirek.css fájlban legelöl látható, igaz, nem minden van itt megadva, csak a lényeg. Mégvalami. Internet Explorerben csak a link elemen van értelmezve a
hover, más elemeken nem.Remélem segítettem valamit.
-boogie-
Írtam egy ilyet, ami erre
<STYLE type=text/css>
#menu A.home {WIDTH: 140px;}
#menu A.home:visited {background: url('home2.gif') no-repeat; height: 40px; margin: 0px;}
#menu A.home:hover {background: url('home1.gif') no-repeat; height: 40px; margin: 0px;}
#menu A.home:active {background: url('home1.gif') no-repeat; height: 40px; margin: px;}
</STYLE>
<DIV id="menu">
<A class="home" href="/index.html"></A>
</DIV>
De ez nem tetszik, mert a <DIV id="menu"> alá csak 3 gombot lehet beálítani, a negyediket már nem jeleníti meg. Ez miért van?
Tudna valaki írni egy rövidebb, frappánsabb kódot, megopldást, ami 3 elemnél többet is tud kezelni?