How to do the Rollover Image Effect in css and how can I apply it in the wiki that I am working? http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html
How to do the Rollover Image Effect in css and how can I apply it in the wiki that I am working? http://helplogger.blogspot.com/2012/05/create-rollover-image-effect-change.html
I helped someone with this before. You can see the full disscusion here, but I've copied the important instructions below.
It can be done through CSS, you just need 2 classes: the standard one then the hover one.
Here's CSS for your example:
.face { background: url('Sadface.png') no-repeat; } .face:hover { background: url('Happyface.png') no-repeat; }
Then to actually use it, you'd add this to a page (nothing needs to be put inside the div):
<div class="face"></div>
Make sure to refresh after you apply the CSS
Thank You. But I can't see it and I click refresh, I paste it on my user profile for a test and I already tried to refresh the page. This is what I do:
.face { background: url('suikoden.wikia.com/wiki/File:BPImageA.png') no-repeat; } .face:hover { background: url('suikoden.wikia.com/wiki/File:BPImageB.png') no-repeat; }
You must use the image URL, not the File page. For instance: vignette1.wikia.nocookie.net/suikoden/images/7/79/BPImageA.png/revision/latest
Try this instead
.face { background: url(vignette1.wikia.nocookie.net/suikoden/images/7/79/BPImageA.png) no-repeat; width: 500px; height: 800px; } .face:hover { background: url(vignette1.wikia.nocookie.net/suikoden/images/1/12/BPImageB.png) no-repeat; }
I was trying this and I am wondering, is it also posible to add a link to the image?
I'm not sure, I messed around for a bit and couldn't figure it out (though if anyone knows that'd be great)
The workaround I use is this, I have a transparent .png block that links to the page, and I insert into the hover div code.
<div class="gameBox">[[File:Block.png|link=Category:Games]]</div>