How do I make a rollover image with a separate button?

[coolstuf]

I want to make an image change when a button is rolled over. The button is separate from the image. How is this done?

Thankyou Sean

[Paulie_D]

It depends on your HTML structure and the effect you are trying to achieve.

The simplest way would be with Javascript / jQuery.

Do you have some code you could show us in Codepen?

[coolstuf]

Here is my code.

http://cdpn.io/IuGBt

Thanks Sean

[Paulie_D]

Ah…yes, I remember this from before.

It’s built with Dreamweaver isn’t it….it has that look?

I think you should be aware that we’re probably going to have to rebuild this from scratch.

http://childrenteachingchildren.org/

Are you happy with that?

[Paulie_D]

OK…before we get started into the actual rollovers.

Page Background

You have a HUGE background image (png) on the site (2528x1368px) and nearly 4MB.

Gotta say that’s waayyy to large a file size and probably too large (dimensionally) for the screens it’s ever likely to be viewed on. Certainly making it a lower quality .jpg would reduce the file size a little.

Also, one of the buttons you want to change is built into that image and should be removed.

Continuing on, you actually have content built into the image…”What is…” etc. That’s probably a bad idea as you would have to change out the image if you ever decided to alter the text.

I could go on…

[Paulie_D]

Anyway…here’s how I would start: http://codepen.io/Paulie-D/pen/Lmqvw

Switch all those DW ‘mouseOvers’ for hoverstates.

[Author]

Posts