Better Coda Slider with image rollover

Bluelime Coda Slider ExampleIn my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.

Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.

I asked Ben to look at my code and in my coda-slider.js file, he simply changed

.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');

to this:

.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'"
onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');

Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.

In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.

2 comments:

  1. That’s great thanks!

    Another question: I have a set of images that I’m using to control the slide (a nav/content) and I have different states for those images like rollover etc.

    How can I get which ever image is currently selected to display a selected state for its respective section? Like the coda site?

Comments are Closed.