Style. Css, (képre egér = másik kép)?
Sziasztok!
Hogy alakítsam át, hogy ha az egeret ráhúzom a képre akkor másik kép jelenjen meg?
Style.css: amit át kellene írni:
.prev-post .arrow {
background: #FFFFFF url(../img/arrow_prev.png) 50% 50% no-repeat;
}
.next-post .arrow {
border-radius: 5px 0 0 5px;
background: #FFFFFF url(../img/arrow_next.png) 50% 50% no-repeat;
}
Bár nem CSS, de az alábbi módszerrel könnyen megoldhatod az egér rávitelével a képcserét:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="hu">
<head>
<meta content="text/html; charset=ISO-8859-2"
http-equiv="content-type">
<title>képcsere</title>
</head>
<body alink="#000088" bgcolor="silver" link="#0000ff"
text="#000000" vlink="#ff0000">
<br>
Szöveg<br>
<br>
<a href="#" onmouseout="img3.src='kep1.jpg'"
onmouseover="img3.src='kep2.jpg'"><img alt=""
src="kep1.jpg" widht="70" name="img3"
align="middle" border="0" height="300" width="500"></a>
<br>
<br>
Szöveg<br>
</body>
</html>
A lényeg a két "Szöveg" felirat közötti részben van. Természetesen az oldallal egy mappában ott kell lennie a két képfájlnak is. A méreteket a képekhez kell állítani.
.prev-post .arrow {
background: #FFFFFF url(../img/arrow_prev.png) 50% 50% no-repeat;
}
.prev-post .arrow:hover {
background: #FFFFFF url(../img/arrow_prev2.png) 50% 50% no-repeat;
}
* img[src="latogato.gif"], [src="latogato.gif"] {
background-image: url(latogato.PNG);
background-repeat: no repeat;
width:1px;
padding-bottom: 23px;
padding-right: 147px;
}
példa :D
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!