Rollover images

Castrobot · 2008-04-21 08:57:37

Hi all,

I was wondering if there is some textpattern shortcut coding that we can use or do we have to go the old javascript way to make rollovers?

For example, I was wondering if linking my source images should be done the “texpattern way”…
“<txp:site_url/>images/home/1beratung.png”
or just
“images/home/1beratung.png”

Thanks in advance! (and sorry if it sounds a little dumb…)

edit: nevermind, I found a solution, but i would still be curious to know if there is another way than javascript…

Last edited by Castrobot (2008-04-21 09:55:13)

thebombsite · 2008-04-21 13:02:37

If by “rollovers” you mean a linked image that changes when you hover over it then that can be done in CSS. You create a double image, that is you have the normal image at the top and the hover image underneath but within a single, larger image. You then call the image as a background in your CSS for the linked selector and for the :hover state adjust the vertical alignment so that in effect the image slides up to reveal the other version.

colak · 2008-04-21 13:49:19

Some css techniques are explained here and here

Last edited by colak (2008-04-21 13:52:54)

progre55 · 2008-04-21 17:42:04

Castrobot:

Even though yopu found a solution, thought I would throw this your way as another alternative: simpleswap.js

progre55

Castrobot · 2008-04-21 18:44:30

Very nice and simple this css technique, thanks guys, that’s appreciated.

progre55: thanks for the link too, but i was looking for an alternative of the javascript method, since it requires many lines of code, i still did it this way…

Textpattern CMS

Textpattern CMS support forum

#1 2008-04-21 08:57:37

Rollover images

#2 2008-04-21 13:02:37

Re: Rollover images

#3 2008-04-21 13:49:19

Re: Rollover images

#4 2008-04-21 17:42:04

Re: Rollover images

#5 2008-04-21 18:44:30

Re: Rollover images

Board footer