Snippet Name: Preview URL or Page On Hover
Description: When hover your mouse over a link, a small box containing contents from another page comes up. This will show the iframe with scrollbars if content (target page) is too big.
Comment: (none)
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 28th, 2009
|
<html>
<head>
<script language="Javascript">
<!--
FUNCTION toggleDiv(id,flagit,s) {
IF (flagit=="1"){
IF (document.layers) document.layers[''+id+''].visibility = "show"
ELSE IF (document.all) document.all[''+id+''].style.visibility = "visible"
ELSE IF (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
VAR objFrame=document.getElementById("myframe");
objFrame.src = s;
}
ELSE
IF (flagit=="0"){
IF (document.layers) document.layers[''+id+''].visibility = "hide"
ELSE IF (document.all) document.all[''+id+''].style.visibility = "hidden"
ELSE IF (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>
<style type="text/css">#div1, #div2, #div3 {position:absolute; top: 50; left: 20; width:400; visibility:hidden}</style>
</head>
<body>
<a href="#" onMouseOver="toggleDiv('div1',1,'http://www.google.com')" onMouseOut="toggleDiv('div1',0,'http://www.google.com')">Link 1!</a> |
<a href="#" onMouseOver="toggleDiv('div1',1,'http://www.botscout.com')" onMouseOut="toggleDiv('div1',0,'http://www.botscout.com')">Link 2</a> |
<a href="#" onMouseOver="toggleDiv('div1',1,'http://www.stupidstuff.org')" onMouseOut="toggleDiv('div1',0,'http://www.stupidstuff.org')">Link 3</a>
<div id="div1"><iframe id="myframe" NAME="myframe" src="about:blank" width="400px" height="400px"></div>
</body>
</html> |
