Bullet afbeeldingen aanpassen

Met CSS is het eenvoudig om je lijsten te voorzien van een eigen (bullet) afbeelding. Het wordt een stuk lastiger als je voor lijst items met een link een andre afbeelding wilt gebruiken.

Hoewel met een paar regels Jquery code is dit zonder je CSS of XHTML code te veranderen eenvoudig te doen.

XHTML code

<div id="content"> 
    <ul> 
        <li>item-01</li> 
        <li>item-02</li> 
        <li><a href="#">item-03 with a red bullet image</a></li> 
    </ul> 
</div>

CSS code

#content ul { 
    display: block;
    float: left; 
    width: 97%; 
    font-size: 120%; 
    margin-bottom: 1.5em; 
} 

#content li { 
    float: left; 
    width: 97%; 
    background-image: url('/images/bullet-black.gif'); 
    background-repeat: no-repeat; 
    background-position: 0px 4px; padding-left: 18px;
} 

#content li a { 
    text-decoration: none;
} 

#content li a:hover { 
    text-decoration: underline;
}

Jquery code

// call jquery from the head of your template

<script src="http://www.google.com/jsapi?key=API_KEY_HERE" type="text/javascript">

</script>

<script type="text/javascript">
    // <![CDATA[    
        google.load("jquery", "1.4.2");
    // ]]>
</script> 

// loop over all li's having a link (a) and change the bullet image. 

$(document).ready(function() { 
    $("#content ul li a").each(function (i) { 
        $(this).parent().css('background-image', 'url(/images/bullet-red.gif)'); 
    }); 
}