Need a <div> wrapper for <img> tag

[Elderberry]

Hello again!
I'm very happy to say that I'm now able to employ fade-in effects on images using XWD. The basic idea is described at Richard Rutter's excellent website:

http://clagnut.com/sandbox/imagefades/

To make this work, however, required some extra coding on my part. You see, the fade only works if you have a <div> to wrap around the img tag, which I managed to do using javascript:

<div name="imgDiv" ID="imgDiv" style=""></div>
<script type=text/javascript>
var obj=document.getElementsByTagName('img')[0];
var imgTag=obj.outerHTML;
document.getElementById('imgDiv').innerHTML=imgTag ;
</script>

This seems to work fine in Firefox 3 (both for screen and print rendering) but not in Internet Explorer 7. In IE the screen displays an image--set in XWD for left:200px--at left:93px! And the printer engine puts it at about left:211px. By contrast the same image and setup, but without the above code, renders in IE the same as Firefox.

Yes, I know: this is par for MS IE. But a workaround is not likely--and bug fixes in IE grind exceedly slowly.

Which brings me to this point: Why not add a feature to XWD which enables you to place a wrapper around the image tag prior to rendering the page? This would require some fairly minimal development work, I think, and would add a great deal of power to the user in terms of graphic effects. A <div> here and there is all I ask... for now anyway.

Thanks for listening!

[covoxer]

You can wrap any part of the WD design within <div> or whatever you want. Without JS. Using placeholders. If you want a help on this, create thread in the WD forum.
This forum is only for bug reports, and suggestions for feature implementation.

[steve.ledger]

Hi John, yes this thread would be of more use in the general WD forum.
Now moved.

[covoxer]

Ok. Then I can explain how to put a part of the WD design into a particular <div> element using placeholders.
This was asked at least twice on this forum.
Note this is not trivial or perfectly straightforward method, so unless you feel comfortable messing with code I would suggest not to bother with it.

First of all, you have to select the object(s) that you want to be exported within your <div> element. This is done by the objects order (z-order) in WD.
Create two placeholder objects. One just under (behind) and one just above (in front of) the object(s) you want. Think of them as opening and closing tags.
To simplify management of these objects, you can use layers (but only if your object is on the static layer, popups can have only one layer). Create three consecutive layers. Put opening and closing placeholders on the first and third layer, and all your objects that has to be within the <div> in the middle layer. This way their order will remain during document editing and it is easy to see and manage the content within the div. You can see this approach used in the Sticky footer, Dynamic page and Loading screen tweaks for example.

Next, as you have the two placeholders, you have to give them some code. The bottom placeholder is an opening one, and the topmost is a closing.

Put following code in the opening placeholder:

</div>
<div id="my_div" name="Whatever">
<div>

Where the red part is your <div> element opening tag. It may be any opening tag, not only div. You can set all the attributes here. But keep the black part untouched.

Put following code in the closing placeholder:

</div>
</div>
<div>

The red part is your closing tag. If you are using <div> element then you can close it with much simpler code:

</div>

That's it. All the objects placed between these two placeholders will be exported within your <div> or any other element you use.
Also see the attached example file (you'll have to look into the exported HTML source to see the result ).