 |
|
 |
|
Views: 236,713,179
Time: 2013-05-25 11:49:24 AM | 28 users online: Akireyano,  BloodyToothBrush, Dakras Hayashi, Disco, Dusty Pengwin, everest700, ggamer77, Gloomy Star, Jimmy52905, Jolpengammler, Kenny, Koopster, KY2010, Lightvayne, Magiluigi, Marcus_1987, Mippish, nicoretro, Pixels, Pokeymeister80, Pokimao, Purple Rex, Rextep, ShadowPhoenix, Sokobansolver, Teo17, Torchkas, Ultimaximus - Guests: 38 - Bots: 11 | Users: 22,887 (1,283 active)
Latest: Pokimao |
|
|
 |
|
|
|
| Tip: The "No More Sprite Tile Limits" patch does NOT increase the limit for the amount of sprites onscreen at once. |
|
|
|
|
|
|
|
 |
|
 |
|
| Hover Buttons |
|
Forum Index - Hobbies - Computers & Technology - Hover Buttons |
|
Pages:  1  |
|
|
|
|
|
| Posted on 2012-04-16 12:55:40 AM |
Link | Quote |
|
That one uses Javascript, and Kieran has done a lot to block exactly that.
However, you can emulate this one with some CSS.
edit: wait, where the hell did my images go
|
| Last edited on 2012-04-16 08:52:45 AM by Alcaro. |
|
| Posted on 2012-04-16 04:42:42 AM |
Link | Quote |
|
|
You can achieve that by using one of the images as a background of a div and another as a normal image (hover over my avatar to see what I'm talking about). Then you set a class to that div and, in the css, define the img tag to be transparent when hover. Post the images here (the normal and the hover ones) and I help you with this.
|
|
| Posted on 2012-04-16 08:11:36 AM |
Link | Quote |
|
You mean like this?
That's pretty easy to do, so here you go:
<style type="text/css">
.gsghover {
background: url('http://dl.dropbox.com/u/9054912/hover.png') center no-repeat;
width: 334px;
}
.gsghover img {
opacity: 1;
-webkit-transition: opacity .12s ease;
transition: opacity .12s ease;
-o-transition: opacity .12s ease;
-moz-transition: opacity .12s ease;
}
.gsghover img:hover {
opacity: 0;
-webkit-transition: opacity .12s ease;
transition: opacity .12s ease;
-o-transition: opacity .12s ease;
-moz-transition: opacity .12s ease;
}</style><div class="gsghover"><img src="http://dl.dropbox.com/u/9054912/hoverno.png" /></div>
To change the speed of the "animation", change all of those little .12s's to either higher or lower numbers for longer or shorter delay respectively.
If you ever want to use that code with other images, just search for hover.png and hoverno.png in that code (marked in green), replace them with your new images and change the width to your new image's width.
The animation itself won't work in IE9 (or lower), it will just skip directly to the hover image, but hey, it's not like IE users are used to quality.
|
| Last edited on 2012-04-17 09:32:10 AM by leod. |
|
| Posted on 2012-04-16 10:33:49 PM |
Link | Quote |
|
Oh wow thanks you guys! You know, I really need to learn this HTML stuff when I get the time to do so, it seems to be a pretty nifty thing to know =D
Anywho, thanks leod! I changed the picture URLs to mine, so you can delete from your dropbox. Thanks again!
*bookmarks*
|
|
| Posted on 2012-04-17 09:30:51 AM |
Link | Quote |
|
Oh right I forgot you wanted to make this button also link to something.
Instead of doing it like you do right now, you should put the <a> tag only around the image itself, not the entirety of it, like this:
<div class="gsghover"><a href="http://www.smwcentral.net/?p=viewthread&t=55587"><img src="http://i.imgur.com/kSsly.png" /></a></div>
If you don't do this, then you will be able to click the empty space to the right of the button, too, which looks rather strange.
Originally posted by Giant Shy GuyI changed the picture URLs to mine, so you can delete from your dropbox.
Nope, I a) want my post to stay intact and b) want my post to stay intact, even if you ever take down the images on your side.
|
|
| Posted on 2012-04-17 07:40:14 PM |
Link | Quote |
|
Originally posted by leodOh right I forgot you wanted to make this button also link to something.
Instead of doing it like you do right now, you should put the <a> tag only around the image itself, not the entirety of it, like this:
<div class="gsghover"><a href="http://www.smwcentral.net/?p=viewthread&t=55587"><img src="http://i.imgur.com/kSsly.png" /></a></div>
If you don't do this, then you will be able to click the empty space to the right of the button, too, which looks rather strange.
Oh! Okay then.
Originally posted by leodOriginally posted by Giant Shy GuyI changed the picture URLs to mine, so you can delete from your dropbox.
Nope, I a) want my post to stay intact and b) want my post to stay intact, even if you ever take down the images on your side. </div></div>
Well, if you want to.
|
|
|
| Pages: 1 |
|
|
|
|
Forum Index - Hobbies - Computers & Technology - Hover Buttons |
|
|
 |
|
 |
The purpose of this site is not to distribute copyrighted material, but to honor one of our favourite games.
Copyright © 2005 - 2013 - SMW Central
Legal Information - Link To UsTotal queries: 29
|
|
|
|
