WordPress.org

1. megandowntherabbithole
   Member
   Posted 8 months ago #

   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:
   http://www.megandowntherabbithole.com

   Here's the code I entered:

   <!–start_raw–><a href="www.megandowntherabbithole.com/blog" target="_top" onmouseover="document.blog.src=http://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttonsrollover.jpg" onmouseout="document.blog.src='http://www.megandowntherabbithole.com/wp-content/uploads/2011/09/blog-nav-buttons.png'">
   <img src=http://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!

2. esmi
   Theme Diva & Forum Moderator
   Posted 8 months ago #

   Try using CSS with the :hover pseudo class.

3. megandowntherabbithole
   Member
   Posted 8 months ago #

   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.

4. esmi
   Theme Diva & Forum Moderator
   Posted 8 months ago #

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

   <!–start_raw–><a href="www.megandowntherabbithole.com/blog"><img src=http://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".

Reply

You must log in to post.