HTML gomb (? )
van 2db 100x100px kép, és ezekből szeretnék egy gombot, amire ha rákattintunk megnyit egy másik oldalt...
az egyik kép akkor legyen látható ha nincs a gombon az egér, a másik kép pedig ha rajta van az egér a gombon.
valaki tud segíteni?
válasza:Például:
<style>
#gomb{
width: 100px;
height: 100px;
background-image: url(kep1.jpg);
}
#gomb:hover{
background-image: url(kep2.jpg);
}
</style>
<a href="cel.html"><div id="gomb"></div></a>
válasza:Több megoldás van, a legcélszerűbb CSS-el megoldani. A lényege valami ilyesmi:
<html>
<head>
…
<style>
a.gomb {
background-image: url('…/gomb1.gif'); /* A normál háttérkép */
display: block; /* Blokk legyen, így beállítható a szélesség, magasság */
widht: 100px; /* szélesség */
height: 100px; /* magasság */
}
a.gomb:hover {
background-image:url('…/gomb1_felette.gif'); /* Kép, mikor az egér rajta van */
}
</style>
</head>
<body>
…
<a class="gomb"> </a>
…
</body>
</html>
válasza:Nos. Ha értesz a HTML-hez akkor tudod miért.
Két gomb esetén, pl. eltérő méretű gombok esetén – pl. ha a második 150x120-as – az én kódom:
<html>
<head>
…
<style>
a.elsogomb {
display: block;
widht: 100px;
height: 100px;
background-image: url('…/gomb1.gif');
}
a.elsogomb:hover {
background-image:url('…/gomb1_felette.gif');
}
a.masodikgomb {
display: block;
widht: 150px;
height: 120px;
background-image: url('…/gomb2.gif');
}
a.masodikgomb:hover {
background-image:url('…/gomb2_felette.gif');
}
</style>
</head>
<body>
…
<a class="elsogomb"> </a>
…
<a class="masodikgomb"> </a>
…
</body>
</html>
válasza: válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!