55 users online (0 members and 55 guests)  


  Results 1 to 3 of 3

Related

  1. view at the top of page    Forum: HTML Forum
    Replies: 1
  2. Page view    Forum: HTML Forum
    Replies: 2
  3. Replies: 5
  4. Replies: 15
  5. mouse swap?    Forum: HTML Forum
    Replies: 1
  1. #1
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    snap view of a page on mouse over

    i have seen websites that has a good property like when we place mouse pointer on a link, then a small screen will appear that shows the inner content of the linked page.

    Opera browser also has this feature. if we place mouse pointer on one of the tabs, it will show a screen shot.
    Even this forum too shows the content of the page when we place mouse pointer on a particular post.

    how do we program them?

    can i have a sample code?


    Thank you

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: snap view of a page on mouse over

    Hi there ravindarjobs,

    how do we program them?

    can i have a sample code?
    Like this , perhaps?
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #links a {
        color:#000;
     }
    #wbpg {
        position:absolute;
        width:486px;
        height:331px;
        padding:4px;
        border:3px double #000;
        background-color:#316c96;
        background-image:url(http://mysite.orange.co.uk/azygous/images/ahfb.gif);
        background-repeat:no-repeat;
        background-position:4px 4px;
        margin-left:300px;
     }
    .hide {
        display:none;
     }
    </style>
    
    <script type="text/javascript">
    window.onload=function() {
       var anc=document.getElementById('links').getElementsByTagName('a');
    for(c=0;c<anc.length;c++) {
       anc[c].onmouseover=function() {
       showWebPage(this);
       }
      }
     }
    function showWebPage(el) {
       document.getElementById('wbpg').className='';
    
    el.onmouseout=function() {
       document.getElementById('wbpg').className='hide';
      }
     }
    </script>
    
    </head>
    <body>
    
    <ul id="links">
    <li><a href="http://www.ahfb2000.com/webmaster_help_desk/showthread.php?t=9057">ahfb2000.com</a></li>
    </ul>
    
    <div id="wbpg" class="hide">
    </div>
    
    </body>
    </html>
    

  3. #3
    ravindarjobs's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Nov 2007
    Location
    india
    Posts
    44

    Re: snap view of a page on mouse over

    thank you coot head. Now i came to know how to program them.

    also since it is tough to program for every link manually, i came to know that www.snap.com provides a good facility for this reqirement. But i have'nt experienced its features as of now.
    what do you say about that service provided by that site?
    Last edited by ravindarjobs; 12-25-2007 at 12:33 AM.



Tags for this Thread