PDA

View Full Version : Dynamically created image + dynamically created area map...



newshound
07-30-2008, 02:01 PM
I'd tried this using .innerHTML, which was shorter code, but it had the same results as the following code.




var num = 0;

function addElement() {
var ni = document.getElementById('MDI');
var newitem = document.createElement('img');
var newmap = document.createElement('map');
var newarea = document.createElement('area');
var imgStyle = 'height=200px; width:200px;';
var imgIdName = 'myimg' + num;

newarea.setAttribute('href','YYY.html');
newarea.setAttribute('shape', 'rect');
newarea.setAttribute('coords', '10,10,200,200');

newmap.appendChild(newarea);
newmap.name = "mymap" + num;

newitem.setAttribute('src','myimage.png');
newitem.useMap = '#' + newmap.name;
newitem.setAttribute('style',imgStyle);
newitem.style.position = "absolute";
newitem.style.left = "100px";
newitem.style.top = "100px";
newitem.setAttribute('id',imgIdName);

ni.appendChild(newitem);

num+=1
}


It creates everything ok, and it puts a blue border around the image as if an area map is applied to the image, but if you mouseover or click anywhere on the image (or anywhere on the page), the actual link simply is not there.

I can get the created image to work with a map defined in the body using HTML, but I cannot get it to work with the created map. Anybody know how to do this?

jscheuer1
07-31-2008, 06:22 AM
Support for image maps is really screwy in the various browsers, so I'm not surprised you are having trouble. This works in FF 3:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var num = 0;

function addElement() {
var ni = document.getElementById('MDI');
var newitem = document.createElement('img');
var newmap = document.createElement('map');
var newarea = document.createElement('area');
var imgIdName = 'myimg' + num;

newarea.href = 'YYY.html';
newarea.shape = 'rect';
newarea.coords = '10,10,200,200';

newmap.appendChild(newarea);
newmap.setAttribute('name', 'mymap' + num, 0);

newitem.src = 'fwork7.gif';
newitem.useMap = '#' + 'mymap' + num;
newitem.style.height = "200px";
newitem.style.width = "200px";
newitem.id = imgIdName;

ni.appendChild(newitem);
ni.appendChild(newmap);

num++;
}
</script>
</head>
<body onload="addElement();">
<div id="MDI">

</div>
</body>
</html>

But not IE. I doubt that anything will. Perhaps using innerHTML or maybe even outerHTML might work in IE. But regardless of whether I used:


newmap.setAttribute('name', 'mymap' + num, 0);

or:


newmap.name = 'mymap' + num;

both of which worked in FF 3, IE would not assign the name attribute to the map. Without that, there is little hope of the image using the map.

jscheuer1
07-31-2008, 06:29 AM
I decided to try writing the generated source of the working map in FF 3 to IE 7 and that worked in both browsers:


document.getElementById('MDI').innerHTML = '<img id="myimg0" style="height: 200px; width: 200px;" usemap="#mymap0" src="fwork7.gif"><map name="mymap0"><area coords="10,10,200,200" shape="rect" href="YYY.html"></map>';

rangana
07-31-2008, 09:43 AM
Indeed buggy. Makes me remember of my recent read:
http://waffleson.co.uk/2007/12/explorer-can-t-name-radio-dom

newshound
07-31-2008, 10:36 AM
I decided to try writing the generated source of the working map in FF 3 to IE 7 and that worked in both browsers:


document.getElementById('MDI').innerHTML = '<img id="myimg0" style="height: 200px; width: 200px;" usemap="#mymap0" src="fwork7.gif"><map name="mymap0"><area coords="10,10,200,200" shape="rect" href="YYY.html"></map>';


IE :rolleyes:

I hadn't tried innerHTML on the whole thing... only on the map in order to write in the area tag.

Thanks jscheuer.

ahmed_ellouze
02-03-2011, 09:13 AM
I have a problem in displaying a map on the internet explorer and map display well but the problem is that it is not clickable here is my code thank you for your reply

<script language="javascript" type="text/javascript">
function accendi(regione) {

document.getElementById('tunisie').src = "<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-tunisie.png";
var imm = "<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-" + regione + ".png";
document.getElementById('tunisie').src = imm;
}
function spegni() {
document.getElementById('tunisie').src = "<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-tunisie.png";
}
function getform1(controlDiv1,map1 )
{
var prova = document.createElement('DIV');
prova.setAttribute("id","prova");
prova.setAttribute("align","center");
var img = document.createElement('img');

img.setAttribute("id","tunisie");
img.setAttribute("border","1");
img.setAttribute("useMap","#Map");
img.setAttribute("src","<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-tunisie.png");
prova.appendChild(img);

var mapz = document.createElement("Map");
mapz.setAttribute("name","Map");
prova.appendChild(mapz);

//img.appendChild(mapz);

var ariana = document.createElement('area');
mapz.appendChild(ariana);
ariana.setAttribute("class","hasTip");
ariana.setAttribute("id","ariana1");
ariana.setAttribute("title","Ariana");
ariana.setAttribute("onMouseOver","accendi('ariana');");
ariana.setAttribute("onFocus","accendi('ariana');");
ariana.setAttribute("onMouseOut","spegni();");
ariana.setAttribute("coords","39,206,37,212,33,218,33,222,31,224,35,221,39,222,50,222,49,218,43,210,44,204");
ariana.setAttribute("shape","poly");
//ariana.style.cursor = 'pointer';
google.maps.event.addDomListener(ariana, 'click', function()
{
var A = new google.maps.LatLng(36.8628324142237, 10.1955485343641);
map1.setCenter(A);
map1.setZoom(13);
document.getElementById('gouvernement').value=17;
changeStateListMap();
changeLocalityListMap();
searchGouvernement(17);
});

controlDiv1.appendChild(prova);
}


}
</script>

ahmed_ellouze
02-04-2011, 03:54 PM
Voici la solution

ariana.setAttribute("coords","39,206,37,120");
ariana.setAttribute("shape","rect");

ahmed_ellouze
02-28-2011, 09:33 AM
Bonjour
J'ai besoin d'aide avec ce code sur IE7 est ce que personne a la solution????

var prova = document.createElement('DIV');
prova.id="prova";
prova.align="center";
controlDiv1.appendChild(prova);
var img = document.createElement('img');

img.id="tunisie";
//img.setAttribute("border","1");
img.useMap="#Map";
img.src="<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-tunisie.png";
prova.appendChild(img);

var mapz = document.createElement("Map");
mapz.name="Map";
prova.appendChild(mapz);

//img.appendChild(mapz);

var ariana = document.createElement('AREA');
mapz.appendChild(ariana);
//ariana.class="hasTip";
ariana.id='ariana';
ariana.title='<?php echo "ARIANA"; ?>';
ariana.coords='29,203,55,219';
ariana.shape='rect';
ariana.href='#';

google.maps.event.addDomListener(ariana, 'click', function()
{
var A = new google.maps.LatLng(36.8628324142237, 10.1955485343641);
map.setCenter(A);
map.setZoom(13);
document.getElementById('gouvernement').value=17;
changeStateListMap();
changeLocalityListMap();
searchGouvernement(17);

});
google.maps.event.addDomListener(ariana, 'mouseover', function()
{
var imm = "<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-ariana.png";
document.getElementById('tunisie').src = imm;
});
google.maps.event.addDomListener(ariana, 'mouseout', function()
{
var imm = "<?php echo JURI::root();?>modules/mod_prop_search_js/images/blu/tunisie-tunisie.png";

document.getElementById('tunisie').src = imm;
});

ahmed_ellouze
02-28-2011, 05:02 PM
Hello
so my problem and always with the version of IE 7. the problem and follows in principle if I pass my mouse over a region of an image of Map that will be called and replaced the original image. it works fine on Firefox. On IE 7 it does not work
:confused::confused:



<script language="javascript" type="text/javascript">
//<![CDATA[
/*****************************************************accendi**************************************************/
function accendi(regione) {


document.getElementById('tunisie').src = "http://192.168.1.7/azz/images/blu/tunisie-tunisie.png";
var imm = "http://192.168.1.7/azz/images/blu/tunisie-" + regione + ".png";
document.getElementById('tunisie').src = imm;
}
/*******************************************************spegni************************************************/
function spegni() {
document.getElementById('tunisie').src = "http://192.168.1.7/azz/images/blu/tunisie-tunisie.png";
}
/*****************************************************submitbutton**************************************************/
function getform1()
{
/* var prova = document.createElement('DIV');
prova.setAttribute("id","prova");
prova.setAttribute("align","center");
controlDiv1.appendChild(prova); */
var controlDiv1 = document.getElementById("controlDiv1");

var img = document.createElement('img');

img.id="tunisie";
img.setAttribute("border","0");
img.useMap="#Map";
img.src="http://192.168.1.7/azz/images/blu/tunisie-tunisie.png";
controlDiv1.appendChild(img);

var mapz = document.createElement("Map");
mapz.name="Map";
controlDiv1.appendChild(mapz);
//mapz.appendChild(img);
var area = document.createElement('area');
area.coords="29,203,55,219";
area.shape="rect";
area.id="ariana";
area.title="<?php echo 'ARIANA'?>";
area.onmouseover=function() {accendi('ariana') } ;
area.onfocus=function() {accendi('ariana') } ;
area.onmouseout=function() {spegni() } ;
mapz.appendChild(area);

}
//]]>
</script><html>
<BODY onLoad="getform1();">
<div id="controlDiv1"></div>
</body></html>