CODEWITHSUNDEEP
jquerycssrollover
Charles Marsh
Charles Marsh

Reputation: 465

How can I achieve this effect with jQuery or CSS?

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.

Upvotes: 0

Views: 119

Answers (3)

Mottie
Mottie

Reputation: 86413

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

Upvotes: 0

Jason Miesionczek
Jason Miesionczek

Reputation: 14448

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.

Upvotes: 2

Quentin
Quentin

Reputation: 943510

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

Upvotes: 0

Related Questions