KUOW's animated PIN lightbulb

Joellen Easton -

kuow lightbulb.jpg

From: Jenna Montgomery of KUOW: 206-221-2749

The lightbulb is a Photoshop shape, the little wiggly lines are hand drawn, the font is Futura – pretty basic ingredients! If the rollover graphic from our homepage is useful as is (without editing), you’re welcome to use it: http://kuow.org/images/home_special/idea2.png

 

HTML:

<a class="pin" alt="light bulb" href="http://kuow.org/publicinsight/"><span>idea</span></a>

 

CSS:

a.pin { background: url(../images/filename.png) repeat 0 0; width: 93px; height: 70px; display: block; }

a.pin span { display: none; }

a.pin:hover { background: url(../images/filename.png) repeat 0 -70px; }


Same goes for the plain light bulb rollover on our PIN page: http://kuow.org/images/pin/idea2.png

 

HTML:

<a class="button" alt="light bulb" href="http://www.publicinsightnetwork.org/user/signup/contact_signup.php?id=kuow"><span>idea</span></a>

 

CSS:

a.button { background: url(/images/filename.png) repeat 0 0; width: 31px; height: 60px; display: block; }
a.button span { display: none; }
a.button:hover { background: url(/images/filename.png) repeat 0 -60px; }
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk