Hover, image replace and hotspot

  • I have a static informative image here:
    https://threeprayers.com/the-game-plan/
    I want to give it some hover state changes and url hotspots, so that it works much like the menu for the website.

    The website menu is one sprite containing two images for the button-states. The position for the sprite is changed on hover in order to display the second state. So . . .
    1. I know how to create a two state sprite.
    2. create a css class.
    3. shift background positions for an image in a display block.

    However, in a website menu the buttons are in a neat rows or columns.
    A. How on Earth does one position “buttons” in a random fashion,
    B. AND, in the middle of a existing image or background image?

    I’ve tried cutting the image into parts, then using an html table.
    Good God, but wordpress and html are no good at table.
    I’m ashamed to say I could not get it to work.

    Does anyone have a link to a tutorial, something with some depth.
    Hopefully something better than a table because cell dimensions are
    difficult to control.

    Warmest
    Em

Viewing 2 replies - 1 through 2 (of 2 total)

  • I’m sorry but it is really beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead. In the meantime, try using Firefox with the Firebug add-on for this kind of CSS work. Or use whatever developer tool is available in your web browser.
    https://getfirebug.com/

    Thread Starter Makhoe

    (@makhoe)

    I’m sorry, I don’t understand how the topic is general.
    Perhaps I’m missing something.

    I want to do a standard hover-on-sprite-to-url-link button which is commonly used in wordpress menus, only,
    I want to do it in unorthodox positions on top of an existing image.

    I believe, this www.remarpro.com How-To-Forum is THE perfect place for my specific “how to” question. Css-discuss.org won’t do me much good if java is the better solution. WordPress is the common ground, Esmi. This obvious functionality should surface or begin here.

    Em

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hover, image replace and hotspot’ is closed to new replies.