what is start.hover.in ?

start.hover.in provides a user-engagement library for embedding hoverlets into a web page. 

for developers
  Developers & content-providers can signup to build contextual applications

for publishers
  Blogs & websites can easily use them by just including a script and specifying certain URI's for their links.

1. Demo 1

  Click on any of the links below...

    facebook profile from crunchbase , tweets on election,  Wordpress search for iPad, or cooking videos from youtube. 

1. The setup script

Place the start.hover.in script before the </body> tag

   <script src="http://start.hover.in/script" id="hi_start" type="text/javascript"></script>  

2. the API

The URI is the API

<html>
 <body>

 Click on any of the links below...

   <a href="http://facebook.com" title="http://onclick.hover.in/hoverlet/hover.in/crunchbase/facebook">facebook</a> 
   profile from crunchbase

   <a href="#" title="http://onclick.hover.in/hoverlet/hover.in/twittersearch/election">tweets</a> 
   on election,

   <a href="#" title="http://onclick.hover.in/hoverlet/hover.in/relatedwordpress/ipad">Wordpress search</a> 
   for iPad,

   or <a href="#" title="http://onclick.hover.in/hoverlet/hover.in/relatedyoutube/cooking">cooking videos</a>
   from youtube. 

   <script src="http://start.hover.in/script" id="hi_start" type="text/javascript"></script>
 </body>
<html>

All you have to do is edit either the title or href attributes of existing links

# Demo 2

  Books on erlang from Safari

  Movie trailers from AOL Video

  Pubs named oaks

  Barack Obama articles on NY Times

<html>
 <body>

   Books on <a title="http://onhover.hover.in/hoverlet/hover.in/safaribooks/erlang"
                href="http://erlang.org" >erlang</a> from Safari

   Movie <a title="http://onhover.hover.in/hoverlet/hover.in/aolvideos/trailers"
       href="#">trailers</a> from AOL Video

   Pubs named <a title="http://onhover.hover.in/hoverlet/hover.in/pubinfo/oaks"
                 href="http://en.wikipedia.org/wiki/oaks" >oaks</a>
   <a title="http://onhover.hover.in/hoverlet/hover.in/nytimes/barack obama"
                 href="#" >Barack Obama</a> articles on NY Times

   <script src="http://start.hover.in/script" id="hi_start" type="text/javascript"></script>

 </body>
<html>

#. Demo 3 BONUS note: You can also create your own badges / images and hoverize them by placing an image inside a link.

 Click to bookmark this page
 Bookmark this
  Click to bookmark this page
    <a title="http://onclick.hover.in/hoverlet/hover.in/bookmarks/page" href="http://hover.in/">
       <img src="http://static.hover.in/img/site/buttons/save.png" alt="Bookmark this" />
    </a>

3. Available Events

http://<event>

 onhover
 onclick

4. Available Return Types

http://<event>.hover.in/<type>

 hoverlet

4. Created by

http://<event>.hover.in/<type>/<nick>/

 hover.in

Signup to get your own nick and create hoverlets ...

5. Available Hoverlets

http://<event>.hover.in/<type>/<nick>/<hoverlet>/<param1>/<param2>/...

crunchbase
blinkxvideos
relatedyoutube
pubinfo
relatedflickr
relatedpicasa
relatedwordpress
twittersearch
googlemaps
priceinfo
twitterprofile
zemantarelated
safaribooks
bookmarks
nytimes
cricinfo
aolvideos

6. More examples

 <html>
 <body>

  An <a href="http://onhover.hover.in/hoverlet/hover.in/relatedflickr/african safari">african safari</a>

  <a title="http://onhover.hover.in/hoverlet/hover.in/crunchbase/facebook"
      href="http://facebook.com" >facebook</a> 
  vs
  <a href="#" title="http://onhover.hover.in/hoverlet/hover.in/crunchbase/myspace">myspace</a>

  Follow us on <a href="http://onhover.hover.in/hoverlet/hover.in/twitterprofile/hoverin">twitter</a>

  <a href="http://onhover.hover.in/hoverlet/hover.in/priceinfo/xbox">xbox</a> 
  vs
  <a href="http://onhover.hover.in/hoverlet/hover.in/zemantarelated/wii">wii</a> 

  <a href="http://onhover.hover.in/hoverlet/hover.in/cricinfo/">cricket scores</a>
  happening in 
  <a href="http://onhover.hover.in/hoverlet/hover.in/googlemaps/london">london</a>

  <script src="http://start.hover.in/script" id="hi_start" type="text/javascript"></script>

 </body>
<html>

#. Demo 4

  
An african safari

facebook
 vs
myspace 

Follow us on twitter

xbox
 vs
wii 

cricket scores
 happening in
london
    

7. Resources

  1. wp-hover, a wordpress plugin that uses the start.hover.in script to render hoverlets within your blog post in a few clicks
  2. Or see how it works through this screencast.
  3. Partner with us to create contextual applications!. We will be opening up developer accounts soon.
  4. the hover.in developer blog
  5. hover.in
  6. Get in touch with us via email or twitter

 

Last updated: Feb 1, 2010

 

hover.in | Blog | Press Releases | Careers | Buzz | Privacy Policy | Contact Us