NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
IT rekvalifikace s podporou uplatnění. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Avatar
arkeas93
Člen
Avatar
arkeas93:23.3.2013 8:57

Čaute,

Předem se omlouvám jestli tenhle topic někde už je (už jsem to tu prolez křížem krážem)

Chtěl bych udělat aby po najeti myši se mi obrázek změnil(mam 2 obrazky jeden 48x48 druhy 64x64)
primární je 48x48 a po najetí myši bych chtěl ten druhy 64x64.
html

<header id="hlavicka">
 <a href="#"><img src="./obrazky/domek48.png" alt="domek"></a>
</header>

css

header#hlavicka  {
                  position:relative;
                  left:462px;
                  width:180px;
                  height:160px;
                  text-align:center;
                  background:#00FFF2;
                  border-radius: 0px 0px 60px 60px;
                 }



header#hlavicka a:hover
                        {
                         background: url('../obrazky/domek64.png');
                        }
 
Odpovědět
23.3.2013 8:57
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na arkeas93
Honza Bittner:23.3.2013 9:38

Ahoj.. pozadí u headeru máš udělané přes IMG ...
jestli chceš opravdu pozadí tak si ho nastav v CSS jako background: url(...); jinak ti mohou uživatelé šáhnout na obrázek a přenášet atp. jestli víš co myslím .. je to prostě hezčí přes background ..

<header id="hlavicka">
</header>
header#hlavicka  {
width:180px;
height:160px;
text-align:center;
background:#00FFF2 url("grafika/prvni_obraz.jpg");
border-radius: 0px 0px 60px 60px;
}

header#hlavicka a:hover
{
background: #00FFF2 url("grafika/druhy_obrazek.jpg");
}

snad ti to půjde ..

Nahoru Odpovědět
23.3.2013 9:38
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
arkeas93
Člen
Avatar
Odpovídá na Honza Bittner
arkeas93:23.3.2013 20:27

čau,

Zkoušel jsem to ale nefunguje mi to.
BTW. pozadí by měla být jen barva a obrázek jsem chtěl spíš jako tlačítko, a hover měl tlačítko jen vyměnit za větší. Ale asi mi nic víc nezbyde než to zkusit asi přes JavaScript to vím že snad nějak jde, jinak díky

 
Nahoru Odpovědět
23.3.2013 20:27
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na arkeas93
Honza Bittner:23.3.2013 20:28

popiš (nakresli/screen) co přesně chceš ?

Nahoru Odpovědět
23.3.2013 20:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
arkeas93
Člen
Avatar
arkeas93:23.3.2013 20:52

čarou jsem dokreslil okraje

 
Nahoru Odpovědět
23.3.2013 20:52
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na arkeas93
Michal Žůrek - misaz:27.3.2013 20:40

Pokud jsem to pochopil dobře, tak by se po najetí na ten domeček měl zvětšit.

Dej tam ten větší, ať to není rozmazané. Pomocí CSS mu nastav velikost na tu menší, takže budeš mít velký obrázek zmenšený. Přidej CSS3 animaci a v hoveru na ni odkaž. Je tam jeden problém: když animace skončí tak se to vrátí do původní velikosti, ale to je už detail. Jde to obsloužit JavaScriptem.

 
Nahoru Odpovědět
27.3.2013 20:40
Avatar
maxlee
Člen
Avatar
maxlee:2.4.2013 20:44

png su lubovolne obrazky a pri najeti mysi sa zvecsi. treba skusit.

<img src="speed.png" alt="pozadie" width="650" id="die" />
<ul id="menu3">
<li><a href="#">Home<img src="home.png" id="c" alt=""/></a></li>
<li><a href="#">hudba<img src="mp.png" id="c" alt=""/></a></li>
<li><a href="#">filmy<img src="play.png" id="c" alt=""/></a></li>
<li><a href="#">klik<img src="napster.png" id="c" alt=""/></a></li>
<li><a href="#">preco<img src="default.png" id="c" alt=""/></a></li>
</ul>
#die
{
position: relative;
left: 1px;
top: 1px;
z-index: 1;
}

#menu3
{ position:relative;
left: 50px;
margin-top: -30px;
z-index: 10;

}

#menu3 li
{
width:5px;
height:5px;
float:left;
margin-right:100px;
list-style-type:none;
}

#menu3 a
{
font-style:normal;
font-size:1.0em;
line-height:1.5em;
text-align: center;
text-decoration:none;
color:#000;
text-shadow: -7px -7px 1px gray;
}

#c {
width: 50px;
height:50px;
}

#c:hover {
overflow: hidden;
cursor:pointer;
width: 100px;
height:100px;
}

 
Nahoru Odpovědět
2.4.2013 20:44
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na maxlee
Honza Bittner:3.4.2013 17:16

příště použij vložení kódu .. díky :)

Nahoru Odpovědět
3.4.2013 17:16
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.