snap view of a page on mouse over

**ravindarjobs** · 12-24-2007, 12:34 AM

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

**coothead** · 12-24-2007, 03:33 PM

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>

**ravindarjobs** · 12-25-2007, 12:24 AM

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?

Thread: snap view of a page on mouse over

Thread Tools

Related

view at the top of page Forum: HTML Forum

Page view Forum: HTML Forum

Need help, source code differs from page view Forum: HTML Forum

Single page needs different browsers to view. Forum: Show it off!

mouse swap? Forum: HTML Forum

snap view of a page on mouse over

Re: snap view of a page on mouse over

Re: snap view of a page on mouse over

Tags for this Thread