Office Live HTML Picture Viewer

Office Live

HTML Picture Viewer

"I'm Constructing"

Slideshow Module causing you problems? Here's one way to show your photos. I tested this Picture Viewer in IE, Firefox, and Safari on the MAC. It works fine in all of them.

Leonardo's work has been an inspiration to me since I was a young boy. His mastery of varied artitstic and technological disciplines never ceases to amaze and inspire me despite the "hoopla" Dan Brown created.

Leonardo da Vinci - Details of Selected Drawings

HTML, XHTML & CSS

The HTML Picture Viewer above is adapted from Elizabeth Castro's book HTML, XHTML & CSS. It's a resource I use often. Anyone interested in getting serious about using the HTML module to its greatest potential should consider buying it. For the price you can't beat it.

Leonardo da Vinci

Paintings, Sketches and Drawings

The Images above are from this wonderful book.

Its BIG and it COSTS a LOT and it's worth it. See da Vinci images like you've never seen them. This popular master of all things deserves a book as big and as all encompassing as this one.

Method

What you see above is the picture viewer code in an HTMl module placed inside a table with a background image.

The code looks complicated but fortunately you don't have to write. Just copy it and make adjustments.

1. Step Optional - Create a table and in the table properties select an image to be the table background.

2. Place the cursor in a zone or the table if you created one and select "Module" and then "HTML". (See Below)

3. Copy the code below and paste it into the HTML dialog box.

4. Alter the Code.

The blue text is a reference to text and border color.

The green text is the text viewers can see and the titles for the pictures.

The red text is the image reference text. Where the images are and their names.

5. Click OK

6. Play with the HTML boundary box handles until it views the way you want to look. Don't worry if it looks funny in the Page Editor. What counts is how it looks when viewed.

THE CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Expanding Photos</title>
<style type="text/css">
img.mini {border:none} /* no border around left column images

*/
div#minis a:hover {background:White} /* this seems to be

necessary for it to work properly in IE6, I'm honestly not sure why */
div#minis a img.big {height: 0; width: 0; border-width: 0} /*

hide the big image by making its height and width 0 */
div#minis a:hover img.big {position:absolute; top:18px;

left:120px;height:375px;width:500px;border:none} /* make the big image

appear in the same space as the frame at right when the visitor hovers

over one of the image in left column */

#frame {position:absolute;

top:16px;left:118px;height:355px;width:480px;border:2px solid

Sienna;font: 1em "Trebuchet MS", Verdana,

sans-serif;color:Sienna;padding:10px} /* create an empty frame so that

visitors expect something to go there */
p {margin-bottom:26px} /*add bottom margin to p elements so

that they are (roughly) aligned with the big image frame */
</style>
</head>
<body>
<div id="frame">
<p>This is my picture text inside the box.</p>
</div>

<div id="minis">
<p><a class="photo" title="Name"> <img class="mini"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

alt="Name" /><img class="big"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

/></p>

<p><a class="photo" title="Name"> <img class="mini"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

alt="Name" /><img class="big"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

/></p>

<p><a class="photo" title="Name"> <img class="mini"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

alt="Name" /><img class="big"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

/></p>

<p><a class="photo" title="Name"> <img class="mini"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

alt="Name" /><img class="big"

src="http://yoursite.com/images/yourimage1.jpg" width="100" height="75"

/></a></p>
</div>

</body>
</html>

7. Got it working? Leo would be proud of you!