Image Field Z-Order Problems

h2. Description

If you’ve ever tried to use an image field’s contents (an image) as the background for a form and wanted to let the user change it at run-time, you’ve probably run into problems if you had placed objects on top of this image field. The most common result is the image field’s contents always appears on top of all other fields which are technically higher in z-order (“in front” in the hierarchy) than the image field.

While this may seem like buggy behaviour, it’s not technically a bug and I’ll try to explain why it isn’t.

The behavior occurs because of the way image fields are translated from XFA objects to “AcroForm objects”:http://blogs.adobe.com/formbuilder/2006/06/acroform_objects.html when your form is saved as a PDF and rendered in Acrobat.

The PDF format has a definition for what is called an _Annotation_ object which represents essentially all the “extra” stuff you can add to PDF documents such as comments, stamps, highlighting, etc. When it comes to image fields, their contents is actually an Annotation in the PDF layer as opposed to contents in the XFA layer. Since the PDF layer is above the XFA layer, Annotations can’t be placed behind objects on the XFA layer — hence why the contents of an image field is always displayed above any objects that may be “in front” of it in the XFA hierarchy (z-order).


h2. WorkaroundUnfortunately, there aren’t any workarounds to this problem if you want users to pick the image field’s contents at run-time (in Acrobat) or if you specifically need to use an image _field_ object.If you are able to restrict the possibilities to a known set of images that you can store in the form at design-time (in Designer), however, then you could embed all the images in separate read-only image objects (note that this is a _static_ image object — not an image _field_ object) and then change their presence attribute (make one visible and all the others invisible) when the user performs an action that would’ve let them change the background image.Since _static_ image objects (as opposed to image _field_ objects) render their contents in the XFA layer at the moment the form is rendered in Acrobat, their contents appears “behind” all the other objects, as is desired in this case.h2. FixPlease refer to the “Bug List”:http://blogs.adobe.com/formbuilder/buglist.html for updated information on the version(s) affected by this bug as well as if and when it was/will be fixed.

16 Responses to Image Field Z-Order Problems

  1. HiWe actually want to use a Static Image rather than an ImageField – but we want some javascript to load a particular image on init or form:ready, rather than always having it use the same field. Is there any way of achieving this?Many thanks,Howard

  2. Howard,Unfortunately, you can’t use static image objects when you need to change the image that it displays at runtime (e.g. in Acrobat). This is because static image objects are rendered directly to the canvas as opposed to image fields which are actual objects (in dynamic PDF forms).I’ll take a guess and will assume that you’re wanting to use a static image object instead of an image field because you (1) don’t want to have a caption and (2) don’t want the user to be able to click on the image field and change the image.You can easily make image fields behave like static image objects simply by making them read-only and removing their caption.Use this script to make an image field read-only on load (in FormCalc here):$.access = “readOnly”Use the Caption Position property on the Layout palette to remove the caption completely.Finally, as long as the image data isn’t embedded (make sure the “Embed Image Data” property on the Object palette’s Field tab isn’t checked), you can change the file which the image field references (and displays) by accessing the following property (in JavaScript here):ImageField.value.resolveNode(“#image”).hrefYou may set the property to an absolute path or a relative path (from the PDF’s folder).

  3. Melissa Hendricks says:

    I have a question regarding Image Fields. I am a minimal user, no knowledge of any scripting. I created a form with upwards of 6 Image Fields. Each picture is a different-size rectangular “icon” for a particular task students must complete. My problem is that the image ALWAYS left aligns and because the icons are different sizes, I can use any of the other options except “Scale Image to Fit”. Let me know if there is any quick and easy way to make this happen. (I have asked my husband–a programmer–who had no answer to give me.)

  4. Brad Whitaker says:

    Fortunately this “non-bug” seems to have been “fixed” in LiveCycle Designer 8. I put a text field over an image field and the text is visible over the image. It works this way when I open the PDF in either Acrobat 8 or Reader 7. This “non-fix” is great.

  5. Melissa,I’m not certain I completely understand your problem. Are you saying you’re unable to use the “Scale Image to Fit Rectangle” option because your icons are all different sizes?It sounds to me like you should be using the “Use Original Size” option and aligning the images on the grid using the alignment buttons on the toolbar up top rather than trying to apply different paragraph formatting to the image fields.Also, you should probably be using image objects (“Image” as opposed to “Image Field”) instead of image fields because image fields, by nature, let you click on them to load-in other images when viewing the form in Acrobat. Image objects, however, don’t do this because they’re meant to be “read-only” or unchangeable.

  6. Brad,That’s very interesting. I can’t get it to work as you describe it on my end. Did you do anything special like save the form as a “static” form or preview it as a “print” form? If you did that, then I would understand, since the image field would basically be treated as an image object.

  7. Brad Whitaker says:

    The simple test form I used had saved (by default) as “Acrobat 7 Static”. I tested it again after saving it as “Acrobat 7 Dynamic” and see the same behavior. As I look again at my form I realize that my text field only partially overlaps my image field. If I select a new image then it is rendered in a way that obscures my text field, but clicking on the portion of the text field that does not overlap the image field causes the entire text field to be raised on top of the image. I tried this again with Designer 7 and Reader 7 and the behavior is the same.BTW, I tried the static image tip that you described. While it does work I found unpredictable (or perhaps just complex) and undesirable interaction with the display of other fields. Changing the visibility of overlapping static images would cause other image fields to “loose” or hide their image. I would have to go back an click the image field to “raise” it.Finally, I’ve noticed that the new support for transparent PNGs only works in the “GUI”, but does not work properly when printing to PDF. I’m not sure how to report this bug.

  8. Brad,Essentially, you’re seeing the behaviour I’m describing in this post. In the end, you’re best not to have any fields overlap image fields.As for the transparency with PNG images, it’s specifically only PNG8 with one color mapped as transparent in Acrobat 8.0 XML Forms that’s supported. PNG24 images with transparency are not supported at this time and this isn’t backwards-compatible with older versions of Acrobat.If your problem is specifically with PNG8 with one transparent color in Acrobat 8.0 XML Forms, then it may be a bug. Please let me know so that we can verify what’s going on and possibly report something.

  9. Hi Stefan(This is going back to one of the very early postings on this topic…)The reason that we want to use an Image rather than an ImageField isn’t because of captions or use-clicks. It’s because a) we specifically want the image to act like a background behind the form fields (it’s actually a map, overlaid with form objects), and b) there are around 5000 images – we don’t want to have to develop a separate form for each image. The idea is to import some form data, one bit of which is the name of the image, which then gets loaded.By the way, I totally don’t buy you saying that this isn’t a bug. At the very least, it’s the absence of a feature. Your explanation of why it doesn’t work is an excellent explanation – but that’s what it is – an explanation. Explaining why something is so doesn’t detract from the fact that the product doesn’t do something that customers want it to do… :-$Many thanks for your patient responses and excellent explanations.Howard

  10. Howard,I’m glad you think my explanations are helpful even if they explain something you think should work differently.I’m with you on this one. I think the way images are handled in Acrobat with respect to XFA forms isn’t correct and I have been lobbying for change since I posted this tutorial last August: Tracking Mouse Clicks.Unfortunately, I haven’t had any luck in changing things yet but I’ll definitely update this post if I get results. Your valuable feedback might give my case the boost it needs…

  11. Miguel Moral says:

    Hi Stefan,Is there any way of embedding an image loaded at runtime into an ImageField into a pdf document, for delivery purposes?.

  12. Miguel,You can specify whether an image loaded into an image or image field object is linked or embedded by using the “Embed Image Data” check box in the Object palette’s Field (for image fields) or Draw (for images) tab.If you set it to be embedded, then the image picked by the user at runtime (in Acrobat) gets embedded into the form rather than linked externally.

  13. Miguel says:

    Stefan,Thanks for your soon reply. Yes, it is right, I understand the concept. But let me explain you what I want to do.We develop a software that integrates Acrobat Reader inside. We open a customer and we want to generate a form with personal information embedded on it (name, address, …) including his photo (all this information comes from our software and we pass thru xml to the form, we pass the photo as a path to a temporary image file). We save the form asociated to the customer in a pdf in an appropriate directory and we want to delete the temporary information (we want to delete the photo), but the photo must be maintained (embedded) into the pdf, because we want to deliver by email the pdf.Conclusion, we want to use dynamic loading images and have the possibility (programatically) to embed the images before saving the final pdf filled.I hope this information help you to understand my problem.Note: Sorry for my english.

  14. Miguel,Thanks for the explanation. What you describe should definitely be possible however I discovered a bug with this process while attempting to reproduce it.Essentially, I had a form with an image field set to “link” to its image file. I would then import an XML data file that contained the path to the image file. The image would get loaded into the image field but simply saving the PDF (which should’ve embedded the image into the PDF regardless of whether the image field was linking to or embedding its image into the XFA Data) didn’t embed the image file for future reference and neither did programmatically setting the image field’s “embed” property like this

    ImageField1.ui.oneOfChild.data = “embed”

    make any difference. The only way the image would get embedded after importing the data is if you manually clicked on the image field to pick a different image and then re-picked the original image and I’m certain that’s not acceptable to you given the workflow you described.I’ve logged a bug about this issue in hopes that it’ll be addressed in a future version of Acrobat.

  15. sasikumar says:

    haii am new to this field so can utell how to set image to aparticular field. Please sendquickly its very urgent.

  16. Sasikumar,You can put an image into a field by using an image field object from the Library palette’s Standard tab. Note that there’s also an image object (which isn’t a field) that’ll let you include an image on your form but the user won’t be able to click on the field in Acrobat in order to include an image of their choice.