Using the Clip function of an AP-Element

This is a follow up question to my previous post asking about opening external
links within my site.

After taking some good advice on embedding the image in an HTML doc on my site
and then calling this page from the navigation bar.......I'm now on the trail
of embedding the image in an AP-Element so I can then do my RHS or LHS
justification using the clip function. In principle I've had it working once on
my exisitng home page, but as soon as I try creating a new Doc and embedding
the AP-element the clipping fails to work. If I clip the LH corner of the image
it diplays correctly in the designer window, but as soon as I go to the browser
preview it reverts back to an unclipped version of the image.

This is what I'm doing:-

1) I create a blank new document
2) I then add an AP Element by Insert|Layout Object|AP Div
3) I then resize this to a reasonable size on the page and then insert an image
4) I then click on the AP-element border and go to the Clip property and set
up to clip the LH corner of the image

When I then look at the designer window, it correctly shows the clipped LH
corner as expected. But as soon as I preview it in the browser it reverts back
to the full size image.

Any guidance would be most greatfully received.

Thanks,
Neil

I can only guess, but when you say you are previewing it in the browser do you
mean either IE 6 or 7? Those don't correctly support clip.

Here's some sample code you can look over:

CSS:

<style type="text/css">
.photo {
position: relative;
width: 166px; /* image's containing div has the same width and height of
image when it's clipped */
height: 212px;
}
.photo img {
position: absolute;
top:-25px;
left:-64px;
clip: rect(25px,230px,237px,64px); /* not recognized by IE 7 or older */
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.photo img{
clip: rect(25px 230px 237px 64px);
}
</style>
<![endif]-->



HTML:

<div class="photo"><img src="pic.jpg" alt="" width="354" height="500"></div>

Yes, I'm using IE6, so I guess that is the main problem.

Just looking at your code and taking into account my rather minimal knowledge
of web design, do I need to be using CSS to make Clip work or will a plain old
HTML page also do the same ?

Just wondering whether Clip and AP elements are the best way forward if there
are capatability issues for older version of IE ? If you scan my other post a
few days ago "Opening an external URL in a site"(or something like that..) then
you can see that all I really need to do is to open an external image in an
existing page and either view it from Right to Left or the normal Left to Right
(the image will be approx two screens wide with different info on each half)

Thanks,
Neil

Those don't correctly support clip.

Where do you get that?


--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"CaryD" <webforumsuser (AT) macromedia (DOT) com> wrote

I can only guess, but when you say you are previewing it in the browser do
you
mean either IE 6 or 7? Those don't correctly support clip.

Here's some sample code you can look over:

CSS:

style type="text/css"
.photo {
position: relative;
width: 166px; /* image's containing div has the same width and height of
image when it's clipped */
height: 212px;
}
.photo img {
position: absolute;
top:-25px;
left:-64px;
clip: rect(25px,230px,237px,64px); /* not recognized by IE 7 or older */
}
/style
!--[if lte IE 7]
style type="text/css"
.photo img{
clip: rect(25px 230px 237px 64px);
}
/style
![endif]--



HTML:

div class="photo"><img src="pic.jpg" alt="" width="354"
height="500"></div

Try it...

clip: rect(25px,230px,237px,64px)

doesn't work like it should. Instead, for IE 6 and 7, you have to drop the
commas..

clip: rect(25px 230px 237px 64px);



[q]Originally posted by: Newsgroup User

[IE 6 and 7] don't correctly support clip.

Where do you get that?


--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
[/q]

[q]Originally posted by: CS4Rookie
Just looking at your code and taking into account my rather minimal knowledge
of web design, do I need to be using CSS to make Clip work or will a plain old
HTML page also do the same ?[/q]

CSS can be used to clip an image's edges so only a smaller area of the total
image is displayed on the page. This can also be achieved by applying an image
as a background to a div, perhaps, that is only big enough to show part of its
background image. You referred to the use of the "clip function" which may be
something completely different, and then none of what I have posted is relevant.

[q]Originally posted by: CS4RookieJust wondering whether
Clip and AP elements are the best way forward if there are capatability issues
for older version of IE?[/q]

Compatibility isn't a problem to overcome, but clipping may not be necessary,
and AP elements need to be used very carefully or avoided if possible.

[q]Originally posted by: CS4RookieIf you scan my other
post a few days ago "Opening an external URL in a site"(or something like
that..) then you can see that all I really need to do is to open an external
image in an existing page and either view it from Right to Left or the normal
Left to Right (the image will be approx two screens wide with different info on
each half)[/q]

I'll have to take a look.

I checked out www.firegrass.co.uk, but didn't see any pages with the clipped images code you're working on. Can you post a test page?

Ok, I have part of the site running now so you can see what stage I'm at.

I think the AP element clipping works ok for what I'm doing, but it does pose
problems with a large clipped image as I need to select a different clipping
area for each side of the image. When I do this I then need to move the AP
elemnt around in the page and this seems to create editable region issues due
to it being a wide image.
Again, this is probably due to my inexperience, so I guess I'll sort it out if
I put enough time in.

Thanks for your comments and support so far.

Neil

Tell us again why you are clipping the image, please?

Also, AP elements cannot interact with any other elements on the page
because the fact that they are absolutely positioned removes them from the
normal flow. So, if you are seeing movement that you interpret in this way,
you are not interpreting it correctly - most likely you have other issues on
the page. Finally, editable regions are NOT layout regions - they are
content regions. If you are seeing 'editable region' issues, then look to
your page's code and the HTML infrastructure there, not at your template
region markup.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"CS4Rookie" <webforumsuser (AT) macromedia (DOT) com> wrote

Ok, I have part of the site running now so you can see what stage I'm at.

I think the AP element clipping works ok for what I'm doing, but it does
pose
problems with a large clipped image as I need to select a different
clipping
area for each side of the image. When I do this I then need to move the AP
elemnt around in the page and this seems to create editable region issues
due
to it being a wide image.
Again, this is probably due to my inexperience, so I guess I'll sort it
out if
I put enough time in.

Thanks for your comments and support so far.

Neil

Thanks for the expansion. I last used clip about 65 years ago and had
forgotten this bit of arcana. It's not mentioned at all in Meyer's CSS TDG
3rd....

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"CaryD" <webforumsuser (AT) macromedia (DOT) com> wrote

Try it...

clip: rect(25px,230px,237px,64px)

doesn't work like it should. Instead, for IE 6 and 7, you have to drop the
commas..

clip: rect(25px 230px 237px 64px);



[q]Originally posted by: Newsgroup User
[IE 6 and 7] don't correctly support clip.

Where do you get that?


--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
[/q]