Section 4a.15. Adding the ranking number


4a.15. Adding the ranking number

Now that you know how many CDs there are in the Top 5, you can start adding a ranking number to each CD as it's added. Here's a look again at how we want the CD ranking to look.

The ranking is a white number inside a black box, overlaid on the top-left of the CD cover image.

The CD cover is an <img> element, and a child node of the "top5" <div>.

4a.15.1. More additions to our DOM tree

We need a text element for the ranking number. For the current ranking, we can just add one to numCds. But getting the formatting of the ranking isn't a JavaScript thing... we handle style with CSS, right?

Let's create a new <span> to put the ranking in, and then create some CSS to style the <span> just like we want it. So here's what we want the "top5" <div> part of the DOM tree to look like:

 body div div The "top5" <div>. There should be a <span> for each <img> element, just before the <img> the <span> ranks.span  img   span   img Here are the <img> elements for the CD covers. The ranking itself is just a text node with a number."1"                "2" 




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net