Question

I make some web page which the function is to show some image.For the link text of course we use <a href....> and for image link we use <img src....>.

But how if i want to show some images after click some link text ?

<ul>
      <li><a href="#"><span>Tulip</span></a></li>
      <li><a href="#"><span>Rose</span></a></li>
      <li><a href="#"><span>Jasmine</span></a></li>
 </ul>

image file is

tulip.jpg
rose.jpg
Jasmine.jpg

Answer 1

You mentioned jQuery in your comment to @James Allardice.

You could do something like this:

$('ul li a').click(function(){
    var img = $(this).attr('href');
    $('#content').html('<img src="' + img + '" />');
    return false;
});

HTML

<ul>
    <li><a href="tulip.jpg" id="tulip">Tulip</a></li>
    <li><a href="rose.jpg" id="rose">Rose</a></li>
    <li><a href="jasmine.jpg" id="jasmine">Jasmine</a></li>
</ul>

<div id="content"></div>

Fiddle: http://jsfiddle.net/jasongennaro/K7pTu/