Forum Moderators: open
*It's supposed to pop up a little box when you place your mouse on the hyperlinks on the bottom but when you remove your mouse from hovering on it, the box is supposed to disappear.
More literal:
Cursor creates brownish text box then no cursor hides text box but the problem is IT ISN"T HIDDING!
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1 transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="all" />
<title>Calumet Clinic -- Centers</title>
<script type="text/javascript">
<!--Hide from old browsers
function screenTip(evnt,currElement) {
var documentObj="document.all"
var styleObj=".style"
if (currElement!=0) {
var execObject=eval(documentObj+'.'+currElement+styleObj)
var state=execObject.visiblity
if (state=="visible" ¦¦ state=="show") {
execObject.visibility="hidden"
}
else {
topVal=eval(event.y+10)
leftVal=eval(event.x-125)
if (leftVal<2) leftVal=2
execObject.top=topVal
execObject.left=leftVal
execObject.visibility="visible"
}
}
}
//-->
</script>
<style type="text/css">
<!--
#Tip1
{position: absolute; visibility: hidden;
z-index: 10; top: 10px; left: 10px;
}#Tip2
{position: absolute; visibility: hidden;
z-index: 10; top: 10px; left: 10px;
}
#Tip3
{position: absolute; visibility: hidden;
z-index: 10; top: 10px; left: 10px;
}
#Tip4
{position: absolute; visibility: hidden;
z-index: 10; top: 10px; left: 10px;
}
.TipText
{background-color: #996600; padding: 3px; border: 3px solid black; width: 250px; font-weight: bolder; color: white;
}
-->
</style>
</head>
<body background="clinicbkgrnd.gif">
<p align="center"><img src="calumetcliniclogo.jpg" alt="clinic banner" width="459" height="81" /></p>
<table width="84%" border="0" align="center" cellspacing="4">
<tr>
<td>
<p>Calumet Clinic is committed to bringing health and wellness to the greater community at large. As the area's largest hospital it treats over 100,000 patients a year. Calumet Clinic received a rating of 99 out of 100 by the Joint Commission on Accreditation of Healthcare Organizations for the third year in a row. Calumet Clinic was named one of Business News and World Reports' top 50 hospitals; receiving the American Commission on Insurance Practices' Highest Recognition award for courses, health care, and services in our
<a href="javascript:screenTip(null,0)" onmouseover="screenTip(event,'Tip1')" onmouseout="screenTip(event,'Tip1')">Cardiac Care</a> Unit,
<a href="javascript:screnTip(null,0)" onmouseover="screenTip(event,'Tip2')" onmouseout="screenTip(event,'Tip2')">Chronic Pain Treatment</a>,
<a href="javascript:screenTip(null,0)" onmouseover="screenTip(event,'Tip3')" onmouseout="screenTip(event,'Tip3')">Children's Health</a>, and
<a href="javascript:screenTip(null,0)" onmouseover="screenTip(event,'Tip4')" onmouseout="screenTip(event,'Tip4')">Substance Abuse centers</a>.
</p>
<p align="center"><a href="calumetclinic.htm">Home</a></p>
</td>
</tr>
</table>
<span id="Tip1" class="TipText">Our 10-bed Cardiac Care Unit (CCU) is staffed by registered nurses with training in advanced cardiac care support, using advanced techniques and the latest technology.
</span>
<span id="Tip2" class="TipText">The Chronic Pain Treatment Center specializes in treating patients with severe and debilitating head, neck, facial, and joint pain.
</span>
<span id="Tip3" class="TipText">The Children's Health Center specializes in the treatment and care of chronic and life-threatening childhood illnesses. No child will be denied care.
</span>
<span id="Tip4" class="TipText">The Substance Abuse Center provides treatment for alcohol and other drug problems for all ages, which includes comprehensive detoxification treatments, day and evening treatment programs, and numerous levels of counseling services.
</span>
</body>
</html>
Thanks for your help. It's a site-mock up to help me learn HTML/CSS/JS so it's all safe. Thanks for your hlep.
I was just about to tackle this one. So, it's working now?
Could you reveal the name/author/publisher of the book you're using? The scripting in that example is really awkward, especially since it's aimed at a beginner... it's actually a pretty bad example of Javascript. This effect can be done easily without using "document.all" and "eval()", using Unobtrusive Methods (ie no inline script in the <a> tag), and you might use a CSS class instead of defining styles (like "visibility") explicitly in the script.
All of which sound like advanced concepts. But if you're learning JS, why not learn it the "right" way. The "right" way is actually simpler, and easier.
with the Mootools library, the effect can be achieved in 3 lines of code.
(JS)
$('link1').onmouseover=function(){$('tip1').addClass('hidden')}
$('link1').onmouseout=function(){$('tip1').removeClass('hidden')}
(CSS)
.hidden{visibility:hidden}
In the absense of a helpful library like Mootols, you can still achieve this effect without defining a "styleObj" and an "execObj" and a "state"
by the way, nice name.
I don't understand MooTools, I've checked them out and kind looks intimidating.
I've tried to email the authors of this book about the numerous code problems but it's hard to find a good contact.
Book: HTML; Comprehensive Concepts and Techniques [4th ed], Shell Cashman Woods Dorin
I think the name adds spice, thanks for the comment. If you seem me on any other forums, give me a shout. I'm on like 4 others, learning a bunch of web stuff.
