how to create link text linking to an image file?

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="#"><spa开发者_如何学Cn>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

---

You can just link directly to the image file:

<a href="tulip.jpg"><span>Tulip</span></a>

Assuming that tulip.jpg is in the same directory as the web page with the above code. This will load a page displaying just the specified image.

If you intended to display the image on the current page, after clicking a link, you will need to use some JavaScript to hide/show it.

Update (based on comments)

To display the image on the current page when a link is clicked, you can do something like this (JavaScript):

function showImage(hiddenImgId) {
    document.getElementById(hiddenImgId).style.display = "block";
}

With HTML similar to this:

<a href="#" onclick="showImage('hidden1');">Show Image</a>
<div id="hidden1" style="display:none">
    <img src="image.jpg" />
</div>

Update based on further comments

If you want to use jQuery, and the images are already loaded and hidden with display:none, as shown above, you can simply use:

$("#imageID").show();

The best option is probably to have the images visible by default, and hide them when the page loads using jQuery (code below assumes all images to hide have a class of imagesToHide):

$(document).ready(function() {
    $(".imagesToHide").hide();
});

This means any users who have JavaScript disabled will still see the images (as the code to hide them won't run), and the majority of users who have JavaScript enabled will see the page as intended.

---

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/

---

Or you can make a new html-page, which has the picture + information about. In this solution you can style the page, so its more user friendly and more interesting for the eye.

You can also use scripts like lightbox JS, if you want the user to stay on the same page:

http://www.huddletogether.com/projects/lightbox/ (Try to click on the images)

Normally I wouldnt use a textlink to a picture.

---

<a href="http://example.com/tulip.jpg">link text here</a>