Rhino,
Yes, this is very easily possible. There are a variety of ways, but
I'll try and point you in the easiest direction.
You will need two pairs of html page elements which are <div></div>
tags.
Between one set of div-tags is where you'll put your jpg image coding
eg:
<div>
<img src="book.jpg" />
</div>
Inside the other set of div-tags you can put your text:
eg:
<div>
<p> put your quotation or comment here</p>
</div>
Now comes the fun part with the css; this will be an inline style
versus putting the css rules within <style> tags in the <head> section
of your html document.
To use an inline style, you type style=" " inside the first 'opening'
element
eg:
<div style=" " >
Between the quotes is where you put your style rules which tell the web
browser the rules and ways you want that
tag or element to be shown to your web page visitors. inline style
rules need to follow this recipe:
style="rule:property; rule:property; rule:property"
note the colons and semi-colons which must appear for the style to be
used.
Now, let's set up the rules and properties for your div tags to make
them look how you want them!
Div-tags or boxes can be positioned anywhere on your html page.
"Absolute" positioning
means you plop them at a location and it will not move. "Relative"
positioning allows the box to move depending on other page elements.
You want to use absolute positioning for your two div boxes so that
they stay put.
eg:
<div style="position:absolute;">
Of course to go along with positioning is *where* to position things.
You give the div a left and top coordinate: how many pixels from the
left of the page and how many pixels down from the top of the page you
want the upper left corner of your div box to appear.
eg:
<div style="position:absolute; left:10px; top:10px;">
** IMPORTANT ** : You will have to play-with and alter your left and
top coordinates a bit to make sure your image and text line up where
you want them.
Last item about div positioning: you can put them in layers with one
behind the other. how? you give them a z-index. An index of '1' puts
that div-box in the background. The higher the z-index the more visible
in the fore-front that div-box will be.
For your purposes, you'll want the div holding your image to be in the
background, so it should have a z-index of '1'. You want your text to
be seen in the foreground, so it should have a higher z-index; you can
give it '2' or '10' or '100' as long as it is higher than the div
holding your image.
In this way, using div-box elements, absolute positioning, and
assigning a z-index value, you can literally "layer" or stack images
and text upon one another (note: this does not work using applets,
sound, movie, flash or any type of object/embed html tags).
Here's one example of how you might want to setup your code:
------------------------------------------------------
<div id="imageholder" style="position:absolute; left:50px; top:50px;
z-index:1">
<img src="book.jpg"/></div>
<div id="textholder" style="position:absolute; left:100px; top:100px;
z-index:10">
<p>We learn from failure, not from success! - Bram Stoker, "Dracula".
</p>
</div>
------------------------------------------------------
Keep in mind that you can change the left and top values in the div
styles above to 'move' them around on the web page; First determine
where you want your jpg image to appear on the page and get the left &
top coordinate values set for it. Then, change your quote-holding
div's left and top coordinates so that your quote sits right on top of
the image, in the area (ie: the right 'page' of the image) you want it.
Hope this info is helpful; there are other more complicated ways to do
this using formal css rules and styles and background images etc.
There can be a much more detailed and technically oriented explanation
of this process, but for your use and understanding right now, I tried
to scale it down a bit. Hopefully this is easier to understand and
will give you a non-frustrating easy transition into the fun world of
html style-sheets.
-Jim
