listStyleImage özelliği, UL, OL ve LI elementlerinde ve display özelliği list-item olarak tanımlanmış elementlerde liste imi olarak gösterilecek resmin belirlenmesini sağlar.
DOM Sözdizimi
element.style.listStyleImage = "url(resimAdres)"
CSS Sözdizimi
list-style-image: url(resimAdres)
| resimAdres | Liste imi olarak kullnılacak resmin adresini belirler. |
Aşağıdaki örnek, list-style-image özelliği ile liste imi resimleri belirlenmiş li elementlerinin MouseOver ve MouseOut olaylarında liste imi resimlerinin değiştirilmesini göstermektedir.
<style type="text/css">
ul#ornekListe
{
background-color: #E0E0E0;
width: 120px;
}
ul#ornekListe li
{
list-style-image: url("yildiz_gri.gif");
line-height: 1.5em;
}
</style>
<script type="text/javascript">
function sec(elem)
{
elem.style.listStyleImage = "url(yildiz_sari.gif)";
}
function birak(elem)
{
elem.style.listStyleImage = "url(yildiz_gri.gif)";
}
</script>
<ul id="ornekListe">
<li onMouseOver="sec(this)" onMouseOut="birak(this)">Seçim - 1</li>
<li onMouseOver="sec(this)" onMouseOut="birak(this)">Seçim - 2</li>
<li onMouseOver="sec(this)" onMouseOut="birak(this)">Seçim - 3</li>
<li onMouseOver="sec(this)" onMouseOut="birak(this)">Seçim - 4</li>
<li onMouseOver="sec(this)" onMouseOut="birak(this)">Seçim - 5</li>
</ul>
Test Edin
- Seçim - 1
- Seçim - 2
- Seçim - 3
- Seçim - 4
- Seçim - 5