SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem creating an image map using the DOM

    Hello all,

    Problem: IE seems not to behave properly when I write all the code needed for the image map on the fly using the DOM.

    I am working on creating an image map dynamically, which is going to be visible only when javascript is enabled. Therefore, I want to write all the xhtml code that is neccesary for the image map on the fly using the DOM(create the image, the map and the areas elements). So far, it works on FF and on Safari for windows. When I mouse over on the map in the latter browsers, the image map behaves as expected, i.e: cursor changes to hand. However, IE doesn't behave that way and i cant see why it is failing. Now, the weird thing is that if i copy the rendered code and create and html file and open it in a browser it works just fine on IE (!!!).

    Here is a link where you can see it in action
    [/url]http://aspspider.net/xesus/imagemap/domimagemap.html[url]

    and here is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <!--link href="styles/imagemap.css" type="text/css" media="all" rel=stylesheet /-->
    <style type="text/css" media="all">
    .imageMap {background: url(http://localhost/php/images/imagemap/smaller_maps/greyMap_small.gif) top left no-repeat!important; border:1px solid #000;}


    </style>
    <script language="javascript" type="text/javascript">
    //object class
    function energyRegion(regionId, regionCities, savings, imageMapDetails){
    this.regionId = regionId;
    this.regionCities = regionCities;
    this.savings = savings;
    this.shape = imageMapDetails[0];
    this.coords = imageMapDetails[1];
    this.href = imageMapDetails[2];
    }
    //create energyRegions array
    var energyRegions = new Array();

    //create and populate energyRegions arrays
    energyRegions[0]= new energyRegion('london',['London','Bromley','Ilford','Beckenham','Sidcup'],250,['poly','104,185,107,192,113,191,117,187,106,185','#']);
    energyRegions[1]= new energyRegion('seaboard',['Brighton','Maidstone','Worthing','Ashford','Woking'],275,['poly','99,186,98,189,97,191,96,195,98,198,95,202, 96,205,100,205,106,204,111,205,118,202,121,201,129,197,128,195,132,189,127,187,123,187,120,188,120,187,113,192,106,194, 105,189,100,184,101,185','#']);
    energyRegions[2]= new energyRegion('southern',['Reading','Southampton','Swindon','Bournemouth','Basingstoke'],235,['poly','85,174,81,175,78,178,74,181,73,185,74,191,71,195,70,198,71,201,68,205,69,207,70,209,76,209,80,205,82,206,88,212,90,208,91,204,94,205,96,202,97,198,97,193,97,190,101,187,101,183,97,182,93,179,89,177,84,174','#']);
    energyRegions[3]= new energyRegion('sweb',['Bristol','Plymouth','Exeter','Weston-super-Mare','Bath'],215,['poly','65,182,58,189,57,192,57,192,42,192,38,194,38,197,34,197,33,200,32,203,28,207,24,208,25,211,19,216,15,217,14,220,17,221,21,220,21,224,25,222,30,218,33,217,37,213,41,215,46,218,54,215,52,212,56,207,61,206,66,210,68,205,68,201,67,197,74,191,72,183,64,183','#']);
    energyRegions[4]= new energyRegion('swalec',['Cardiff','Swansea','Newport','Bridgend','Barry'],325,['poly','51,160,47,162,42,163,38,167,30,171,24,173,25,179,29,182,34,180,38,181,38,184,42,184,45,183,49,188,56,188,62,184,65,179,57,173,55,169,55,165,52,160','#']);
    energyRegions[5]= new energyRegion('midlands',['Birmingham','Solihull','Stoke-on-Trent','Wolverhampton','Sutton Coldfield'],300,['poly','74,141,65,146,64,151,59,151,55,155,54,160,57,164,56,171,61,174,67,179,65,181,69,182,72,182,75,179,79,175,85,173,80,168,80,163,81,157,74,141','#']);
    energyRegions[6]= new energyRegion('eastmidlands',['Nottingham','Leicester','Derby','Coventry','Northampton'],260,['poly','77,140,79,150,83,156,83,163,82,168,91,176,95,170,99,162,98,158,104,155,109,150,111,144,108,139,101,139,95,139,91,136,86,138,77,139','#']);
    energyRegions[7]= new energyRegion('eastern',['Norwich','Colchester','Peterborough','Chelmsford'],350,['poly','113,145,108,153,100,156,98,158,99,160,99,163,91,176,102,183,105,184,119,186,124,177,129,173,132,167,133,162,132,152,125,146,113,145','#']);
    energyRegions[8]= new energyRegion('manweb',['Liverpool','Warrington','Wirral','Chester','Wrexham'],220,['poly','39,134,38,139,40,142,43,143,35,150,38,154,41,150,42,152,44,154,44,163,48,162,52,161,54,160,55,158,55,155,58,152,64,151,65,146,69,145,69,142,67,139,63,136,60,134,59,138,58,140,54,141,49,141,42,136','#']);
    energyRegions[9]= new energyRegion('norweb',['Manchester','Preston','Wigan','Stockport','Oldham'],195,['poly','63,92,63,94,56,98,53,103,53,109,58,118,62,117,62,120,60,123,61,127,60,131,64,134,68,139,69,139,73,139,74,136,72,132,71,129,70,124,69,119,71,114,72,107,68,102,69,97,67,97,68,94','#']);
    energyRegions[10]= new energyRegion('yorkshire',['Leeds','Sheffield','Hull','Bradford','Huddersfield'],215,['poly','100,118,92,126,85,126,70,120,72,127,76,139,82,137,87,139,92,136,98,138,109,137,105,128,101,120','#']);
    energyRegions[11]= new energyRegion('northern',['Newcastle upon Tyne','York','Sunderland','Stockton-on-Tees','Middlesbrough'],180,['poly','77,79,66,91,66,94,69,95,68,99,70,99,70,103,73,109,73,116,71,119,74,121,77,122,80,124,82,126,83,125,87,125,91,126,99,118,99,113,94,111,89,107,86,102,83,94,77,79,77,79,111,145','#']);
    energyRegions[12]= new energyRegion('scottishPower',['Glasgow','Edinburgh','Dunfermline','Kilmarnock','Livingston'],160,['poly','63,59,58,59,55,66,49,65,44,69,39,69,36,66,34,68,34,79,36,82,27,100,34,103,34,100,39,103,42,101,47,103,64,92,65,88,80,76,64,69,59,71,66,64,63,59','#']);
    energyRegions[13]= new energyRegion('scottishHydro',['Aberdeen','Dundee','Perth','Inverness','Peterhead'],180,['poly','33,4,29,21,22,22,21,32,23,37,17,36,17,29,13,27,10,30,8,33,6,28,13,20,16,12,16,7,9,11,5,14,5,19,6,22,2,26,1,33,3,36,7,30,10,35,13,37,16,40,19,42,22,40,20,47,17,47,13,41,11,44,3,60,15,50,14,54,16,58,12,60,14,62,18,61,21,61,23,65,19,65,11,73,14,78,19,68,21,68,21,72,19,78,22,87,24,80,28,82,30,78,26,72,26,69,30,73,34,65,34,64,37,67,43,70,46,65,51,65,53,64,58,60,56,58,66,59,72,45,78,35,75,27,68,27,61,27,54,27,49,28,45,29,44,27,49,24,45,23,45,21,62,10,59,5,55,3,51,5,45,5,41,5,33,3','#']);

    //create on the fly the image, the cities for each region and the areas for the map
    function createCities() {

    var bodyElement, divCitiesHolder, divCities, h2, ul, li, divId, map, area;
    var imageMapContainer, divImageHolder, image, el;
    bodyElement = document.getElementsByTagName('body')[0];
    divCitiesHolder = document.createElement('div');
    divCitiesHolder.setAttribute('id','displaycities');
    map = document.createElement('map');
    map.setAttribute('name', 'map');
    map.setAttribute('id', 'map');

    //reference to the parent element
    imageMapContainer = document.getElementById('imageMapContainer');

    //create the image holder
    divImageHolder = document.createElement('div');
    divImageHolder.setAttribute('id', 'image');
    image = document.createElement('img');
    image.setAttribute('src','../images/imagemap/spacer.gif');
    image.setAttribute('alt','Energy regions');
    image.setAttribute('width','137');
    image.setAttribute('height','228');
    image.setAttribute('usemap','#map');
    image.className='imageMap';
    image.setAttribute('id','imageMap');
    //the following line of code is needed in order to get IE to display the background image, IE it is not picking up the style
    //in .imageMap
    //image.style.background = 'url(http://10.41.44.160/php/images/imagemap/smaller_maps/greyMap_small.gif) left top no-repeat';

    //Append image to the divImageHolder element
    divImageHolder.appendChild(image);

    //append the divImageHolder before the options element
    el = document.getElementById('options');
    imageMapContainer.insertBefore(divImageHolder, el)

    //loop through the object to pull info out.
    for(var i=0;i<energyRegions.length; i++) {
    divCities = document.createElement('div');
    divId = energyRegions[i].regionId +'Cities';
    divCities.setAttribute('id',divId);
    ul = document.createElement('ul');
    h2 = document.createElement('h2');
    h2TextNode = document.createTextNode('Save up to ' + energyRegions[i].savings);
    h2.appendChild(h2TextNode);

    for(var j=0; j<energyRegions[i].regionCities.length; j++){
    li = document.createElement('li');
    liTextNode= document.createTextNode(energyRegions[i].regionCities[j]);
    li.appendChild(liTextNode);
    ul.appendChild(li);
    }
    divCities.appendChild(h2);
    divCities.appendChild(ul);
    divCitiesHolder.appendChild(divCities);
    bodyElement.appendChild(divCitiesHolder);

    //create the areas for the image map
    area = document.createElement('area');
    area.setAttribute('id', energyRegions[i].regionId);
    area.setAttribute('shape',energyRegions[i].shape);
    area.setAttribute('coords',energyRegions[i].coords);
    area.setAttribute('href',energyRegions[i].href);

    //append the areas to the map element
    map.appendChild(area);

    }
    //appande map to the body
    var imageMap = document.getElementById('image');
    imageMap.appendChild(map);
    bodyElement.appendChild(map);

    }
    function addEvent(elm, evType, fn, useCapture)
    // cross-browser event handling for IE5+, NS6+ and Mozilla
    // By Scott Andrew
    {
    if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
    } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
    } else {
    elm['on' + evType] = fn;
    }
    }

    addEvent(window, 'load', createCities, false);
    </script>
    </head>

    <body>

    <div id="containerHolder">
    <div id="container">
    <div id="imageMapHolder">
    <h2>Please fill in your details</h2>
    <div id="accessible">
    <label for="postcode">Please enter your postcode /label>
    <input type="text" id="postcode" value="Enter your postcode" />
    </div>
    <div id="imageMapContainer">
    <!--<div id="image">
    <img src="../images/imagemap/spacer.gif" alt="uk" border="0" width="137" height="228" usemap="#map" class="imageMap" id="imageMap" />-->
    <div id="options">

    <p>How many bedrooms do you have?</p>
    <fieldset id="numberBedrooms">
    <label for="bedrooms">1</label>
    <input type="radio" name="bedrooms" value="1" />
    <label for="bedrooms">2</label>
    <input type="radio" name="bedrooms" value="2" />
    <label for="bedrooms">3</label>
    <input type="radio" name="bedrooms" value="3" />
    <label for="bedrooms">4</label>
    <input type="radio" name="bedrooms" value="4" />
    </fieldset>
    <p>Number of people?</p>
    <fieldset id="numberPeople">
    <label for="people">1</label>
    <input type="radio" name="people" value="1" />
    <label for="people">2</label>
    <input type="radio" name="people" value="2" />
    <label for="people">3</label>
    <input type="radio" name="people" value="3" />
    <label for="people">4</label>
    <input type="radio" name="people" value="4" />
    </fieldset>
    <fieldset id="submit">
    <p>Get best deals!</p>
    <input type="submit" value="Search" />
    </fieldset>
    </div>
    </div>

    <br style="clear:both;" />
    </div>
    </div>
    </div>

    </body>
    </html>


    Suggestion are more than welcome!

    Thanks for your time.

    Xesus

  2. #2
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry forgot to put the brackets to format the code properly. Here it is.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <!--link href="styles/imagemap.css" type="text/css" media="all" rel=stylesheet /-->
    <style type="text/css" media="all">
    .imageMap {background: url(http://localhost/php/images/imagemap/smaller_maps/greyMap_small.gif) top left no-repeat!important; border:1px solid #000;}
    
    
    </style>
    <script language="javascript" type="text/javascript">
    //object class
    function energyRegion(regionId, regionCities, savings, imageMapDetails){
    this.regionId = regionId;
    this.regionCities = regionCities;
    this.savings = savings;
    this.shape = imageMapDetails[0];
    this.coords = imageMapDetails[1];
    this.href = imageMapDetails[2]; 
    }
    //create energyRegions array
    var energyRegions = new Array();
    
    //create and populate energyRegions arrays
    energyRegions[0]= new energyRegion('london',['London','Bromley','Ilford','Beckenham','Sidcup'],250,['poly','104,185,107,192,113,191,117,187,106,185','#']);
    energyRegions[1]= new energyRegion('seaboard',['Brighton','Maidstone','Worthing','Ashford','Woking'],275,['poly','99,186,98,189,97,191,96,195,98,198,95,202, 96,205,100,205,106,204,111,205,118,202,121,201,129,197,128,195,132,189,127,187 ,123,187,120,188,120,187,113,192,106,194, 105,189,100,184,101,185','#']);
    energyRegions[2]= new energyRegion('southern',['Reading','Southampton','Swindon','Bournemouth','Basingstoke'],235,['poly','85,174,81,175,78,178,74,181,73,185,74,191,71,195,70,198,71,201,68,205, 69,207,70,209,76,209,80,205,82,206,88,212,90,208,91,204,94,205,96,202,97,198,9 7,193,97,190,101,187,101,183,97,182,93,179,89,177,84,174','#']);
    energyRegions[3]= new energyRegion('sweb',['Bristol','Plymouth','Exeter','Weston-super-Mare','Bath'],215,['poly','65,182,58,189,57,192,57,192,42,192,38,194,38,197,34,197,33,200,32,203, 28,207,24,208,25,211,19,216,15,217,14,220,17,221,21,220,21,224,25,222,30,218,3 3,217,37,213,41,215,46,218,54,215,52,212,56,207,61,206,66,210,68,205,68,201,67 ,197,74,191,72,183,64,183','#']);
    energyRegions[4]= new energyRegion('swalec',['Cardiff','Swansea','Newport','Bridgend','Barry'],325,['poly','51,160,47,162,42,163,38,167,30,171,24,173,25,179,29,182,34,180,38,181, 38,184,42,184,45,183,49,188,56,188,62,184,65,179,57,173,55,169,55,165,52,160', '#']);
    energyRegions[5]= new energyRegion('midlands',['Birmingham','Solihull','Stoke-on-Trent','Wolverhampton','Sutton Coldfield'],300,['poly','74,141,65,146,64,151,59,151,55,155,54,160,57,164,56,171,61,174,67,179, 65,181,69,182,72,182,75,179,79,175,85,173,80,168,80,163,81,157,74,141','#']);
    energyRegions[6]= new energyRegion('eastmidlands',['Nottingham','Leicester','Derby','Coventry','Northampton'],260,['poly','77,140,79,150,83,156,83,163,82,168,91,176,95,170,99,162,98,158,104,155 ,109,150,111,144,108,139,101,139,95,139,91,136,86,138,77,139','#']);
    energyRegions[7]= new energyRegion('eastern',['Norwich','Colchester','Peterborough','Chelmsford'],350,['poly','113,145,108,153,100,156,98,158,99,160,99,163,91,176,102,183,105,184,11 9,186,124,177,129,173,132,167,133,162,132,152,125,146,113,145','#']);
    energyRegions[8]= new energyRegion('manweb',['Liverpool','Warrington','Wirral','Chester','Wrexham'],220,['poly','39,134,38,139,40,142,43,143,35,150,38,154,41,150,42,152,44,154,44,163, 48,162,52,161,54,160,55,158,55,155,58,152,64,151,65,146,69,145,69,142,67,139,6 3,136,60,134,59,138,58,140,54,141,49,141,42,136','#']);
    energyRegions[9]= new energyRegion('norweb',['Manchester','Preston','Wigan','Stockport','Oldham'],195,['poly','63,92,63,94,56,98,53,103,53,109,58,118,62,117,62,120,60,123,61,127,60, 131,64,134,68,139,69,139,73,139,74,136,72,132,71,129,70,124,69,119,71,114,72,1 07,68,102,69,97,67,97,68,94','#']);
    energyRegions[10]= new energyRegion('yorkshire',['Leeds','Sheffield','Hull','Bradford','Huddersfield'],215,['poly','100,118,92,126,85,126,70,120,72,127,76,139,82,137,87,139,92,136,98,138 ,109,137,105,128,101,120','#']);
    energyRegions[11]= new energyRegion('northern',['Newcastle upon Tyne','York','Sunderland','Stockton-on-Tees','Middlesbrough'],180,['poly','77,79,66,91,66,94,69,95,68,99,70,99,70,103,73,109,73,116,71,119,74,121 ,77,122,80,124,82,126,83,125,87,125,91,126,99,118,99,113,94,111,89,107,86,102, 83,94,77,79,77,79,111,145','#']);
    energyRegions[12]= new energyRegion('scottishPower',['Glasgow','Edinburgh','Dunfermline','Kilmarnock','Livingston'],160,['poly','63,59,58,59,55,66,49,65,44,69,39,69,36,66,34,68,34,79,36,82,27,100,34, 103,34,100,39,103,42,101,47,103,64,92,65,88,80,76,64,69,59,71,66,64,63,59','#']);
    energyRegions[13]= new energyRegion('scottishHydro',['Aberdeen','Dundee','Perth','Inverness','Peterhead'],180,['poly','33,4,29,21,22,22,21,32,23,37,17,36,17,29,13,27,10,30,8,33,6,28,13,20,1 6,12,16,7,9,11,5,14,5,19,6,22,2,26,1,33,3,36,7,30,10,35,13,37,16,40,19,42,22,4 0,20,47,17,47,13,41,11,44,3,60,15,50,14,54,16,58,12,60,14,62,18,61,21,61,23,65 ,19,65,11,73,14,78,19,68,21,68,21,72,19,78,22,87,24,80,28,82,30,78,26,72,26,69 ,30,73,34,65,34,64,37,67,43,70,46,65,51,65,53,64,58,60,56,58,66,59,72,45,78,35 ,75,27,68,27,61,27,54,27,49,28,45,29,44,27,49,24,45,23,45,21,62,10,59,5,55,3,5 1,5,45,5,41,5,33,3','#']);
    
    //create on the fly the image, the cities for each region and the areas for the map
    function createCities() {
    
    var bodyElement, divCitiesHolder, divCities, h2, ul, li, divId, map, area;
    var imageMapContainer, divImageHolder, image, el;
    bodyElement = document.getElementsByTagName('body')[0];
    divCitiesHolder = document.createElement('div');
    divCitiesHolder.setAttribute('id','displaycities');
    map = document.createElement('map');
    map.setAttribute('name', 'map');
    map.setAttribute('id', 'map');
    
    //reference to the parent element
    imageMapContainer = document.getElementById('imageMapContainer');
    
    //create the image holder
    divImageHolder = document.createElement('div');
    divImageHolder.setAttribute('id', 'image');
    image = document.createElement('img');
    image.setAttribute('src','../images/imagemap/spacer.gif');
    image.setAttribute('alt','Energy regions');
    image.setAttribute('width','137');
    image.setAttribute('height','228');
    image.setAttribute('usemap','#map');
    image.className='imageMap';
    image.setAttribute('id','imageMap');
    //the following line of code is needed in order to get IE to display the background image, IE it is not picking up the style
    //in .imageMap
    //image.style.background = 'url(http://10.41.44.160/php/images/imagemap/smaller_maps/greyMap_small.gif) left top no-repeat';
    
    //Append image to the divImageHolder element
    divImageHolder.appendChild(image);
    
    //append the divImageHolder before the options element
    el = document.getElementById('options');
    imageMapContainer.insertBefore(divImageHolder, el)
    
    //loop through the object to pull info out.
    for(var i=0;i<energyRegions.length; i++) {
    divCities = document.createElement('div');
    divId = energyRegions[i].regionId +'Cities';
    divCities.setAttribute('id',divId);
    ul = document.createElement('ul');
    h2 = document.createElement('h2');
    h2TextNode = document.createTextNode('Save up to ' + energyRegions[i].savings);
    h2.appendChild(h2TextNode);
    
    for(var j=0; j<energyRegions[i].regionCities.length; j++){
    li = document.createElement('li'); 
    liTextNode= document.createTextNode(energyRegions[i].regionCities[j]);
    li.appendChild(liTextNode);
    ul.appendChild(li);
    }
    divCities.appendChild(h2);
    divCities.appendChild(ul);
    divCitiesHolder.appendChild(divCities);
    bodyElement.appendChild(divCitiesHolder);
    
    //create the areas for the image map
    area = document.createElement('area');
    area.setAttribute('id', energyRegions[i].regionId);
    area.setAttribute('shape',energyRegions[i].shape);
    area.setAttribute('coords',energyRegions[i].coords);
    area.setAttribute('href',energyRegions[i].href);
    
    //append the areas to the map element
    map.appendChild(area);
    
    }
    //appande map to the body
    var imageMap = document.getElementById('image');
    imageMap.appendChild(map);
    bodyElement.appendChild(map);
    
    }
    function addEvent(elm, evType, fn, useCapture)
    // cross-browser event handling for IE5+, NS6+ and Mozilla
    // By Scott Andrew
    {
    if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
    } else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
    } else {
    elm['on' + evType] = fn;
    }
    }
    
    addEvent(window, 'load', createCities, false);
    </script>
    </head>
    
    <body>
    
    <div id="containerHolder">
    <div id="container">
    <div id="imageMapHolder">
    <h2>Please fill in your details</h2>
    <div id="accessible">
    <label for="postcode">Please enter your postcode /label>
    <input type="text" id="postcode" value="Enter your postcode" />
    </div>
    <div id="imageMapContainer">
    <!--<div id="image">
    <img src="../images/imagemap/spacer.gif" alt="uk" border="0" width="137" height="228" usemap="#map" class="imageMap" id="imageMap" />-->
    <div id="options">
    
    <p>How many bedrooms do you have?</p>
    <fieldset id="numberBedrooms">
    <label for="bedrooms">1</label>
    <input type="radio" name="bedrooms" value="1" />
    <label for="bedrooms">2</label>
    <input type="radio" name="bedrooms" value="2" />
    <label for="bedrooms">3</label>
    <input type="radio" name="bedrooms" value="3" />
    <label for="bedrooms">4</label>
    <input type="radio" name="bedrooms" value="4" />
    </fieldset>
    <p>Number of people?</p>
    <fieldset id="numberPeople">
    <label for="people">1</label>
    <input type="radio" name="people" value="1" />
    <label for="people">2</label>
    <input type="radio" name="people" value="2" />
    <label for="people">3</label>
    <input type="radio" name="people" value="3" />
    <label for="people">4</label>
    <input type="radio" name="people" value="4" />
    </fieldset>
    <fieldset id="submit">
    <p>Get best deals!</p>
    <input type="submit" value="Search" />
    </fieldset>
    </div>
    </div>
    
    <br style="clear:both;" />
    </div>
    </div>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solution Found

    Here is the solution:

    "E wants us to spell usemap as useMap... Rather annoying, but this should work for IE:

    element.setattribute("useMap", "#close");

    Or, add a third parameter, which defines case-sensitivity (default is 1, case-sensitive):

    element.setattribute("usemap", "#close", 0);"


    I found it in this post.

    http://www.webmasterworld.com/html/3142618.htm

    Thanks

    Xesus

  4. #4
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    useMap does NOT work in IE7 in conjunction with image maps/areas.

    I found various statements on the web that IE7 is buggy in this respect and I did not succeed in getting my own code to run in IE7. Same code works in IE8 and, of course, in FF 3.x.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Anyone who wants to test usemap with different browsers, http://www.w3schools.com/TAGS/tryit....ryhtml_areamap provides a useful testing page for you to try different things out.

    It seems to work on IE8 in IE7 compatibility mode
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Frank Berger View Post
    useMap does NOT work in IE7 in conjunction with image maps/areas.
    I have to correct my statement. One can get it working after circumventing the many bugs that IE7 has.

    One trick is to add the map with this hack:

    Code:
    document.createElement('<map name="someMapName">')
    That was for me the only way get give the map a name. All the others don't work in buggy IE7.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Frank Berger View Post
    I have to correct my statement. One can get it working after circumventing the many bugs that IE7 has.

    One trick is to add the map with this hack:

    Code:
    document.createElement('<map name="someMapName">')
    That was for me the only way get give the map a name. All the others don't work in buggy IE7.
    Hey, here's an idea. How about using the object tag for the image map, instead. The HTML specs show it being used instead of an image, so I guess that IE in this one very rare case are playing strictly by the book for the object tag.

    W3C HTML4: Client-side image map examples

    Code html4strict:
    <HTML>
       <HEAD>
          <TITLE>The cool site!</TITLE>
       </HEAD>
       <BODY>
         <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
         <MAP name="map1">
           <P>Navigate the site:
           <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
           <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
           <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
           <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
         </MAP>
         </OBJECT>
       </BODY>
    </HTML>

    Now you won't need those ugly work-arounds.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True is what works - and my hack does work well.

    No time to test your proposal as a couple of more IE perversities are waiting to be solved.

    The M$ managers in charge who do this to us should be sent to Gitmo...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    But, the object element for image maps is what the W3C specs say should be used.
    It's what works across all browsers.
    It doesn't need JavaScript hacks!

    When you have the time, revisit this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •