How can I achieve this effect with jQuery or CSS?

Question

Is it possible to switch HTML on click?

I have an index page with a large image. Under the image there are four links. When the cursor rolls over a link I would like a small tooltip to appear. If the user clicks the link I want the large image to change and some extra HTML to appear over it (just a small content box).

I think I have figured out the tooltip using jQuery but I'm not sure how to change the image and add a small content box over it.

Thanks in advance everyone.

Answer 1

Tabtastic is a good, accessible, gracefully degrading implementation of this.

Answer 2

Consider this snippet:

$("#someLinkID").click(function() {
    $("#someImageID").attr("src","newimage.jpg");
    $("#someContentDiv").show();
});

The syntax might be off, i haven't used jQuery in a few months, but you get the idea. Basically, you attach a click handler to the link, and when the handler is fired, you can dynamically change the src attribute of the image tag to whatever image you want, and at the same time you can show a div that you have positioned over the image ahead of time with its visibility set to hidden.

Answer 3

It sounds to me like you might want a content slider... check out this list of 25 different ones.