Refresh image map.

[Mark Read]

Hi,

I have an image that displays in graphical format, content from a database that is
constantly changing. I would like to be able to display certain information using
tool-tips by using an image map.

The image refreshes using js every 10 seconds, meaning that the image map is soon
out of date.

The image and map are built using php, and the map (a flat file) is inserted using
a php 'include'.

I'm sure there must be a way of updating the map without reloading the page, but
despite extensive googling, I've yet to come up with anything that works.

Would someone give me a nudge in the right direction please? I daresay I haven't
explained things too well, so feel free to ask me what I'm babbling on about. ;-)

- Steve

 

[Sean Kinsey]

Hi,

I have an image that displays in graphical format, content from a database that is
constantly changing. I would like to be able to display certain information using
tool-tips by using an image map.

The image refreshes using js every 10 seconds, meaning that the image mapis soon
out of date.

The image and map are built using php, and the map (a flat file) is inserted using
a php 'include'.

I'm sure there must be a way of updating the map without reloading the page, but
despite extensive googling, I've yet to come up with anything that works.

Would someone give me a nudge in the right direction please? I daresay I haven't
explained things too well, so feel free to ask me what I'm babbling on about. ;-)

The word AJAX comes to mind...

 

[Mark Read]

Would someone give me a nudge in the right direction please? I
daresay I haven't
explained things too well, so feel free to ask me what I'm
babbling on about. ;-)

The word AJAX comes to mind...
[/QUOTE]
Yes, I feel a whole new learning curve approaching. Fortunately, this is hobby
level. I just thought that there might be a DOM/innerHTML way of doing it, and me
just not able to see the wood for the trees.

- Steve

 

[VK]

I just thought that there might be a DOM/innerHTML way of doing it, and me
just not able to see the wood for the trees.

Well, the crucial question is if you need to update <map> data (areas'
definitions) as well on each update or the image map only. For the
latter it is trivia with imgMapObjectName.src = newSrc

 

[Mark Read]

*From:* VK <[email protected]>
*Date:* Mon, 19 Apr 2010 05:42:25 -0700 (PDT)



Well, the crucial question is if you need to update <map> data
(areas'
definitions) as well on each update or the image map only. For the
latter it is trivia with imgMapObjectName.src = newSrc

It will have to be all together, the image is a worldmap, there are 'events'
overlayed on the map as little coloured blobs. I would like to be able to hover the
mouse over the blob and it tell me what the 'event' was. I purposely left that bit
of info out, as I don't want to confuse the issue by having 'map' and 'mapmap'!!!!

It's a graphical version of the Ham Radio DX Cluster I'm working on. The map part
works, the mapmap is the issue. I hope that makes more sense ;-)

- Steve

 

[Evertjan.]

Mark Read wrote on 19 apr 2010 in comp.lang.javascript:

It will have to be all together, the image is a worldmap, there are
'events' overlayed on the map as little coloured blobs. I would like
to be able to hover the mouse over the blob and it tell me what the
'event' was. I purposely left that bit of info out, as I don't want to
confuse the issue by having 'map' and 'mapmap'!!!!

It's a graphical version of the Ham Radio DX Cluster I'm working on.
The map part works, the mapmap is the issue. I hope that makes more
sense ;-)

Not really. "mapmap" does not ring a bell.

Why not forget the HTML imagemapping altogether and just insert and
delete DOM-wize seperate absolutely positioned small images complete with
hover and click listeners?

You will have a choice having all the info on the page and refreshing the
whole page with frech info now and then, or having the pages javascript
ask the server for new information, and the latter technique is called
AJAX.

 

[Mark Read]

*From:* "Evertjan." <[email protected]>
*Date:* 19 Apr 2010 13:29:29 GMT

Not really. "mapmap" does not ring a bell.

An image map for a world map... ;-)

Why not forget the HTML imagemapping altogether and just insert and
delete DOM-wize seperate absolutely positioned small images
complete with hover and click listeners?

Simply? I'm not a js programmer, and I'm only doing it now because I can't do what
I want server side.

You will have a choice having all the info on the page and
refreshing the whole page with frech info now and then, or having
the pages javascript ask the server for new information, and the
latter technique is called AJAX.

Yes, it's the whole AJAX thing.. that and the fact that I've already done it in
PHP, MySQL, GD.

Fired with renewed enthusiasm, I've read a W3 tutorial on AJAX, and found something
that looks like what I was playing with before, but wrapped in XML. I'm greatly
optimistic, I'll see when I get home and start playing. I'll report back.

- Steve

 

[Evertjan.]

Mark Read wrote on 19 apr 2010 in comp.lang.javascript:

An image map for a world map... ;-)

Simply? I'm not a js programmer, and I'm only doing it now because I
can't do what I want server side.

For a professional job, hire a programmer,
for your hobby, try something new.

Yes, it's the whole AJAX thing.. that and the fact that I've already
done it in PHP, MySQL, GD.

Fired with renewed enthusiasm, I've read a W3 tutorial on AJAX, and
found something that looks like what I was playing with before, but
wrapped in XML. I'm greatly optimistic, I'll see when I get home and
start playing. I'll report back.

That is not what I mean with simple AJAX.

Just fetch data repeatedly woth xmlhttp [6 lines of code, see below] and
process those data clientside, that must be simple enoug to do.

If you cannot do that with in-browser Javascript and do not want to
learn, I doubt anyone in this NG will give you a free ride.

var xmlHttp = new XMLHttpRequest();
// older browser compatibility skipped

function getUrl(url) {
xmlHttp.open("GET",url,false);
xmlHttp.send();
return xmlHttp.responseText;
};

 

[Mark Read]

*From:* "Evertjan." <[email protected]>
*Date:* 19 Apr 2010 15:36:00 GMT

Mark Read wrote on 19 apr 2010 in comp.lang.javascript:


For a professional job, hire a programmer,
for your hobby, try something new.

That pretty much sums it up, I had an idea, and almost made it work, but fell at
the last hurdle. :-/ Though only way forward was to "try something new".

having >> the pages javascript ask the server for new information,
and the >> latter technique is called AJAX.

Yes, it's the whole AJAX thing.. that and the fact that I've
already
done it in PHP, MySQL, GD.

Fired with renewed enthusiasm, I've read a W3 tutorial on AJAX,
and
found something that looks like what I was playing with before,
but
wrapped in XML. I'm greatly optimistic, I'll see when I get home
and
start playing. I'll report back.

That is not what I mean with simple AJAX.

Just fetch data repeatedly woth xmlhttp [6 lines of code, see
below] and process those data clientside, that must be simple enoug
to do.

If you cannot do that with in-browser Javascript and do not want to
learn, I doubt anyone in this NG will give you a free ride.

If I was starting from a clean slate, that's good advice, however, as I stated in
an earlier post, the number crunching is already done, and is working fine. So the
worldmap displays exactly how I want it. With the guidance offered here today it
looks like I'm armed with enough info to do it right, and get it working.

The code below looks much like what I saw on the W3 tutorial... and it's that that
I'm going to try later.

var xmlHttp = new XMLHttpRequest();
// older browser compatibility skipped

function getUrl(url) {
xmlHttp.open("GET",url,false);
xmlHttp.send();
return xmlHttp.responseText;
};

Cheers again,

- Steve

 

[Mark Read]

*Subject:* Refresh image map.
*From:* (e-mail address removed) (Mark Read)
*Date:* Mon, 19 Apr 2010 13:02 +0100 (BST)

Hi,

I have an image that displays in graphical format, content from a
database that is
constantly changing. I would like to be able to display certain
information using
tool-tips by using an image map.

The image refreshes using js every 10 seconds, meaning that the
image map is soon
out of date.

The image and map are built using php, and the map (a flat file) is
inserted using
a php 'include'.

I'm sure there must be a way of updating the map without reloading
the page, but
despite extensive googling, I've yet to come up with anything that
works.

Would someone give me a nudge in the right direction please? I
daresay I haven't
explained things too well, so feel free to ask me what I'm babbling
on about. ;-)

- Steve

and finally....

This appears to be a Firefox issue. Using Firebug, I can see that the
image map *IS* getting loaded.

Everything with respect to loading image and map is working fine, but I
cannot fathom how to tell FF to use the new map!!

It loads the image map OK first time, and then uses that one,
disregarding all attempts to tell it otherwise.

FWIW, Opera, Safari, and IE6+ seem to work fine.

Maybe a browser bug???


- Steve

 

[David Mark]

and finally....

This appears to be a Firefox issue. Using Firebug, I can see that the
image map *IS* getting loaded.

Everything with respect to loading image and map is working fine, but I
cannot fathom how to tell FF to use the new map!!

It loads the image map OK first time, and then uses that one,
disregarding all attempts to tell it otherwise.

FWIW, Opera, Safari, and IE6+ seem to work fine.

Maybe a browser bug???

Could be almost anything. You haven't said _how_ you are trying to tell
FF to use the new map. Are you shouting at the monitor?

 

[nick]

Everything with respect to loading image and map is working fine, but I
cannot fathom how to tell FF to use the new map!!

It loads the image map OK first time, and then uses that one,
disregarding all attempts to tell it otherwise.

Found out on the web:

| This issue was fixed by generating a random name for the
| image map each time the images are toggled and then using
| the DOM to change the "useMap" attribute to match the
| random name.

Posting the URL will probably break something but that's really all
that was useful there.

Also found this interesting technique:

http://www.frankmanno.com/ideas/css-imagemap-redux/

-- Nick

 

[Mark Read]

and finally....

This appears to be a Firefox issue. Using Firebug, I can see that
the
image map *IS* getting loaded.

Everything with respect to loading image and map is working fine,
but I cannot fathom how to tell FF to use the new map!!

It loads the image map OK first time, and then uses that one,
disregarding all attempts to tell it otherwise.

FWIW, Opera, Safari, and IE6+ seem to work fine.

Maybe a browser bug???

Could be almost anything. You haven't said _how_ you are trying to
tell
FF to use the new map. Are you shouting at the monitor?
[/QUOTE]

ROFL writing the name on a piece of paper and sticking it through the
slots in the front of my tower case ought to do it. ;-)

Seriously though, this is the code straight from the php source file, so
that you can see how the files are called. 'gdallspots.php' outputs only
the PNG image with all the lines on it. 'call.php' builds the imagemap.

The image loads fine, the imagemap loads fine, and in any other browser
than firefox the two play happily together.

The real thing is at http://www.g0lfp.com/maps and as you can probably
tell, I'm more at home with php. This is just one of those things you
/can't/ do server side ;-)

regards,

Steve

here is the bit that 'does the biz'



<script language="Javascript">
<!-- hide
var x = 30;
var y = 1;

function start()
{
startClock();
timerID2 = setTimeout("loadXMLDoc()", 2000);
}

function startClock()
{
x = x-y;
document.form1.clock.value = x;
if (x < 0) reload();
timerID1 = setTimeout("startClock()", 1000);
}

function reload()
{
now = new Date();
var mapImg = "gdallspots.php<?PHP echo "?band=$band\" + \"&q=\" +
now.getTime()"; ?>;
document.map.src = mapImg;
x = 30;
document.form1.clock.value = x;
loadXMLDoc();
}



function loadXMLDoc()
{
now = new Date();
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //document.getElementById("myDiv").innerHTML=" ";
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//$imagefile="imgmap".$band.".txt";

mapfile = "call.php<?PHP echo "?band=$band\" + \"&q=\" + now.getTime()";
?>;
xmlhttp.open("GET",mapfile,true);
xmlhttp.send("");
}

function writeText(txt)
{
document.getElementById("desc").innerHTML=txt;
}
// end hide -->
</script>


- Steve

 

[Mark Read]

*Subject:* Re: Refresh image map.
*From:* nick <[email protected]>
*Date:* Thu, 22 Apr 2010 18:43:56 -0700 (PDT)



Found out on the web:

| This issue was fixed by generating a random name for the
| image map each time the images are toggled and then using
| the DOM to change the "useMap" attribute to match the
| random name.

I'd thought of that, since that's what I have to do to refresh the
image... bit of a kludge though isn't it?

Posting the URL will probably break something but that's really all
that was useful there.

Also found this interesting technique:

http://www.frankmanno.com/ideas/css-imagemap-redux/

-- Nick

Interesting... Hadn't thought of layers. I'll revisit that when I get
home tonight. If I get time this weekend I'll have a play.

Thanks for that one.

- Steve