Team:Imperial College London/test10

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<link rel="stylesheet" type="text/css" href="https://2011.igem.org/Team:Imperial_College_London/balloontip?action=raw&ctype=text/css" />
+
<style type="text/css">
-
<script type="text/javascript" src="https://2011.igem.org/Team:Imperial_College_London/balloontipjs?action=raw&ctype=text/js">
+
#dhtmltooltip{
 +
position: absolute;
 +
width: 150px;
 +
border: 2px solid black;
 +
padding: 2px;
 +
background-color: lightyellow;
 +
visibility: hidden;
 +
z-index: 100;
 +
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
 +
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
 +
}
 +
 
 +
</style>
 +
</head>
 +
 
 +
<body>
 +
<div id="dhtmltooltip"></div>
 +
 
 +
<script type="text/javascript">
/***********************************************
/***********************************************
-
* Rich HTML Balloon Tooltip- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
+
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
***********************************************/
-
</script>
+
var offsetxpoint=-60 //Customize x offset of tooltip
-
</head>
+
var offsetypoint=20 //Customize y offset of tooltip
 +
var ie=document.all
 +
var ns6=document.getElementById && !document.all
 +
var enabletip=false
 +
if (ie||ns6)
 +
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
-
<body>
+
function ietruebody(){
 +
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 +
}
-
<a href="http://www.dynamicdrive.com/style/" rel="balloon1">Dynamic Drive CSS Library</a><br /><br />
+
function ddrivetip(thetext, thecolor, thewidth){
-
<a href="http://www.javascriptkit.com" rel="balloon2">JavaScript Kit</a>
+
if (ns6||ie){
 +
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
 +
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
 +
tipobj.innerHTML=thetext
 +
enabletip=true
 +
return false
 +
}
 +
}
 +
function positiontip(e){
 +
if (enabletip){
 +
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
 +
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
 +
//Find out how close the mouse is to the corner of the window
 +
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
 +
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
-
<!--Sample corresponding tooltips-->
+
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
 +
 
 +
//if the horizontal distance isn't enough to accomodate the width of the context menu
 +
if (rightedge<tipobj.offsetWidth)
 +
//move the horizontal position of the menu to the left by it's width
 +
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
 +
else if (curX<leftedge)
 +
tipobj.style.left="5px"
 +
else
 +
//position the horizontal position of the menu where the mouse is positioned
 +
tipobj.style.left=curX+offsetxpoint+"px"
 +
 
 +
//same concept with the vertical position
 +
if (bottomedge<tipobj.offsetHeight)
 +
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
 +
else
 +
tipobj.style.top=curY+offsetypoint+"px"
 +
tipobj.style.visibility="visible"
 +
}
 +
}
 +
 
 +
function hideddrivetip(){
 +
if (ns6||ie){
 +
enabletip=false
 +
tipobj.style.visibility="hidden"
 +
tipobj.style.left="-1000px"
 +
tipobj.style.backgroundColor=''
 +
tipobj.style.width=''
 +
}
 +
}
 +
 
 +
document.onmousemove=positiontip
 +
 
 +
 
 +
</script>
-
<div id="balloon1" class="balloonstyle">
+
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
-
<img src="shadetabs.gif" style="float: right; margin-left: 5px; border:1px solid black" />Original, practical CSS codes and examples such as CSS menus to give your site a visual boast!
+
onMouseout="hideddrivetip()">Search Engine</a>
-
</div>
+
-
<div id="balloon2" class="balloonstyle" style="width: 350px; background-color: lightyellow">
 
-
Award winning JavaScript tutorials and over 400+ free scripts.
 
-
</div>
 
</body>
</body>
</html>
</html>

Revision as of 20:15, 21 September 2011

Search Engine

Retrieved from "http://2011.igem.org/Team:Imperial_College_London/test10"