Hover k obrázkovému odkazu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Hover k obrázkovému odkazu – CSS – Fórum – Programujte.comHover k obrázkovému odkazu – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
aQihS0
Duch
16. 8. 2010   #1
-
0
-

Zdravím jde nějak nadefinovat hover k obrázkovému odkazu? Přesněji, mám obrázek jako odkaz a hover bych si představoval další obrázek. Zkoušel jsem:

HTML:

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


CSS:
.link1 {position:relative;

top:0px;
left:15px;
width:140px;
background: url("images/menu/news.gif");
background-repeat:no-repeat;}
.link1 a:hover {background-image: url("images/menu/newsOG.gif");}


a druhou možnost

HTML:
<a href="index.html"><img src="images/menu/news.gif" alt="news"></a>


CSS:
.leftbox a:hover {background-image: url("images/menu/newsOG.gif");

background-repeat:no-repeat;
background-postition:0 bottom;}


Ani jedna nefungovala tak jak jsem si představoval, ví někdo jak na to lépe? :)

Nahlásit jako SPAM
IP: 188.175.66.–
Reklama
Reklama
Kobi
~ Moderátor
+1
Věrný člen
17. 8. 2010   #2
-
0
-

Odkaz - a - jakožto řádkový element by neměl obalovat div, což je blokový element. Místo toho zkus z odkazu udělat blokový element pomocí vlastnosti display: block, nastav mu šířku a výšku podle obrázku, hover pak zavoláš přímo na ten odkaz. Mohlo by to vypadat nějak takto:

HTML:

<a href="#" class="blockLink"></a>

CSS:
.blockLink{

display: block;
width: 100px;
height: 100px;
background: url('image1.png') 0 0 no-repeat;
}
.blockLink:hover{
background: url('image2.png') 0 0 no-repeat
}

Vhodné by ještě bylo mít obě verze (hover i unhover) v jednom obrázku pod sebou a při hoveru jen pomocí background-position obrázek vhodně posunout.

Nahlásit jako SPAM
IP: 94.112.85.–
aQihS0
Duch
17. 8. 2010   #3
-
0
-

Díky moc, takhle jsem si to představoval :)

Nahlásit jako SPAM
IP: 188.175.66.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Hover — založil dinkin

Tr:hover — založil mORb

A:hover — založil myth

Nefunguje hover — založil Kano

HOver Menu — založil arno

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý