Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2009-04-21 03:20:21
- mariepoulin
- New Member
- Registered: 2009-04-21
- Posts: 5
How do I get an IMG thumbnail to change to the full IMG on rollover?
Does anyone know how I can go about this?
I want to have a row of images (in their thumbnail state), and when you hover over or mouseover an image, it changes to the full image. Both the full image and it’s thumbnail would be the same size, but they are actually different images.
I saw there was an <txp:anc_rollover /> plugin that did something quite close to what I need, but it no longer exists.
Can anyone offer any insight?
I would really appreciate it!
Offline
Re: How do I get an IMG thumbnail to change to the full IMG on rollover?
Hi mariepoulin,
Would you like it to be a CSS-only solution or would you prefer a JS solution?
For a CSS-only solution, you may want to (ab)use the a:hover pseudo-class.
<a class="image" href="#">
<img class="tn-img" src="/path/to/thumbnail" />
<img class="full-img"src="/path/to/full-image" />
</a>Then, in your CSS
a.image {display: block; position: relative}
a.image img.full-img {display:none}
a.image:hover img.full-img {display:block; position: absolute; top:0; left: 0}To get the necessary HTML output to accomplish this tasks, you could probably do it with built-in TXP tags, or for sure, using smd_gallery or upm_image.
Now you have a challenge… come back when done (or when you get stucked and need more help or if you want to read the JS solution) ;)
Last edited by maniqui (2009-04-21 03:52:38)
Offline
#3 2009-04-23 18:33:32
- mariepoulin
- New Member
- Registered: 2009-04-21
- Posts: 5
Re: How do I get an IMG thumbnail to change to the full IMG on rollover?
That got me pretty close to what I want to do- i think i can work with that, thank you so much!!
Offline