WordPress.com

1. frommartawithlove
   Member
   Sep 27, 2012, 2:30 AM

   Hi all,

   Is there a way to change an image on mouseover in a text widget? I'd like to do this for my social media icons but search results have all been leading me to javascript and plugins (which I can't access because I'm using free WordPress).

   Thanks very much for your help.

   The blog I need help with is frommartawithlove.com.

2. designsimply
   Happiness Engineer
   Sep 27, 2012, 5:59 AM

   Here's one way you can do it.

   First, upload the images to use for the mouseovers into your media library and copy the image links.

   For each one, find the "title" attribute value and create a block of CSS like this:

   a[title="Flickr"] img {
   	display: none;
   }
   a[title="Flickr"] {
   	display: block;
   	background: url(http://i1059.photobucket.com/albums/t434/frommartawithlove/BFlickr.png);
   	width: 210px;
   	height: 46px;
   }
   a[title="Flickr"]:hover {
   	display: block;
   	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
   	width: 210px;
   	height: 46px;
   }

   I used a WordPress logo as an example above, so you'll want to replace the value of the 2nd url() function with the Flickr image you uploaded to your media library.

3. frommartawithlove
   Member
   Sep 27, 2012, 2:32 PM

   Thanks for the quick response, Sheri! I have a few questions:

   Do I insert this code into a text widget? How do I use it to make my social media buttons looks the same as they do now except that the image changes on hover?

   How do I find the "title" attribute value?

   How is page load time affected by uploading images to my media library versus Photobucket?

   Thanks again.

Topic Closed

This topic has been closed to new replies.