Retrieve the value of an image tag with document.selection.createRange

document.selection.createRange().htmlText

[megh]

Hi,
I have a rich text editor and I have a code which selects the HTML tags of the text. Specifically I hyperlink the selected text from the editor. I do this with document.selection.createRange().htmlText and than perform string functions on it.
Unfortunately I cant do this for an Image. Is there a way by which i can retrieve the HTML tag for an image?

Thanks.

[Purple Martin]

Untested, off the top of my head, string manipulation to parse out the first image tag from the text:

myText = myText.toLowerCase()
myStart = myText.indexOf("<img ",0)
myEnd = myText.indexOf(">",myStart)
myImgTag = myText.substring(myStart,myEnd)

[megh]

Thanks for replying again Martin. The problem that I am facing is to get till the stage of getting myText. You know how I get the selected text with objContent.DOM.selection.createrange.text I am unable to do the same when I click on an Image. What I figure from I have two problems then. Firstlyi cant get myText and secondly if i do manage to how will I know which one has the user clicked. I could work around the second problem by passing an ID or something onClick. But the first problem still remains. Thanks mate.

[Purple Martin]

Ah I think I understand the problem now.

I like your idea of using the onClick event to pass an argument. How about passing this?

onClick="myFunction(this)"

Your function will recieve a reference to whatever object was clicked as an argument. This will work for all objects, not just images. Now you can read the properties of the object:

myFunction(obj) {
alert(obj.src);
alert(obj.border);
alert(obj.alt);
}

You can now reconstruct a string for an HTML tag that has the same properties as the one that was clicked. The order of the attributes in your string may be different, but does that really matter?

I'd do it like that if I were you, but I'm now going to show how to take things a step further...

What if you want to make sure you don't miss any properties? It's possible to loop though every property for an object like this:

myFunction(obj) {
for (var prop in obj) {
str = str + prop + " = " + obj[prop] + "\n";
}
alert(str);
}

All I've done there is build a string listing the property name, and equals sign, and the property value. The "\n" adds a newline character. You can do whatever string building you like to build your HTML tag. Warning: there are a zillion properties you probably never knew existed, and many don't have valid attributes in HTML!

[megh]

Hi
I could not pass <b>this</b> as my function was a click on the toolbar or on the onContextMenu event. But what i did was to try your for(var in obj) statement and came up with numerous properties and methods and events. Out of which i got the attribute parentElement. This gave me the href attribute of the anchor tag that was surrounding the image. This is a mighty powerful property in such cases. I always had a feeling that i could use it only with thw window object.
Thanks a lot mate.

[Purple Martin]

Of course - you can use .parentElement.innerHTML to get the exact img tag! Wish I'd thought of that. Nice one.

:-D