Trying to make a rollover button using the text sidebar widget

  • So I already have image links in my blog sidebar, but I want to make them into buttons that change color when the mouse moves over them. Right now the buttons are in an image widget, but from what I understand, to do this I need to put them into the “text” widget, because I need to enter code.

    Here’s my blog:
    https://www.megandowntherabbithole.com

    Here’s the code I entered:

    <!–start_raw–><a href="www.megandowntherabbithole.com/blog" target="_top" onmouseover="document.blog.src=https://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttonsrollover.jpg" onmouseout="document.blog.src='https://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttons.png'">
<img src=https://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttons.png style="width:170px; height:170px; border:0px solid #cc3300;" alt="Move your mouse over me" name="blog">
</a><!–end_raw–>

    The button shows up, and the link works, but it isn’t changing color on the mouseover. (The button I’m talking about is on the bottom right corner of the page).

    Am I missing something? Thanks in advance!

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

  • Try using CSS with the :hover pseudo class.

    Thread Starter megandowntherabbithole

    (@megandowntherabbithole)

    Thanks for your quick response, but I’m still a little confused. What exactly do you mean? Is that in addition to what I just entered? I’m not sure exactly where to go from here…

    I am still relatively new to this. Thanks again.

    See https://www.w3schools.com/cssref/sel_hover.asp and use:

    <!–start_raw–><a href="www.megandowntherabbithole.com/blog"><img src=https://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttons.png style="width:170px; height:170px; border:0px solid #cc3300;" alt="Move your mouse over me" name="blog">
</a><!–end_raw–>

    Also try googling on “css sprites”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trying to make a rollover button using the text sidebar widget’ is closed to new replies.