Dynamically changing image map using XML data

P

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
 
P

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 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
Click to expand...

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
 
L

-Lost

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....
Click to expand...

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

petethebloke

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.
Click to expand...

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
 
L

-Lost

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).
Click to expand...

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

petethebloke

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."
Click to expand...

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/projects_by_location/walledcity_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
 
P

petethebloke

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
Click to expand...

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_showHideLayers(\'layer'+ x
+'\',\'\',\'show\')');
hotspot.setAttribute('onMouseOut','MM_showHideLayers(\'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>
 
P

petethebloke

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....
Click to expand...
Pete
Click to expand...

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_showHideLayers(\'layer'+ x
+'\',\'\',\'show\')');
hotspot.setAttribute('onMouseOut','MM_showHideLayers(\'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>
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Checking dynamically populated data using ajax with user entered value 5
Refresh image map. 13
Survey details won't go through using php, ajax, Mysql 3
Image map with links Javascript 0
dynamic image map not working in IE6 0
image map test page - won't work in IE6 or FF 3
Dynamically change background image size in Firefox 0
using dynamic image generation 10

Members online

Total: 246 (members: 1, guests: 245)
Robots: 455

Forum statistics

Threads
474,431
Messages
2,571,679
Members
48,796
Latest member
Greg L.

Latest Threads

Top