selecting an image in all browsers

At work, we started using Epoz with out Plone sites, and really like its flexibility. However, we have been unable to figure out one thing, and I was hoping someon had some insight into whether it was possible or not. We'd like to write a javascript function where you can highlight an image, click on an Epoz button, pop up a window where you select a sound file that the selected image will point to, and return code to form a javascript function call around the image.

So you start with this highlighted: <img src="image.jpg">

And end up with this: <a href="javascriptopSound('sound_file.html','Title','50' ,'50');"><img src="image.jpg"></a>

I've gotten it to work with IE, but with all other browsers I lose the image. Is that just not selectable? I've tried many variations and searched the web for solution to no avail.

Thanks for any help or hints,
Eric

Here is our current function:

// Creates a Javascript popup link

function CreatePopUpLink(URL, title, width, height) {

EpozElement.contentWindow.focus();

if (browser.isIE5up) {
selection = EpozElement.contentWindow.document.selection;
} else {

selection = EpozElement.contentWindow.window.getSelection();
}

// the function called here must be defined or referenced from the page that the link is one
startTag = "a href=\"javascriptopSound('" + URL + "','" + title + "','" + width + "','" + height + "');\"";

if (browser.isIE5up) {

range = selection.createRange();
var result = '<' + startTag + '>' + range.htmlText + '</a>';

try {
range.pasteHTML(result);
} catch (e) {
// catch error when range is evil for IE
}
} else {
var result = '<' + startTag + '>' + selection + '</a>';

EpozElement.contentWindow.focus();
if (selection) {
range = selection.getRangeAt(0);
} else {
range = EpozElement.contentWindow.document.createRange();
}

var fragment = EpozElement.contentWindow.document.createDocumentF ragment();

// ** ADD NEW ELEMENT
var div = EpozElement.contentWindow.document.createElement(' a');
div.innerHTML = result;

while (div.firstChild) {
fragment.appendChild(div.firstChild);
}

selection.removeAllRanges();
range.deleteContents(); // why would you delete the selected content?

var node = range.startContainer;
var pos = range.startOffset;

//Returns a code representing the type of the underlying node
switch (node.nodeType) {
case 3: //TEXT_NODE = 3;
if (fragment.nodeType == 3) {
node.insertData(pos, fragment.data);
range.setEnd(node, pos + fragment.length);
range.setStart(node, pos + fragment.length);
} else {
node = node.splitText(pos);
node.parentNode.insertBefore(fragment, node);
range.setEnd(node, pos + fragment.length);
range.setStart(node, pos + fragment.length);
}
break;

case 1: //ELEMENT_NODE = 1;
node = node.childNodes[pos];
node.parentNode.insertBefore(fragment, node);
range.setEnd(node, pos + fragment.length);
range.setStart(node, pos + fragment.length);
break;
default:
break;
}
selection.addRange(range);
}
}

hello, if you wanted to do this, the way i have done it b4 is by puting the image in a <div id="pic"><img src="hi.gif"></img></div>
now when they want to update the link, use this...
var orig=pic.innerHTML;
pic.innerHTML='<A HREF="'+linksrcORfunction+'">'+orig+'</a>

good luck,
the code above may create an error but the main idea is the
object.innerHTML

that will work

colton22