单击链接时显示图像

Question

I want an image to get displayed on a page when the user clicks on a certain link that looks like #foo. Example

<a href="#dog">Dog</a>
<a href="#cat">Cat</a>

If the url contains #dog it will display a picture of a dog. if the url contains #cat it will display a picture of a cat. How can this be achieved. Then have the images be displayed in the image tag.

<img id="something" />

Edit: I'm thinking of maybe having all images hidden until link id clicked. Then somewho get the url and determine which image to display. The most important part is to do it from identifying the URL

A sudo code idea of what I'm trying to achieve.

    if url = #dog then 
    display in idelement dog.jpg 
    else if url = #cat then  
    display in idelement cat.jpg 
    else display defualt.jpg


<img id="idelement" />

Answer 1

i made an example here but it miss how you would like to display the image : http://jsfiddle.net/VgkUL/3/

<a href="#foo" >#foo....</a>
<a href="#cat" >#cat....</a>

$('a').each( function() {
    $(this).click( function(e) {
        var imgUrl = $(this).attr("href"); // url of the image, you can save it somewhere else into the a Tag
        alert(imgUrl);
        // display here the image where you want
        e.preventDefault();
        return false;
    })
})