lshane
asked on
Classic ASP VBScript: How to create a dynamic tooltip-type hover over a link
MS Access
DWMX
WIN XP Pro
Classic ASP VBScript
Hello. I am going to include this in both the "ASP" and "DHTML" zones. I would like to create a "tooltip"-type layer triggered by a hover over a link. I would like the layer to dynamically populate the "Description" of respective link when hovered over.
Here is the link code:
<td width="520" valign="top"> <h5><img src="images/aqua-sphere.jp
The Description field is named "toolDesc". How could this be accomplished?
Thanks so much,
Shane
DWMX
WIN XP Pro
Classic ASP VBScript
Hello. I am going to include this in both the "ASP" and "DHTML" zones. I would like to create a "tooltip"-type layer triggered by a hover over a link. I would like the layer to dynamically populate the "Description" of respective link when hovered over.
Here is the link code:
<td width="520" valign="top"> <h5><img src="images/aqua-sphere.jp
The Description field is named "toolDesc". How could this be accomplished?
Thanks so much,
Shane
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Why don't you try simply the "title" tag ?
<a title="<%=(rsToolLinks.Fie
<a title="<%=(rsToolLinks.Fie
i've noticed that firefox truncates the amount shown in that...
ASKER
Hi, kevp75. Thanks so much. That looks like the right direction, however, I may have omitted a crucial piece of information. I would like the tooltip to appear as a hover, or "mouseover". If the tooltip description (db field: "toolDesc") meets my need, then I will click that link to go the respective page (db field: "toolLink").
Is it possible to have both of these going on with one link?
Is it possible to have both of these going on with one link?
use onMouseOver event instead of onclick
ASKER
OK - I added the "onmouseover". Also, was the whole "function..." section of code supposed to be within "<script language="javascript"..></
I did so, and changed to "onmouseover", but nothing happens when hovering over the link.
I created a basic "ASP VBScript" page with a recordset to display the "toolDesc" of the respective "toolID" from the URL.
Here's that code:
--------------------------
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDD
<%
Dim rsToolTip__MMColParam
rsToolTip__MMColParam = "1"
If (Request.QueryString("tool
rsToolTip__MMColParam = Request.QueryString("toolI
End If
%>
<%
Dim rsToolTip
Dim rsToolTip_numRows
Set rsToolTip = Server.CreateObject("ADODB
rsToolTip.ActiveConnection
rsToolTip.Source = "SELECT * FROM tool_links WHERE toolID = " + Replace(rsToolTip__MMColPa
rsToolTip.CursorType = 0
rsToolTip.CursorLocation = 2
rsToolTip.LockType = 1
rsToolTip.Open()
rsToolTip_numRows = 0
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><%=(rsToolTip.Fields.I
</tr>
</table>
</body>
</html>
<%
rsToolTip.Close()
Set rsToolTip = Nothing
%>
--------------------------
And here's the code for the link on the original page:
<td width="520" valign="top"> <h5><img src="images/aqua-sphere.jp
Thanks so much, kevp75. You've always been very helpful.
I did so, and changed to "onmouseover", but nothing happens when hovering over the link.
I created a basic "ASP VBScript" page with a recordset to display the "toolDesc" of the respective "toolID" from the URL.
Here's that code:
--------------------------
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDD
<%
Dim rsToolTip__MMColParam
rsToolTip__MMColParam = "1"
If (Request.QueryString("tool
rsToolTip__MMColParam = Request.QueryString("toolI
End If
%>
<%
Dim rsToolTip
Dim rsToolTip_numRows
Set rsToolTip = Server.CreateObject("ADODB
rsToolTip.ActiveConnection
rsToolTip.Source = "SELECT * FROM tool_links WHERE toolID = " + Replace(rsToolTip__MMColPa
rsToolTip.CursorType = 0
rsToolTip.CursorLocation = 2
rsToolTip.LockType = 1
rsToolTip.Open()
rsToolTip_numRows = 0
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><%=(rsToolTip.Fields.I
</tr>
</table>
</body>
</html>
<%
rsToolTip.Close()
Set rsToolTip = Nothing
%>
--------------------------
And here's the code for the link on the original page:
<td width="520" valign="top"> <h5><img src="images/aqua-sphere.jp
Thanks so much, kevp75. You've always been very helpful.
ASKER
Ok, kevp75. I was able to make it work. I overlooked the "id=" portion. I changed that to "toolID=" and was able to view the descriptions.
Now - the last piece to this is I wanted the descriptions to appear in a "pop-up" layer/window and disappear after a couple of seconds. How could that be accomplished?
As it is, I have all the links looping horizontally (3 columns across and an indefinite number of rows until the EOF). Currently, I can hover over each of the links, but all the descriptions appear underneath the top, left link. It's like it's not following each link as they populated from the loop. The next best thing would be to have a pop-up layer/window that could appear in the center portion of the screen, etc. and disappear after a couple of seconds, or so.
Please help and thank you.
Now - the last piece to this is I wanted the descriptions to appear in a "pop-up" layer/window and disappear after a couple of seconds. How could that be accomplished?
As it is, I have all the links looping horizontally (3 columns across and an indefinite number of rows until the EOF). Currently, I can hover over each of the links, but all the descriptions appear underneath the top, left link. It's like it's not following each link as they populated from the loop. The next best thing would be to have a pop-up layer/window that could appear in the center portion of the screen, etc. and disappear after a couple of seconds, or so.
Please help and thank you.
I would say, remove the position:absolute; from the CSS and they should appear right next to the link, but that may also move the rest of the content down....
(without testing) I wonder if wrapping the link and the div in a container div would work:
<div><a....>thetext</a><di
?
as for making is disappear in a couple of seconds, I will need a bit to tool around with the function a bit.....maybe add in a setTimeout to change the visibility back to hidden?....
(without testing) I wonder if wrapping the link and the div in a container div would work:
<div><a....>thetext</a><di
?
as for making is disappear in a couple of seconds, I will need a bit to tool around with the function a bit.....maybe add in a setTimeout to change the visibility back to hidden?....
ASKER
OK - I just created a very basic page dynamically listing all the "Tool Links" (3 across / Infinite down).
I discovered that I get a response when the CSS page containing the "#tool-tip" ID is NOT linked. However, when I link it = nothing happens. Still, though, when it does respond, it is stil in the upper, left. Removing "absolute" does cause the page to spread out.
I discovered that I get a response when the CSS page containing the "#tool-tip" ID is NOT linked. However, when I link it = nothing happens. Still, though, when it does respond, it is stil in the upper, left. Removing "absolute" does cause the page to spread out.
can you post me your version of the code please?
ASKER
WITH the linked CSS page:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDD
<%
Dim rsToolList
Dim rsToolList_numRows
Set rsToolList = Server.CreateObject("ADODB
rsToolList.ActiveConnectio
rsToolList.Source = "SELECT * FROM tool_links ORDER BY toolLink ASC"
rsToolList.CursorType = 0
rsToolList.CursorLocation = 2
rsToolList.LockType = 1
rsToolList.Open()
rsToolList_numRows = 0
%>
<%
Dim Repeat_rsToolList__numRows
Dim Repeat_rsToolList__indexHL
Repeat_rsToolList__numRows
Repeat_rsToolList__indexHL
rsToolList_numRows = rsToolList_numRows + Repeat_rsToolList__numRows
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
//Get Contents of another page, and display them inside an element
strTargetDiv = '';
function loadurl(dest, str1) {
strTargetDiv = str1;
document.getElementById(st
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.X
}
catch (e) { /* do nothing */ }
dest = dest + "&sid="+Math.random()
xmlhttp.onreadystatechange
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}
function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var txt = xmlhttp.responseText;
var txtNod = document.createTextNode(tx
document.getElementById(st
document.getElementById(st
}
}
</script>
<link href="Preflite_Site_Files/
</head>
<body>
<table width="550" border="0" cellspacing="10" cellpadding="0">
<tr>
<%
' Horizontal Looper
While ((Repeat_rsToolList__numRo
%>
<td><a href="<%=(rsToolList.Field
<%
'Horizontal Looper
Repeat_rsToolList__indexHL
Repeat_rsToolList__numRows
rsToolList.MoveNext()
if len(nested_rsToolList)<=0 then
nested_rsToolList = 1
end if
if ((Repeat_rsToolList__numRo
Response.Write "</tr><tr>"
end if
nested_rsToolList = nested_rsToolList + 1
'end horizontal looper
Wend
%>
</tr>
</table>
</body>
</html>
<%
rsToolList.Close()
Set rsToolList = Nothing
%>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDD
<%
Dim rsToolList
Dim rsToolList_numRows
Set rsToolList = Server.CreateObject("ADODB
rsToolList.ActiveConnectio
rsToolList.Source = "SELECT * FROM tool_links ORDER BY toolLink ASC"
rsToolList.CursorType = 0
rsToolList.CursorLocation = 2
rsToolList.LockType = 1
rsToolList.Open()
rsToolList_numRows = 0
%>
<%
Dim Repeat_rsToolList__numRows
Dim Repeat_rsToolList__indexHL
Repeat_rsToolList__numRows
Repeat_rsToolList__indexHL
rsToolList_numRows = rsToolList_numRows + Repeat_rsToolList__numRows
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
//Get Contents of another page, and display them inside an element
strTargetDiv = '';
function loadurl(dest, str1) {
strTargetDiv = str1;
document.getElementById(st
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.X
}
catch (e) { /* do nothing */ }
dest = dest + "&sid="+Math.random()
xmlhttp.onreadystatechange
xmlhttp.open("GET", dest);
xmlhttp.send(null);
}
function triggered() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
var txt = xmlhttp.responseText;
var txtNod = document.createTextNode(tx
document.getElementById(st
document.getElementById(st
}
}
</script>
<link href="Preflite_Site_Files/
</head>
<body>
<table width="550" border="0" cellspacing="10" cellpadding="0">
<tr>
<%
' Horizontal Looper
While ((Repeat_rsToolList__numRo
%>
<td><a href="<%=(rsToolList.Field
<%
'Horizontal Looper
Repeat_rsToolList__indexHL
Repeat_rsToolList__numRows
rsToolList.MoveNext()
if len(nested_rsToolList)<=0 then
nested_rsToolList = 1
end if
if ((Repeat_rsToolList__numRo
Response.Write "</tr><tr>"
end if
nested_rsToolList = nested_rsToolList + 1
'end horizontal looper
Wend
%>
</tr>
</table>
</body>
</html>
<%
rsToolList.Close()
Set rsToolList = Nothing
%>
ASKER
Here is my db layout for this table ("tool_links"):
Fields:
{
toolID: automatic number
toolName: The title of the link on the user page
toolLink: The URL of the actual link
toolDesc: A description of the respective tool link
}
Fields:
{
toolID: automatic number
toolName: The title of the link on the user page
toolLink: The URL of the actual link
toolDesc: A description of the respective tool link
}
ASKER
... and here is what I pasted into the linked CSS file ("my_styles.css"):
#tool-tip{
z-index:14001;
width:400px;
height:200px;
border:2px solid #FF9900;
background:#fff;
padding:10px 0 10px 0;
visibility:hidden;
margin:13% 0 0 10%;
overflow:auto;
position: absolute;
}
#tool-tip{
z-index:14001;
width:400px;
height:200px;
border:2px solid #FF9900;
background:#fff;
padding:10px 0 10px 0;
visibility:hidden;
margin:13% 0 0 10%;
overflow:auto;
position: absolute;
}
ASKER
Although I'm using an extension called the "Horizontal Looper", I also tried it with just a basic repeat region listing straight down the page, and got the same results.
I have a typo....your link should be:
<a href="<%=(rsToolLinks.Fiel