ShopDreamUp AI ArtDreamUp
Deviation Actions
Private collection, please do not unlock
private drawings such as sketches, portraits and various handmade drawings. Due to the fact that it is not possible to hide folders, I decided to use this form of collecting my works
$100/month
Suggested Deviants
Suggested Collections
You Might Like…
Description
One of several animated buttons I created for www .Woody .Info [link]
This particular icon, when clicked, leads to an explanation of a new Internet threat (DNS Poisoning) and a way to test your Internet Service Provider's DNS to check whether it's been patched to prevent the DNS Poisoning exploit.
As you can see, the button is actually TWO images, joined at the hip. The webpage uses CSS to animate the image. Normally, viewers see the image on the left... but when their mouse passes over ("hovers" over) this button, its eyes turn red and it appears to pop off the page a little.
Here's the CSS that makes the image animate:
a#dns_poisoning:link, a#dns_poisoning, a#dns_poisoning:active {
display: block;
width: 150px;
height: 150px;
background-image: url('../img/dns-poisoning.jpg' ) ;
background-repeat: no-repeat;
text-indent: -9999px;
}
a#dns_poisoning:hover { background-position: -150px; }
...and here's the HTML:
(replace the { } with greater-than and less-than signs in the HTML below, but not in the CSS above)
{a id="dns_poisoning" target="_blank" href="http://put-the-link-URL-here"}
blah blah blah link text that doesn't appear on the page, but helps SEO
{/a}
This particular icon, when clicked, leads to an explanation of a new Internet threat (DNS Poisoning) and a way to test your Internet Service Provider's DNS to check whether it's been patched to prevent the DNS Poisoning exploit.
As you can see, the button is actually TWO images, joined at the hip. The webpage uses CSS to animate the image. Normally, viewers see the image on the left... but when their mouse passes over ("hovers" over) this button, its eyes turn red and it appears to pop off the page a little.
Here's the CSS that makes the image animate:
a#dns_poisoning:link, a#dns_poisoning, a#dns_poisoning:active {
display: block;
width: 150px;
height: 150px;
background-image: url('../img/dns-poisoning.jpg' ) ;
background-repeat: no-repeat;
text-indent: -9999px;
}
a#dns_poisoning:hover { background-position: -150px; }
...and here's the HTML:
(replace the { } with greater-than and less-than signs in the HTML below, but not in the CSS above)
{a id="dns_poisoning" target="_blank" href="http://put-the-link-URL-here"}
blah blah blah link text that doesn't appear on the page, but helps SEO
{/a}
Image size
300x150px 12.78 KB
Comments0
Join the community to add your comment. Already a deviant? Log In