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.

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:

Code:

<!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:

Code:

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

or:

Code:

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:

Code:

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/explo...name-radio-dom

**newshound** · 07-31-2008, 10:36 AM

Originally Posted by jscheuer1

I decided to try writing the generated source of the working map in FF 3 to IE 7 and that worked in both browsers:

Code:

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

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

Code:

<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

Code:

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

Code:

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

Code:

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

Thread: Dynamically created image + dynamically created area map...

Thread Tools

Search Thread

Dynamically created image + dynamically created area map...

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions