How to make an array of images specifically in the same <ul>?
<p>I am trying to make an image switcher for my portfolio site that is unique. To do this I think I need to be able to have an array of images that matches with the corresponding array of list items with the names of the projects they belong to, like this:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;img src="1.png"&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="2.png"&gt;&lt;/li&gt;
&lt;li&gt;&lt;img src="3.png"&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul&gt;
&lt;li&gt;Project 1&lt;/li&gt;
&lt;li&gt;Project 2&lt;/li&gt;
&lt;li&gt;Project 3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>So I guess I want the javascript to "think" like this: "Oh, img 2 is the second list item, if project 2 is clicked which is also the second list item, I should display img 2"</p>

<p>Ya digg?</p>

<p>Here is what I have so far, if you need a visual:
<a href="http://addproxy.net/sites/img_switcher/index.html" rel="nofollow">http://addproxy.net/sites/img_switcher/index.html</a></p>
