How do i animate a line to follow the shortest path to a predefined spot?

this is my first post here.
I am in need of some help with the following problem:

  • i have predefined interest points at the 3 'x’s marked on the grid-like picture below
  • there is only one common starting point which is where all of them are circled at the bottom
  • notice the diagonal line going through the entire grid that the origin is placed on at the bottom.
  • now the problem is, how can i press the colored buttons on the bottom and have the corresponding line join to their corresponding x’s taking the shortest route there? i used colors to hopefully make it more clearly how the line would connect if the button were presssed. in the end only one line will appear at a time.
    an easier way of describing this would be something similar to the idea of mapquest, yahoo maps, or google map, how a user would state the initial starting point and the final destination and the line would join up the two locations taking the shortest route rather than going in random directions.

Any help or direction to some help would be great. sorry about how confusing this is…i seem to have a hard time explaining this to friends as well.
Thanks in advance.