Border hint example
Put mouse over to see Hint with colored borders
Put mouse over to see Hint with image borders
<html>
<head>
<link href="/common_codethat.css" rel="stylesheet" type="text/css">
<script language="javascript1.2" src="codethatsdk.js"></script>
<script language="javascript1.2" src="codethathintpro.js"></script>
<script language="javascript1.2">
<!--
var cthint1_html = "<p>This is hint with advanced borders<p>Top is black, \
right is red, bottom is green and left is blue.";
var cthint1 = new CT_Hint(200, 90, 2,"", true, 10, 10, cthint1_html, "lightyellow", "", "",
{
width : 1, color : "black",
t : {
color : '#000000', width : 5
},
r : {
color : '#ff0000', width : 4
},
b : {
color : '#00ff00', width : 3
},
l : {
color : '#0000ff', width : 2
}
},
true, 2,"", 0,400, 0
);
cthint1.create();
var cthint2_html = "<p>This is hint with advanced borders<p>We use differnt \
images as backgroud for each side";
var cthint2 = new CT_Hint(200, 90, 2,"", true, 20, 18, cthint2_html, "lightyellow", "", "",
{
width : 1, color : "black",
t : {
color : '#000000', width : 15, bgimg : '/img/arrow_green.gif'
},
r : {
color : '#ff0000', width : 13, bgimg : '/img/arrow_light.gif'
},
b : {
color : '#00ff00', width : 15, bgimg : '/img/arrow_pink.gif'
},
l : {
color : '#0000ff', width : 13, bgimg : '/img/arrow_yellow.gif'
}
},
true, 2,"", 0,400, 0
);
cthint2.create();
//-->
</script>
</head>
<body>
<p><a href="#" onmouseover="cthint1.show()" onmouseout="cthint1.hide()">
Put mouse over to see Hint with colored borders</a></p>
<p><a href="#" onmouseover="cthint2.show()" onmouseout="cthint2.hide()">
Put mouse over to see Hint with image borders</a></p>
</body>
</html>
|