I am trying to create drag handles to any double clicked element. I was able to add drag handles to all four corners of a clicked DIV element but not the IMG element on my page. I first suspected that the handles failed to be added to the IMG element because the IMG element is an inline element but the handles are block elements. Thus I tried making the IMG element an inline-block element but that didn’t work. I then tried making the IMG element a block element and that too failed to add drag handles to the IMG element. Please see my code here.
appendChild to something that isnt a container. (Well, you can, but it doesnt render anything, because an img isnt a logical container)
The handles appear with the
<img> element in Firefox.
I think that’s because the image source is missing and then it is no longer a replaced element.
You can use :before and :after on images that have no image source but not when the source is present. Maybe it’s a similar behaviour and Firefox has gone down that route.
Hi Paul, I have tried it with image source but it didn’t work.
Sorry I must have confused you
It won’t work with an image source because that will be classes as a replaced element and behaves as @m_hutley explained above.
I was just surmising that it probably works In Firefox when there is no image source because it no lnger has replaced content.
Suffice to say you can’t do it that way whatever and will have to shim an element around the image and use that for your handles.
or replace the image with a div that just happens to have a background image through CSS.
That seems to be the only option
Consider having the handles as siblings instead of children of the image as here:
The relative positions of handles have been calculated using image dimensions, image margins and hande dimensions (including border width).