Yes, it is possible.
The first part can be done through css using the position properties. If you aren't already somewhat familiar with css, I'd recommend reading a guide, but what I'd do is something like this:
Code:
<div style="position: absolute; left: 100px; top: 100px;"><img src="mypicture"></div>
<div style="position: absolute; left: 100px; top: 100px;">
This is my blog entry. The top left corner of this block of text
is in the same place as the top left corner of the image.
Current mood: Stoked!
</div>
The key part is the style portion of the <div>, which determines where the image or text is placed in relation to the top left corner of the browser's client area (or the parent div, if nested). The value after 'top' specifies how far down from the top of the page the top of the image or text block is (100 pixels), and the 'left' does the same thing from the left.
Note that another and possibly better way to do the same thing is to simply make the image a background to the <div> containing the text. It is important to remember that the size of the div should be specified according to your needs, and doing so may clip the picture or cause it to repeat.
Code:
<div style="width: 75%; height: 200px; background: url(myimage);">
This is my blog entry. The div is 75% of the browser's width, which
means that the image may tile if the browser is resized unless you
specify differently. Similarly, if the height of the image is greater
than the 200 pixels specified, the bottom would be cropped off.
Current mood: Stoked!
</div>
The other part, graying out the photo, is a bit more difficult. It wasn't clear to me whether you meant graying out only the part of the photo that is covered by the text, or if you meant the whole thing. If you mean the whole thing, I would simply edit the image. If you meant only a portion of the photo would be covered and grayed out, the only way I know of involves using some of the proprietary css plugins that IE has, and I wouldn't recommend depending on this as the effect wouldn't be viewable to anyone using a different browser. Other browsers have similar properties, but I am not sure about the syntax.
A variation to consider: have 2 images available: a grayed out copy of the image for use as the text background, and the regular one. You could have a <div> with the overflow clipped and position the grayed-out one in the same spot as the regular one, but only the unclipped portion would be visible and the size you specify for use as the text background.
HTH
Dev Shed Forums Sponsor:
January 23rd, 2004, 01:18 AM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
