> My objective is to hide all the images except the first one in the
> table and show them only if i click on the link associated with the
> image. But what is happening is all the images are getting hidden,
> which i donot want.
>
> Also when i click on the link the image will be displayed for a split
> of a second but disappears because the page is getting loaded and
> hence the ready event is getting called again. Please let me know if
> there is anything wrong with the code.

Two problems:

1.)  Your selector for the first image is wrong.  You have this:

    $("img:not(first)").hide();

but it should be this (note the extra colon):

    $("img:not(:first)").hide();

You could also do the same thing like this:

    $("img:gt(0)").hide();


2.  Your click handlers need to return false to prevent the default
browser behavior (which is to load the linked page).

So your click handlers that look like this:

    $("a#tpt").click(function()
    {
        $("img#firstimg").show();
    });

become this:

    $("a#tpt").click(function()
    {
        $("img#firstimg").show();
        return false;
    });


Mike

Reply via email to