How to add Tooltips to image at runtime ?

TheMSsForum.com: The Microsoft Software Forum

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
Top

Re: How to add Tooltips to image at runtime ? by dlbjr

dlbjr
Mon Sep 15 17:18:45 CDT 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

--
-dlbjr

invariable unerring alien


Top

Re: How to add Tooltips to image at runtime ? by Adrienne

Adrienne
Mon Sep 15 19:32:44 CDT 2003

Gazing into my crystal ball I observed bill.. <b@c.com> writing in
news:i6dcmv4254g1o4nqoojpp4ik69k6a3rc4g@4ax.com:

> 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.

--
Adrienne Boswell
Please respond to the group so others can share
http://www.arbpen.com
Top

Re: How to add Tooltips to image at runtime ? by Bite

Bite
Mon Sep 15 22:48:09 CDT 2003

<img src=myimage.jpg alt="You are hovering over the great state of Wyoming"
Title="Up yours">

"Adrienne" <arbpen@sbcglobal.net> wrote in message
news:Xns93F7B282D4A98arbpenyahoocom@207.115.63.158...
> Gazing into my crystal ball I observed bill.. <b@c.com> writing in
> news:i6dcmv4254g1o4nqoojpp4ik69k6a3rc4g@4ax.com:
>
> > 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.
>
> --
> Adrienne Boswell
> Please respond to the group so others can share
> http://www.arbpen.com


Top

Re: How to add Tooltips to image at runtime ? by bill

bill
Tue Sep 16 20:31:57 CDT 2003

On Mon, 15 Sep 2003 17:18:45 -0500, "dlbjr" <dontknow@do.u> wrote:

>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
Top

Re: How to add Tooltips to image at runtime ? by dlbjr

dlbjr
Tue Sep 16 22:26:11 CDT 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


Top

Re: How to add Tooltips to image at runtime ? by Phillip

Phillip
Wed Sep 17 15:09:11 CDT 2003

"bill.." <b@c.com> wrote in message
news:i6dcmv4254g1o4nqoojpp4ik69k6a3rc4g@4ax.com...
> 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]
pwindell@wandtv.com
WAND-TV (ABC Affiliate)
www.wandtv.com


Top

Re: How to add Tooltips to image at runtime ? by bill

bill
Wed Sep 17 20:26:18 CDT 2003

On Wed, 17 Sep 2003 15:09:11 -0500, "Phillip Windell"
<pwindell@wandtv.com> wrote:

>"bill.." <b@c.com> wrote in message
>news:i6dcmv4254g1o4nqoojpp4ik69k6a3rc4g@4ax.com...
>> 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).


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

Thanks

Bill
Top