I'm trying to do image replacement on a click event using the replaceWith function and a list of images. When I click the image disappears entirely and I get the error (in Firebug console window):

'Node cannot be inserted at the specified point in the hierarchy" code: "3

http://home/dev/planeticeland/js/jquery-1.3.2.min.js

Line 12'

Here's some code:

HTML:

<div id="sidebar-form">

<div class="img-wrapper">

<img alt="iceland" src="images/Iceland_map_main.png" usemap="#map"/>

</div>

<map name="map">

<area shape="circle" coords="50,93,7"

alt="Reykjavík Area" title="Reykjavík Area" nohref="nohref" />

JavaScript:

var maps = [];

maps['main'] = new Image();

...

maps['Reykjavík_Area'] = new Image();

...

for ( i in maps ) {

var map_name;

map_name = 'images/Iceland_map_'+i+'.png';

maps[i].src = map_name;

maps[i].useMap = '#map';

}

$(document).ready(function(){

var areas = $('area');

for ( var i=0; i<areas.length; i++ ) {

$(areas[i]).bind('mouseenter mouseleave click', mapHilight);

};

});

function mapHilight(event){

$('#sidebar-form .img-wrapper img:first').replaceWith( maps[place.replace(/ /, '_')] );

}

It works fine on the mouseenter and mouseleave events. The error message only occurs on the click event.

The following code works, but doesn't use jQuery functions:

var sidebar_form = document.getElementById('sidebar-form');

var img_wrapper;

var sidebar_divs = sidebar_form.getElementsByTagName('DIV');

for ( var i=0; i<sidebar_divs.length; i++ ) {

if (sidebar_divs[i].className == 'img-wrapper') {

img_wrapper = sidebar_divs[i];

break;

}

}

var mapImage = img_wrapper.getElementsByTagName('IMG')[0];

img_wrapper.removeChild(mapImage);

img_wrapper.appendChild( maps[place.replace(/ /, '_')] );

It identifies the containing element and the image, removes the image, than appends the replacement image. Isn't that pretty much what the replaceWith function is supposed to do?