Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support
HI everyone I want to do a mouse over hover effect on my clickable image. I can't figure out how I can do it.
Basically I want to do a mouse over effect where my clickable image fades when clicked.
Tags:
You can do it one of two ways, and neither is elementary, unfortunately. Most people create two images, one with less opacity. Then, they change the image out, for the hovered state. I'll either try to find or write a tutorial some day in the future, using 2 images.
Then, you can also use filter and opacity settings. But, that truly gets convoluted. You have to write extra code for it to work across all browsers. And as usual, IE is the problem.
Sorry, wish there was a quick answer to this,
Jen
If you want to make the hover effect on specific images , use HTML:
<img src="yourimagelink.jpg" style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" >
If you want your whole NETWORK have this hover effect , use CSS :
img {
opacity:0.5;
}
img:hover{
opacity:1;
}
Hope that helps.
Thanks Elson!
Only problem, the 2nd example doesn't work in IE.
To make your example work in IE as well, we need something like this, like in your first:
img {opacity:0.5;filter:alpha(opacity=40)}
img:hover{opacity:1;filter:alpha(opacity=100)}
Thanks for helping out with this. I wanted to add more, but your example, in addition to the filter alpha, should help do the trick!
Best,
Jen
I sure second that! LOL! IE - - always the problem child.
:-)
Welcome to
JenSocial: Social Web Directory and Ning Tips
Posted by JenSocial on May 7, 2018 at 8:35pm 8 Comments 1 Favorite
Posted by JenSocial on January 6, 2017 at 4:00pm 10 Comments 1 Favorite
Posted by JenSocial on October 22, 2016 at 1:05am 0 Comments 0 Favorites
Posted by JenSocial on September 17, 2016 at 12:00am 26 Comments 1 Favorite
Posted by JenSocial on August 31, 2016 at 3:30pm 13 Comments 0 Favorites
Ning 3.0 Tip - Add Buttons/Links Below Status Update (Quick Links to Add Photos, Posts, Discussions)
Started by Predestined by God Feb 1, 2015. 0 Replies 0 Favorites
Started by IDC. Last reply by JenSocial Oct 27, 2012. 1 Reply 1 Favorite
Started by Dr. Husky. Last reply by Dr. Husky Aug 18, 2012. 5 Replies 1 Favorite
© 2024 Created by JenSocial. Powered by
© Copyright JenSocial.