In 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="" />');
.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.