Efektu bitxia argazkiekin
3
CSSarekin jarraituz, gaur beste adibide bat erakutsi nahi dizuegu. Kasu honetan, CSSaz gain, Javascript bat erabiliko dugu efektu bitxi bat lortzeko.Testu honen azpiko bi argazki hauetan klik egiten baduzue ikus ahal izango duzue.
Hori lortzeko burutu beharrekoa ez da oso konplikatua eta zuekin partekatu nahi dugu.
Hasteko, <head> eta </head> etiketen artean hau koipiatu beharko duzu:
<script type=”text/javascript” src=”lightbox.js”></script>
Ez ahaztu “lightbox.js” scriptaren kokapena zehaztu beharko duzula.
Segidan, zure CSSan honako kodea txertatu beharko duzu:
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url();
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url();
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}
Eta azkenik, argazkia jarri nahi duzun tokian honako hau idatzi beharko duzu:
<a href=”images/image-1.jpg” rel=”lightbox”>irudia#1</a>
Eta hori da guztia. Erraza, ezta?
lightbox.js
overlay.png
Oharra: Nik hemendik ikasi dut eta fitxategiak ere bertan dituzue. Hala ere, nik ez dut lortu Internet Explorer-en 
behar bezala jartzea (arrazoi gehiago FIREFOX erabiltzeko). Egileak egindakoa, berriz, oso ongi dabil exploradore guztietan. Baten batek laguntzen badit eskertu nioke.
IE-ekin nituen arazoak honela konpondu ditut.
<head> eta </head> artean honako kodea txertatu beharra dago:
<!–[if gte IE 5.5]>
<![if lt IE 7]>
<style type=”text/css”>
* html #overlay{
background-color: #000;
background-color: transparent;
background-image: url(/images/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=”/images/overlay.png”, sizingMethod=”scale”);
</style>
<![endif]>
<![endif]–>
Ea asmatzen duzuen.
Comment Egilea Administrator — 2006-01-23 @ 9:24