-->

Sunday, August 11, 2013

To make your link image change when you scroll over it with your cursor:



If you look at my premium MFC account profile you'll see that I have a image that links to my amazon wishlist that looks like this,

http://25.media.tumblr.com/143165aafabe89068970153c6a0de7ef/tumblr_mqojnoBvEl1rjl0hwo2_500.jpg

but when you scroll over it, it changes to this,

http://24.media.tumblr.com/65e9059f9021a11b7177b532881223cd/tumblr_mqojnoBvEl1rjl0hwo1_500.jpg


What you want to do is add this css code in the "customize profile" section:
(note: I highlighted the parts in red that you need to change if you want to change the link and the images)

.amazonlink{
     width: 500px;
     height:166px;
     display:block;
     background:transparent     url('http://25.media.tumblr.com/143165aafabe89068970153c6a0de7ef/tumblr_mqojnoBvEl1rjl0hwo2_500.jpg') center top no-repeat;
}
.amazonlink:hover {
   background-image:url('http://24.media.tumblr.com/65e9059f9021a11b7177b532881223cd/tumblr_mqojnoBvEl1rjl0hwo1_500.jpg');
}


Then you want to add this html code in the "edit profile" section where ever you want your images to appear on your profile,
(note: the part highlighted in red is where you want to paste your link instead)


'amazonlink' title='amazonlink'>

No comments:

Post a Comment