Artotems HTML Picture Viewer

 

HTML Picture Viewer in iWeb

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


  1. 1. Add A title bar above the box in iWeb as is seen above.


  3. 2.Create a folder named docs inside your Web/Sites folders of your iDisk. Place your 4 images in the folder.


3. Select the HTML Snippet option the Insert Menu


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


  1. 1.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. As the code indicates after the image references you can alter the size of the images as well.


6. Click Apply


7. 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: Copy it all!

__________________________________________________



<!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


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


sans-serif;color:White;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://web.mac.com./your iDisk/docs/yourimage1.jpg" width="100" height="75"


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


src="http://web.mac.com./your iDisk/docs/yourimage1.jpg" width="100" height="75"


/></p>


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


src="http://web.mac.com./your iDisk/docs/yourimage2.jpg" width="100" height="75"


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


src="http://web.mac.com./your iDisk/docs/yourimage2.jpg" width="100" height="75"


/></p>


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


src="http://web.mac.com./your iDisk/docs/yourimage3.jpg" width="100" height="75"


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


src="http://web.mac.com./your iDisk/docs/yourimage3.jpg" width="100" height="75"


/></p>


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


src="http://web.mac.com./your iDisk/docs/yourimage4.jpg" width="100" height="75"


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


src="http://web.mac.com./your iDisk/docs/yourimage4.jpg" width="100" height="75"


/></a></p>

</div>



</body>

</html>

Leonardo da Vinci - Details of Selected Drawings

If you value and use Artotems iWeb Tips and Tricks please consider making a donation to support more assistance in the future as well as the charitable work Artotems Co. does for others around the world.