Ha kép fölé viszem az egeret, hogyan lehet átváltani a képet egy másikra?
Így nézne ki nálam a menü, képekből állna, amire kattintva megnyílna a hivatkozás.
<a href="matt.html"><img src="kepek/x/Matt.png"></a>
De szeretném, hogy amikor egérrel a kép fölé mennék (de nem kattintok rá), a Matt.png helyett megjelenne a "kepek/x/Matt2.png" nevű kép. Hogy csináljam?
válasza:JS -el, módosítod hover eseményre a kép SRC -jét.
De szebb lenne CSS és background-image -el.
Sőt ha :befor elemnek berakod a másik képet, akár átmenet is lehet.
Ami sokkal szebb mint ha csak "ugrik" egyet.
válasza:<!doctype html>
<html>
<head>
<style>
#menu a {
display: inline-block;
background-image: url("kepek/x/Matt.png");
width: 123px; /* A kép szélessége. */
height: 28px; /* A kép magassága. */
background-color: #CCCCCC; /* A képet helyettesítõ szín. */
}
#menu a:hover { /* Amikor a kurzort felé húzzák. */
background-image: url("kepek/x/Matt2.png");
}
#menu a:active { /* Amikor rákattintanak. */
background-image: url("kepek/x/Matt3.png");
}
</style>
</head>
<body>
<div id="menu">
<a href="#"> </a>
<a href="#"> </a>
<div>
</body>
</html>
Még egy kérdésem/kérésem lenne, itt kísérletezgetek, de nem akar összejönni a dolog. Szóval most úgy tökéletesen működik a kép átmenet, a html hivatkozások viszont nem.
Az index fájlban ez van most a bodyban:
<div id="menu">
<a href="matt.html"> </a>
<b href="crylo.html"> </b>
<c href="kylo.html"> </c>
<d href="ben.html"> </d>
a stilus.css-ben meg ez van:
#menu a {
display: inline-block;
background-image: url("kepek/x/Matt.png");
width: 384px;
height: 394px;
}
#menu a:hover {
background-image: url("kepek/x/Matt1.png");
transition: 0.5s;
}
#menu a:active {
background-image: url("kepek/x/Matt.png");
}
#menu b {
display: inline-block;
background-image: url("kepek/x/Cry-Lo.png");
width: 384px;
height: 394px;
background-color: #CCCCCC;
}
#menu b:hover {
background-image: url("kepek/x/Cry-Lo1.png");
transition: 0.5s;
}
#menu b:active {
background-image: url("kepek/x/Cry-Lo.png");
}
#menu c {
display: inline-block;
background-image: url("kepek/x/Kylo.png");
width: 384px;
height: 394px;
background-color: #CCCCCC;
}
#menu c:hover {
background-image: url("kepek/x/Kylo1.png");
transition: 0.5s;
}
#menu c:active
background-image: url("kepek/x/Kylo.png");
}
#menu d {
display: inline-block;
background-image: url("kepek/x/Ben.png");
width: 384px;
height: 394px;
background-color: #CCCCCC;
}
#menu d:hover {
background-image: url("kepek/x/Ben1.png");
transition: 0.5s;
}
#menu d:active
background-image: url("kepek/x/Ben.png");
}
Szóval így működik a képátmenet, a hivatkozást viszont nem mutatja a képre kattintva. A másik, ha átírom
<a href="matt.html"> </a>
<a href="crylo.html"> </a>
<a href="kylo.html"> </a>
<a href="ben.html"> </a>
a body tartalmát, akkor már működik a hivatkozás, viszont akkor meg a képátmenetes dolog nem működik. Már próbáltam pár dolgot, se egyik se vezetett eredményre, pl. nálam a logika (vagyis ahogy tanultam) azt diktálná, hogy így kéne kinéznie a sornak
<a href="matt.html"><img src="kepek/x/matt.png"</a>
De ha így átírom, megint nem működik a képátmenet. :S
Valami ötlet, hogy a képátmenet meg a hivatkozás is működjön egyszerre?
válasza:A "#menu c:active" és a "#menu d:active" sorokból hiányzik a kapcsoszárójel.
A link HTML elemeknek a neve <a>. Nem találgathatsz ki új HTML elemeket. A <b> HTML elem a "Bold text" (félkövér szöveg). <c> és <d> HTML elemek nem is léteznek.
CSS-ben a HTML elemeket "class"-szal, vagy "id"-vel kell azonosítani.
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!