How to add Tooltips to image at runtime ?

bill.. · Sep 15, 2003

I have created a VB app that generates a wireless network status map
several times a day.
The app adds hidden controls in specific areas of the image (on a
form) with extra info in the tooltips so that the user can hover over
a site and see the extra info pop up.

I have been asked to host this info on a web page, which I have done
for the map only - I copy and overwrite the source image of a
simple ASP.

Question: How should I go about adding the tooltip functionality?
Remember this has to be done at runtime. Even the number of sites can
change.

In VB I added a new control to the image for each site in the database
at its Lat and Lon but I am not sure how to approch this for an ASP.

A good analogy would be a web page with a weather map of the USA
where hovering over bad weather pops up a tooltip showing the current
temp etc

Any suggestions?

Thanks

Bill

dlbjr · Sep 15, 2003

Bill, I would create a grid overlay of the graphic using a transparent
graphic to the grid size..

Then set coordinates dynamically from the data

Adrienne · Sep 16, 2003

A good analogy would be a web page with a weather map of the USA
where hovering over bad weather pops up a tooltip showing the current
temp etc

If you're going to be using an image map, then use both the Alt attribute
and Title attribute in the Area element.

Bite My Bubbles · Sep 16, 2003

bill.. · Sep 17, 2003

Bill, I would create a grid overlay of the graphic using a transparent
graphic to the grid size..

Then set coordinates dynamically from the data

Ok but how do I reference it in the correct location? - I am pretty
much a beginner at asp stuff!

How do I say add a tooltip at x=10, y = 30 and another at x= 100,
y=100

An example would really help

Thanks

Bill

dlbjr · Sep 17, 2003

Bill,
Here is a simple html with javascript.
Save as a html and load in your browser.
I have commented the section of javascript
where you need to add logic.

<html>
<head>
<title></title>
<script language="javascript">
function getCoord(e){
var x = e.layerX || e.offsetX ;
var y = e.layerY || e.offsetY ;
hide();
show(x,y);
}
function show(x,y){
popup.value = getnote(x,y)
popup.style.left = x + 15
popup.style.top = y + 36
popup.style.height = 50
popup.style.width = 100
}
function hide(){
popup.value = ""
popup.style.height = 0
popup.style.width = 0
}
function getnote(x,y){
/**
Use server side ASP logic
to create client side logic here
Example:
Have a 2 Dimensional array full of messages to use.
*/
return "x = " + x + " , y = " + y;
}
</script>
<style>
..message
{
position:absolute;
background-color:yellow;
color:black;
border-color:black;
height:0;
width:0
}
</style>
</head>
<body>
<input type=button class="message" id="popup">
<img src="pic.jpg"
style="cursor: hand;"
width="300"
height="300"
onmousemove="getCoord(event)"
onmouseout="hide()"/>
</body>
</html>

HTH,

-dlbjr

Discerning resolutions for the alms

Phillip Windell · Sep 17, 2003

bill.. said:
Question: How should I go about adding the tooltip functionality?
Remember this has to be done at runtime. Even the number of sites can
change.

I think the image map as Adrienne and Bubbles described is the way to
go, but there is something in your terminology (runtime) that hints at
some expectations that you will not get.

There is really no such thing as "run time" in the sense I think you
mean it. In ASP "runtime" occurs only as the server generates the
page. Runtime ends as soon as the Server finishes sending the page to
the browser. By the time you can view the page in the browser, the
"runtime" has already come to an end. The page will never update no
matter how long you sit and watch it. The only way to display new
changes is to send a new request to the server and have it send a new
page based on new data. Now you could have the page rigged to
automatically refresh every few seconds, like maybe 15 seconds or
something. But even that isn't really "live" data, it is just static
data that is updated every 15 seconds.

The only way to have "live" data is to use some type of streaming
(like with video) or to have some kind of component on the client that
maintains a constant connection to the server (which has nothing to do
with ASP).

--

Phillip Windell [CCNA, MVP, MCP]
(e-mail address removed)
WAND-TV (ABC Affiliate)
www.wandtv.com

bill.. · Sep 18, 2003

I think the image map as Adrienne and Bubbles described is the way to
go, but there is something in your terminology (runtime) that hints at
some expectations that you will not get.

There is really no such thing as "run time" in the sense I think you
mean it. In ASP "runtime" occurs only as the server generates the
page. Runtime ends as soon as the Server finishes sending the page to
the browser. By the time you can view the page in the browser, the
"runtime" has already come to an end. The page will never update no
matter how long you sit and watch it. The only way to display new
changes is to send a new request to the server and have it send a new
page based on new data. Now you could have the page rigged to
automatically refresh every few seconds, like maybe 15 seconds or
something. But even that isn't really "live" data, it is just static
data that is updated every 15 seconds.

The only way to have "live" data is to use some type of streaming
(like with video) or to have some kind of component on the client that
maintains a constant connection to the server (which has nothing to do
with ASP).

Good point but all I need is a refresh every 5 minutes or so and I
will be fine

Thanks

Bill

How to make a tooltip over an image?	3	Feb 13, 2024
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Unable to add task to todo list	1	Sep 25, 2021
How can I remove the extra space marked in the image attached to my Email HTML template?	2	Feb 25, 2023
trouble creating tooltips using Wx in Tk canvas	3	Jul 6, 2011
How do I upload image to firebase and retrieve it using picasso	14	Apr 28, 2019
Using iframes to dynamically generate tooltips	9	May 18, 2009
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023

How to add Tooltips to image at runtime ?

bill..

dlbjr

Adrienne

Bite My Bubbles

bill..

dlbjr

Phillip Windell

bill..

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads