extracting text to swap image

[Xious]

I am trying to take a list of names, extract the name and use it for the image name, all while changing one image.ex:John Smith --> JohnSmith.jpg --> img id=pic --> img src=JohnSmith.jpgHopefully that points out what I'm trying to accomplish. Anyways, I know how to do an image swap, but I can't figure out how to extract the text (John Smith) for the image link. Can anyone shed some light. I would like to use as much CSS as possible, but I posted it here cause I think this requires a lot of JavaScript.X

[aspnetguy]

html

<select onchange="swapImg(this)"><option value="JohnSmith">John Smith</option><option value="JohnDoe">John Doe</option><option value="JaneSmith">Jane Smith</option></select><br/><img src="" id="pic" alt=""/>

javascript

function swapImg(selBox){    var img = document.getElementById('pic');    img.src = selBox[selBox.selectedIndex].value + '.jpg';}

Is that what you mean?

[Xious]

I don't want a drop-down box, though. I want just a simple text list in one column and a picture in the other column. When you click on the text name on the left, the picture on the right changes. Something like this:

<p><a href=# onclick="pic.src='JohnSmith.jpg'">John Smith</a><br /><a href=# onclick="pic.src='JaneSmith.jpg'">Jane Smith</a><br /><a href=# onclick="pic.src='CoolGuyjpg'">Cool Guy</a></p><img id=pic src="" />

However, I would like not to have to type out the whole onclick for every name. I would like to just extract the name from the list.

[Xious]

Well, I finally figured it out by myself. I used the following code if anyone is interested.

<div id="left"><a id="fullname" onclick="pic.src='Images/' + document.getElementById('fullname').innerHTML + '.jpg'; document.getElementById('desc').innerHTML=document.getElementById('fullname').innerHTML" href="#">John Smith</a><br /></div><div id="right" align="left"><img id="pic" src="" alt="" /><br /><p id="desc"></p></div>