Question

I have been searching around for quite a while on ways to do this, and I’m beginning to think it’s not doable. I can’t say I’m an expert in html or CSS, but I have done a lot of research and found no tutorial for this specific problem.

I am coding a software user’s guide to be posted online. The guide will include screenshots of the software, with figure numbers. The original code (I’m not the first on this project) simply hardcodes in the numbers of each image, which becomes more and more tedious as more information is added in.

I know there is a way to simply add in a new image and then tag the caption to include an automatically incrementing figure number. This would be very helpful, for if a new figure is added in, the numbers automatically change in all of the figures after the new one.

IF that were the only facet of the problem, I would simply use a CSS counter and be done with it. However, I also want to be able to reference specific figures in the text of the guide. My question is this: Is there a way to do this in CSS?

An example of text within the guide would be “Figure n shows the dialog box for customizing x.” Is there a way to reference the nth figure in the guide without hardcoding the numbers?

If this is not possible in CSS, is there another language that can do it?

Edit: To clarify: The figures themselves would be labeled consecutively. But if I wanted to, within my text, refer to Figure 3, for example, that could be anywhere.

Edit 2: I have tried a javascript implementation using arrays. However, now it seems that some versions of Internet Explorer refuse to show the script portions of my code.

I am using the <script></script> tags within the body of my document, calling a javascript function located in the head. I know the syntax must be right because firefox and google chrome both load the page just fine. Is this simply IE being picky about something? (I checked, it’s not my security settings).

Answer 1

Thing is, referring to things by their page index (incrementing) and by some figure number you maintain (also incrementing) are two identical solutions.

Actual problem: Maintaining the figure list with a sequence of ordered numeric identifiers becomes more difficult the longer a document becomes.

Solution: Give figures names, not numbers, and generate a number for display to the user. This gives ordered numbering to the user and allows you to reference figures with memorable names, but does not require you to reorder or modify figure numbers after every edit. Here’s a quick example using jQuery:

<h2>How to add a contact</h2>
<img id="add-contact" class="figure" src="figures/add-contact.png" />
<p><a href="#add-contact">This screenshot</a> shows the location of the Add Contact button.</p>

<script type="text/javascript">
   $(function() {
     var figNum = 0;
     $(".figure").each(function() {
       figNum++;
       $("a[href='#"+$(this).attr("id")+"']").append(" (figure "+figNum+")");
     });
   });
</script>