The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How do I make a rollover image with a separate button?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #146814

    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


    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?


    Here is my code.

    Thanks Sean


    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.

    Are you happy with that?


    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…


    Anyway…here’s how I would start:

    Switch all those DW ‘mouseOvers’ for hoverstates.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.