Changing href attribute

Your variable link would be:

<a id="colorLink" href="media/xxxxx-yyy.jpg">large pic</a>

Your toggling links would look like this:

<a href="#" onclick="designNumber='0001'; UpdateActionLink();">design1</a>
<a href="#" onclick="designNumber='0002'; UpdateActionLink();">design2</a>

<a href="#" onclick="colorNumber='001'; UpdateActionLink();">color1</a>
<a href="#" onclick="colorNumber='002'; UpdateActionLink();">color2</a>

Your javascript would look like this:

var designNumber = "";
var colorNumber = "";

function UpdateActionLink() {
    $("#colorlink").attr("href", "media/" + designNumber + "-" + colorNumber + ".jpg");
}

You'll probably want to add some validation to the colorLink tags onclick event to check to make sure designNumber and colorNumber have valid values, and if not, cancel the event and give the human a messaging saying they need to choose a valid design and color. Better would probably be to make a Get Design button, have disabled to start, and in UpdateActionLink check to see if the values are valid and if so enable the Get Design button.

You can use the attr method to read and modify the href.

html:

<a id="LargePic" href="media/xxxxx-yyy.jpg">large pic</a>

<a class="design" href="#">design1</a>
<a class="design" href="#">design2</a>
<a class="design" href="#">design3</a>

<a class="color" href="#">color1</a>
<a class="color" href="#">color2</a>
<a class="color" href="#">color3</a>

javascript:

$(".design").click(function() {
  var old = $("#LargePic").attr("href");
  var pos = old.indexOf('-');
  val color = old.substr(pos, 3);
  $("#LargePic").attr("href", "media/" + $(this).text() + "-" + color + ".jpg");
});

Parsing the old value is not bullet proof. You could avoid this by creating two variables to hold the design and color.

To minimise teh number of DOM queries you do you could store the current colour and design within an object;

function DesignSwitcher() {
    var params = $("#largePic").attr("id").split["-"],
        des = params[0],
        col = params[1];
    $(".design").click(function() {
       des = this.innerHTML;
       $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg");
    });
    $(".color").click(function() {
       col = this.innerHTML;
       $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg");
    });

}

new DesignSwitcher();

Add a class to your links, let's say myClass, and an ID on the main link, let's say myLink, and something like this should work :

$('.myClass').each(function(el) {
    el.bind('click', function(event) {
         $('myLink')attr('href', el.text());
    }
});