Dynamically changing image map using XML data

[petethebloke]

Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system at
http://www.ilex-urc-maps.com/testing.html but I can't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

Thanks

Pete

[petethebloke]

On 6 Jun, 16:23, "[e-mail]"
<[e-mail]:

Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbut I can't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

Thanks

Pete

UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Pete

[-Lost]

pe**********@googlemail.com wrote:

On 6 Jun, 16:23, "[e-mail]"
<[e-mail]:

>Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbut I can't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Number one thing I think of, is make it accessible at least with a
default "sorry this page requires JavaScript" example.

Anyway, to get more Internet Explorer-compatible, you need to can the
setAttributes in lieu of setting the attributes directly.

That was all I saw, but I didn't read in depth.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[petethebloke]

On 7 Jun, 13:48, -Lost <[e-mail]:

[e-mail] wrote:

On 6 Jun, 16:23, "[e-mail]"
<[e-mail]:

Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbutI can't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Number one thing I think of, is make it accessible at least with a
default "sorry this page requires JavaScript" example.

Anyway, to get more Internet Explorer-compatible, you need to can the
setAttributes in lieu of setting the attributes directly.

That was all I saw, but I didn't read in depth.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

Thanks for taking a look.
I've had a bit of a hard time with it. I've used debugbar to get IE's
interpreted source and this works when copied and pasted into a new
document (with the Ajax bits removed, of course).
I'll try your tip about setAttribute tomorrow morning (it's GMT here).

Thanks again,
Pete

[-Lost]

pe**********@googlemail.com wrote:

On 7 Jun, 13:48, -Lost <[e-mail]:

>[e-mail] wrote:

>>On 6 Jun, 16:23, "[e-mail]"
<[e-mail]:
Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.
I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbutI can't get the
dynamically altered hotspots to work.
Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.
UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Number one thing I think of, is make it accessible at least with a
default "sorry this page requires JavaScript" example.

Anyway, to get more Internet Explorer-compatible, you need to can the
setAttributes in lieu of setting the attributes directly.

That was all I saw, but I didn't read in depth.

Thanks for taking a look.
I've had a bit of a hard time with it. I've used debugbar to get IE's
interpreted source and this works when copied and pasted into a new
document (with the Ajax bits removed, of course).
I'll try your tip about setAttribute tomorrow morning (it's GMT here).

I actually posted this at 9:01 AM EST, but it seems it never got sent.

"One more quick thing... does it make sense to have 36 separate images
when only *1* character changes?

I think you could easily turn that into an absolutely positioned DIV or
SPAN that changes the number on each request."

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

[petethebloke]

On 7 Jun, 17:42, -Lost <[e-mail]:

[e-mail] wrote:

On 7 Jun, 13:48, -Lost <[e-mail]:

[e-mail] wrote:
On 6 Jun, 16:23, "[e-mail]"
<[e-mail]:
Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.
I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbutIcan't get the
dynamically altered hotspots to work.
Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.
UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....
Number one thing I think of, is make it accessible at least with a
default "sorry this page requiresJavaScript" example.

Anyway, to get more Internet Explorer-compatible, you need to can the
setAttributes in lieu of setting the attributes directly.

That was all I saw, but I didn't read in depth.

Thanks for taking a look.
I've had a bit of a hard time with it. I've used debugbar to get IE's
interpreted source and this works when copied and pasted into a new
document (with the Ajax bits removed, of course).
I'll try your tip about setAttribute tomorrow morning (it's GMT here).

I actually posted this at 9:01 AM EST, but it seems it never got sent.

"One more quick thing... does it make sense to have 36 separate images
when only *1* character changes?

I think you could easily turn that into an absolutely positioned DIV or
SPAN that changes the number on each request."

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.

Sorry. Should have been clearer. The images used at the moment are
just for testing. The eventual images used will be a full street map
of the city - there's a prototype at http://www.ilex-urc-maps.com/project...edcity_loc.htm
but we want to use Ajax to make the whole thing smooth and fast. I
just wish the popup images weren't part of the cunning plan!

Thanks again,

Pete

[petethebloke]

On 6 Jun, 17:09, "[e-mail]"
<[e-mail]:

On 6 Jun, 16:23, "[e-mail]"

<[e-mail]:

Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbutI can't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

Thanks

Pete

UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Pete

UPDATE NUMBER 2
Got it working mostly. Still some tidying to do in IE. If anyone cares
here's a section of code...
var root = myDocument.getElementsByTagName('mapfile')[0];
var filename = root.getAttribute("filename");
var width = root.getAttribute("width");
var height= root.getAttribute("height");
var hotspotList = myDocument.getElementsByTagName('Hotspot');
//code here for hotspots
//each hotspot looks like this....
//<area shape="poly" coords="" href="" alt="" title=""
onMouseOver="MM_showHideLayers('id','','show')"
onMouseOut="MM_showHideLayers('id','','hide')">
//<Hotspot coordinates="202,199,251,200,251,249,200,250"
popupFile="test.gif" link="fred" title="fred.html" y="100" x="100"/>
//clear map if it exists already
delete spotForHots;
var spotForHots;
var oldmap=document.getElementById("mainMapMap")
if(oldmap!=null){
//document.body.removeChild(oldmap);
// remove all children from element
var element = document.getElementById("mainMapMap");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
spotForHots=element;
}
else{
spotForHots=document.createElement("map");
spotForHots.setAttribute("name","mainMapMap");
spotForHots.setAttribute("id","mainMapMap");
}
for(var x=0;x<hotspotList.length;x++){
var hotspot=document.createElement('area');
hotspot.setAttribute('shape','poly');

hotspot.setAttribute('coords',hotspotList[x].getAttribute("coordinates"));
hotspot.setAttribute('href',hotspotList[x].getAttribute("link"));

hotspot.setAttribute('title',hotspotList[x].getAttribute("title"));
hotspot.setAttribute('alt',hotspotList[x].getAttribute("title"));
hotspot.setAttribute('onMouseOver','MM_showHideLay ers(\'layer'+ x
+'\',\'\',\'show\')');
hotspot.setAttribute('onMouseOut','MM_showHideLaye rs(\'layer'+ x
+'\',\'\',\'hide\')');
spotForHots.appendChild(hotspot);

//add layers and images
var layer=document.createElement('div');
layer.setAttribute('id','layer'+x);

layer.setAttribute('style','position:absolute;left :'+hotspotList[x].getAttribute("x")
+'px;top:'+hotspotList[x].getAttribute("y")+'px;width:94px;height:
110px;z-index:1;visibility:hidden;');
var pic=document.createElement('img');
pic.setAttribute('src',hotspotList[x].getAttribute("popupFile"));
layer.appendChild(pic);
document.body.appendChild(layer);

}
document.body.appendChild(spotForHots);
//code for popups looks like this
//<div id="first" style="position:absolute; left:288px; top:254px;
width:94px; height:110px; z-index:1; visibility: hidden;"><img src="../
images/sml_derrypreschurch_8560.jpg" width="150" height="194"></div>

[petethebloke]

On 8 Jun, 10:19, "[e-mail]"
<[e-mail]:

On 6 Jun, 17:09, "[e-mail]"

<[e-mail]:

On 6 Jun, 16:23, "[e-mail]"

<[e-mail]:

Can anyone help? I have a client who has made a "dynamic interactive
map" of our city using Dreamweaver. Each map file has hotspots that
pop-up a div with a little image when the mouse goes over them. They
also link to another file.

I've converting the application to a PHP-AJAX system athttp://www.ilex-urc-maps.com/testing.htmlbutIcan't get the
dynamically altered hotspots to work.

Any ideas? Please don't tell me that the client should not use image
maps - that's not an option at this stage.

Thanks

Pete

UPDATE
I seem to have it working in Firefox. Now just have to fix it in the
other browser.
Still be glad of any help....

Pete

UPDATE NUMBER 2
Got it working mostly. Still some tidying to do in IE. If anyone cares
here's a section of code...
var root = myDocument.getElementsByTagName('mapfile')[0];
var filename = root.getAttribute("filename");
var width = root.getAttribute("width");
var height= root.getAttribute("height");
var hotspotList = myDocument.getElementsByTagName('Hotspot');
//code here for hotspots
//each hotspot looks like this....
//<area shape="poly" coords="" href="" alt="" title=""
onMouseOver="MM_showHideLayers('id','','show')"
onMouseOut="MM_showHideLayers('id','','hide')">
//<Hotspot coordinates="202,199,251,200,251,249,200,250"
popupFile="test.gif" link="fred" title="fred.html" y="100" x="100"/>
//clear map if it exists already
delete spotForHots;
var spotForHots;
var oldmap=document.getElementById("mainMapMap")
if(oldmap!=null){
//document.body.removeChild(oldmap);
// remove all children from element
var element = document.getElementById("mainMapMap");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
spotForHots=element;
}
else{
spotForHots=document.createElement("map");
spotForHots.setAttribute("name","mainMapMap");
spotForHots.setAttribute("id","mainMapMap");
}
for(var x=0;x<hotspotList.length;x++){
var hotspot=document.createElement('area');
hotspot.setAttribute('shape','poly');

hotspot.setAttribute('coords',hotspotList[x].getAttribute("coordinates"));
hotspot.setAttribute('href',hotspotList[x].getAttribute("link"));

hotspot.setAttribute('title',hotspotList[x].getAttribute("title"));
hotspot.setAttribute('alt',hotspotList[x].getAttribute("title"));
hotspot.setAttribute('onMouseOver','MM_showHideLay ers(\'layer'+ x
+'\',\'\',\'show\')');
hotspot.setAttribute('onMouseOut','MM_showHideLaye rs(\'layer'+ x
+'\',\'\',\'hide\')');
spotForHots.appendChild(hotspot);

//add layers and images
var layer=document.createElement('div');
layer.setAttribute('id','layer'+x);

layer.setAttribute('style','position:absolute;left :'+hotspotList[x].getAttribute("x")
+'px;top:'+hotspotList[x].getAttribute("y")+'px;width:94px;height:
110px;z-index:1;visibility:hidden;');
var pic=document.createElement('img');
pic.setAttribute('src',hotspotList[x].getAttribute("popupFile"));
layer.appendChild(pic);
document.body.appendChild(layer);

}
document.body.appendChild(spotForHots);

//code for popups looks like this
//<div id="first" style="position:absolute; left:288px; top:254px;
width:94px; height:110px; z-index:1; visibility: hidden;"><img src="../
images/sml_derrypreschurch_8560.jpg" width="150" height="194"></div>

Oops. Google Groups decided to post that message about 36 hours after
I wrote it.

FINAL update - and thanks to -Lost for the help.
I've changed element.setAttribute("onmouseover",....
to element.onmouseover=new Function()
and it works in FF and IE7.

I'm elated!

Pete