Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
giving aritcle thumbs hover states
I would like to give hover states to article thumbnails in my portfolios project navigation panel.
I am trying to figure out a way to modify the css in the image fade revisted jquery method but it’s not ideal as it uses one css background sprite for all buttons in a nav bar. I can use it in raw html form but it wouldn’t be very dynamic or txp article driven.
I just want to make sure theres no easier way of doing this before I post the problems I’m having using the above method dynamically.
-best
kevin
its a bad hen that wont scratch itself.
photogallery
Offline
Re: giving aritcle thumbs hover states
kvnmcwebn wrote:
I would like to give hover states to article thumbnails in my portfolios project navigation panel.
You mean different backgrounds for different list items? You can, by giving the li a different class. You can use upm_image for example to retrieve the url of image. The CSS part can be done by using regular TXP tags too. Something like:
<style type="text/css">
<txp:article>
.nav-<txp:article_id /> a {
background: url("<txp:upm_article_image><txp:upm_img_full_url /></txp:upm_article_image>") no-repeat 0 0;
}
.nav-<txp:article_id /> a .hover {
/* My hover stuff for the element */
}
</txp:article>
</style>And the list output something like:
[...] <li class="nav-<txp:article_id />"><txp:permlink /></li> [...]It’s just raw example, showing that it can be done — and quite easily too.
Last edited by Gocom (2009-10-14 22:54:36)
Offline
Re: giving aritcle thumbs hover states
Hi Gocom, I’m going for a jquery fade effect. So on mouse over it fades the hover state in and on mouse out it fades away again. Your suggestion is very interesting and this bit:
<li class=“nav-<txp:article_id />”>
might be a big help.
thanks
kevin
its a bad hen that wont scratch itself.
photogallery
Offline