Ezen az oldalon olyan példákat gyűjtünk össze, amelyek weboldalak alapvető funkcióinak megvalósítására használhatók. Animált kép, mint hivatkozásA navigációt gyakran úgy tesszük csinosabbá, hogy a menüpontok képek. Segít a tájékozódásban, ha az egérmutató alatti menüpont (kép) picit megváltozik, így kiemelkedik az éppen kiválasztásra kerülő opció. A példa azt feltételezi, hogy a menüpontot szimbolizáló kép 100 pixel széles és 30 pixel magas.HTML<a id="menu1" href="...1. menüponthoz tartozó url..."></a> CSSa#menu1{ display: block; width: 100px; height: 30px; background-image: url(amikor-nincs-kiválasztva.png) ; } a#menu1:hover { background-image: url(amikor-ki-van-választva.png); } Képfelirat függöny-effektussalEgy kép magyarázata elhelyezhető egy olyan "rétegen", amely csak akkor jelenik meg (kitakarva a képet), ha az egérmutatóval fölé megyünk. Szokás függöny-effektusnak nevezni az ilyen animációkat (curtain-effect). ![]() HTML<div class="doboz"> <div class="cont"> <div class="fuggony"> <h1>A macska</h1> <p> A macska egy kisebb termetű húsevő emlősállat, amely a macskafélék családján belül a <i>Felis</i> nem <i>Felis silvestris</i> fajához tartozik. </p> </div> </div> </div> CSSDIV.doboz { width:300px; height:300px; padding:0px; border:solid 1px; margin:40px; overflow:hidden; background-image: url(cica.jpg); } DIV.cont { position: relative; width:300px; height:600px; padding:0px; margin: 0px; overflow:hidden; } DIV.fuggony { color: white; overflow:hidden; position: absolute; transition: all 0.5s; -webkit-transition: all 0.5s; background-color:rgba(100,100,100,0.7); width:280px; height:580px; padding:10px; margin: 0px; margin-top:210px; } DIV.fuggony:hover { overflow:hidden; transition: all 0.5s; -webkit-transition: all 0.5s; padding: 10px; margin-top:0px; } H1 { padding:0px; font-family: Arial; } KépMenü, listábólEgy számozatlan listát (vízszintes) menüvé alakíthatunk. ![]() HTML<div id="menu"> <ul id="menu"> <li><a href="http://www.szepmuveszeti.hu">Szépművészeti múzeum</a></li> <li><a href="http://www.trafo.hu">Trafó</a></li> <li><a href="http://mupa.hu">Művészetek Palotája</a></li> </ul> </div> CSSDIV#menu { background-color: #010326; width: 600px; height: 30px; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; border: 0px; overflow: hidden; font-family: sans-serif; } #menu ul#menu { margin: 0px 0px 0px 0px; padding: 0px; height:100%; float:left; height:30px; overflow:hidden; list-style-type: none; } #menu ul#menu li { margin: 0px; padding: 0px; float:left; height:100%; } #menu ul#menu li a { float:left; font-size:14pt; font-weight: bold; text-decoration: none; height:100%; padding:0 15px; margin: 0px; line-height:30px; color: white; } #menu ul#menu li a:hover { background:url(menuhover.gif) top left repeat-x; text-decoration:none; } KépForrás: http://www.omnimint.com/A6/JavaScript/Change-external-CSS-stylesheet-file-with-JavaScript.html <html> <head> <title>Changing CSS extern file using only JavaScript</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
<script type="text/javascript"> function changeCSS(cssFile, cssLinkIndex) { var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); var newlink = document.createElement("link");
newlink.setAttribute("type", "text/css"); newlink.setAttribute("href", cssFile); document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); } </script> </head> <body> <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a> <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> </body> </html> Animációk a Canvas elem felhasználásával (CSS+HTML5+javascript)Reszponzív oldalak |
Hálózatok >