Code not updating correctly when href and alt text is added before coords

[GoogleCodeExporter]

What steps will reproduce the problem?
1. goto http://www.maschek.hu/imagemap/imgmap
2. add one area using the plus icon
3. add one area using the plus icon
4. Set the href and alt text BEFORE you set the area.
5. The href and alt text is NOT reflected in the code output.

What is the expected output? What do you see instead?
I would expect to see the href and alt text I set in the code area

What version of the product are you using? On what browser/operating system?
http://www.maschek.hu/imagemap/imgmap
firefox 3.6.13

Please provide any additional information below.

Original issue reported on code.google.com by mastaski...@gmail.com on 2 Feb 2011 at 4:39

• Blocking: #49

[GoogleCodeExporter]

Original comment by adam.mas...@gmail.com on 27 May 2011 at 5:33

• Changed state: Accepted
• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Original comment by adam.mas...@gmail.com on 27 May 2011 at 5:38

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

Issue 49 has been merged into this issue.

Original comment by adam.mas...@gmail.com on 27 May 2011 at 5:39

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

I just made a workaround.

imagemap.js

imgmap.prototype.initArea = function(id, shape) {

    //console.log("init Area")

    if (!this.areas[id]) {return false;}//if all was erased, return
    //remove preinited dummy div or already placed canvas
    if (this.areas[id].parentNode) {this.areas[id].parentNode.removeChild(this.areas[id]);}
    if (this.areas[id].label) {this.areas[id].label.parentNode.removeChild(this.areas[id].label);}

    var tempHref   = this.areas[id].ahref;
    var tempDesc   = this.areas[id].aalt;
    var tempTarget = this.areas[id].atarget;

    if (tempHref == null ) {
        tempHref = '';
    }

    if (tempDesc == null ) {
        tempDesc = '';
    }

    if (tempTarget == null ) {
        tempTarget = '';
    }

    this.areas[id] = null;
    //create CANVAS node
    this.areas[id] = document.createElement('CANVAS');
    this.pic_container.appendChild(this.areas[id]);
    this.pic_container.style.position = 'relative';
    //alert('init' + typeof G_vmlCanvasManager);
    if (typeof G_vmlCanvasManager != "undefined") {
        //override CANVAS with VML object
        this.areas[id] = G_vmlCanvasManager.initElement(this.areas[id]);
        //this.areas[id] = this.pic.parentNode.lastChild;
    }
    this.areas[id].id        = this.mapname + 'area' + id;
    this.areas[id].aid       = id;
    this.areas[id].shape     = shape;
    this.areas[id].ahref     = tempHref;
    this.areas[id].atitle    = tempDesc;
    this.areas[id].aalt      = tempDesc;
    this.areas[id].atarget   = tempTarget; // '_self';
    this.areas[id].style.position = 'absolute';
    this.areas[id].style.top      = this.pic.offsetTop  + 'px';
    this.areas[id].style.left     = this.pic.offsetLeft + 'px';
    this._setopacity(this.areas[id], this.config.CL_DRAW_BG, this.config.draw_opacity);
    //hook event handlers
    this.areas[id].ondblclick  = this.area_dblclick.bind(this);
    this.areas[id].onmousedown = this.area_mousedown.bind(this);
    this.areas[id].onmouseup   = this.area_mouseup.bind(this);
    this.areas[id].onmousemove = this.area_mousemove.bind(this);
    this.areas[id].onmouseover = this.area_mouseover.bind(this);
    this.areas[id].onmouseout  = this.area_mouseout.bind(this);
    //initialize memory object
    this.memory[id] = {};
    this.memory[id].downx   = 0;
    this.memory[id].downy   = 0;
    this.memory[id].left    = 0;
    this.memory[id].top     = 0;
    this.memory[id].width   = 0;
    this.memory[id].height  = 0;
    this.memory[id].xpoints = [];
    this.memory[id].ypoints = [];
    //create label node
    this.areas[id].label = document.createElement('DIV');
    this.pic_container.appendChild(this.areas[id].label);
    this.areas[id].label.className      = this.config.label_class;
    this.assignCSS(this.areas[id].label,  this.config.label_style);
    this.areas[id].label.style.position = 'absolute';
};

default_interface.js

updated gui_addArea: Changed change to keyup
myimgmap.addEvent(props[id].getElementsByTagName('input')[3],  'keyup', 
gui_input_change);
    myimgmap.addEvent(props[id].getElementsByTagName('input')[4],  'keyup', gui_input_change);

function gui_addArea(id) {

    //var id = props.length;
    //id = 1;
    props[id] = document.createElement('DIV');
    document.getElementById('form_container').appendChild(props[id]);

    props[id].id        = 'img_area_' + id;
    props[id].aid       = id;
    props[id].className = 'img_area';
    //hook ROW event handlers
    myimgmap.addEvent(props[id], 'mouseover', gui_row_mouseover);
    myimgmap.addEvent(props[id], 'mouseout',  gui_row_mouseout);
    myimgmap.addEvent(props[id], 'click',     gui_row_click);
    var temp = '<input type="text"  name="img_id" class="img_id" value="' + id + '" readonly="1"/>';
    //temp+= '<input type="checkbox" name="img_active" class="img_active" id="img_active_'+id+'" value="'+id+'">';
    //could be checkbox in the future
    temp+= '<input type="radio" name="img_active" class="img_active" id="img_active_'+id+'" value="'+id+'">';
    temp+= '<select name="img_shape" class="img_shape" style="border:1px solid #A5ACB2;">';
    temp+= '<option value="rect">rectangle</option>';
    if (document.getElementById('dd_output').value != 'css') {
        temp+= '<option value="circle">circle</option>';
        temp+= '<option value="poly">polygon</option>';
        temp+= '<option value="bezier1">bezier</option>';
    }
    temp+= '</select>';
    //temp+= 'Coords: <input type="text" name="img_coords" class="img_coords"  value="">';
    temp+= '<input type="hidden" name="img_coords"  value="">';
    temp+= ' URL: <input type="text" name="img_href" class="img_href" style="border:1px solid #A5ACB2;" value="">';
    temp+= ' Description: <input type="text" name="img_alt" class="img_alt" style="border:1px solid #A5ACB2;" value="">';
    temp+= ' Target: <select name="img_target" class="img_target" style="border:1px solid #A5ACB2;">';
    temp+= '<option value=""  ><not set></option>';
    temp+= '<option value="_self"  >this window</option>';
    temp+= '<option value="_blank" >new window</option>';
    //temp+= '<option value="_top"   >top window</option>';
    temp+= '</select>';
    props[id].innerHTML = temp;
    //hook more event handlers to individual inputs

    myimgmap.addEvent(props[id].getElementsByTagName('input')[1],  'keydown', gui_cb_keydown);
    myimgmap.addEvent(props[id].getElementsByTagName('input')[2],  'keydown', gui_coords_keydown);
    myimgmap.addEvent(props[id].getElementsByTagName('input')[2],  'change', gui_input_change);
    myimgmap.addEvent(props[id].getElementsByTagName('input')[3],  'keyup', gui_input_change);
    myimgmap.addEvent(props[id].getElementsByTagName('input')[4],  'keyup', gui_input_change);
    myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_input_change);
    myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_input_change);
    if (myimgmap.isSafari) {
        //need these for safari
        myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_row_click);
        myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_row_click);
    }
    //set shape as nextshape if set
    if (myimgmap.nextShape) {props[id].getElementsByTagName('select')[0].value = myimgmap.nextShape;}
    //alert(this.props[id].parentNode.innerHTML);
    gui_row_select(id, true);
}

Original comment by Daniel.P...@gmail.com on 27 Jun 2012 at 8:52

• Added labels: ****
• Removed labels: ****