I was wondering if anyone has figured out a way to use rollover images in Xoops. On one of my pages, I would like for the visitors to be able to move their cursor over an image to see the inside of a house (http://www.simtycoongamer.net/modules/tinycontent/index.php?id=27). I've been successful using the DOM Image Rollover in Front Page, but I can't seem to get it to work with Xoops. I added the script code into the head of the theme.html file, but I couldn't get it to work. Any ideas? Thanks!

I recommend what is called the "Pixy Fast Rollovers" which uses CSS and handles the image preload without JavaScript.

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/update.html

This page above is the latest version, which includes a means to bypass an IE bug. To get step-by-step instructions, follow the link on the page to the original document.

It is super, super easy and works fantastic.

If you need help, let me know, and I will try.

Basically, you create a single image file with all the button states in it (hover, click, active, visited, etc.). Then you use offsets in CSS to have the proper button state pull up on demand.

In your case, think of the picture of the house as a giant button. Also, you might consider using hover instead of click if you don't really need the user to click.

I'll try it out. Thanks.