Code for Mouse Over Images

Mouse Over Code

Planet Roddy Photo Satellite

Photo Satellite Navigation: Image Optimizing Photo Presentation Mouse Over Images Tutorials

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Expanding Photos</title>

img.mini {border:none}

div#minis a:hover{background:White}

div#minis a img.big {height: 0; width: 0; border-width: 0}

div#minis a:hover img.big {position:absolute; top:20px;

left:139px;height:463px;width:463px;border:none}

#frame {position:absolute;

top:18px;left:137px;height:445px;width:445px;border:1px solid White;font: 2em , Verdana, ;color:White;padding:10px}

p {margin-bottom:23px}

</style>

</head>

<body>

</div>

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

src="http://www.website.com/ImageFolder/Image1.jpg" width="100" height="100"

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

src="http://www.website.com/ImageFolder/Image1.jpg" width="100" height="100"

/></p>

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

src="http://www.website.com/ImageFolder/Image2.jpg" width="100" height="100"

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

src="http://www.website.com/ImageFolder/Image2.jpg" width="100" height="100"

/></p>

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

src="http://www.website.com/ImageFolder/Image3.jpg" width="100" height="100"

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

src="http://www.website.com/ImageFolder/Image3.jpg" width="100" height="100"

/></p>

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

src="http://www.website.com/ImageFolder/Image4.jpg" width="100" height="100"

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

src="http://www.website.com/ImageFolder/Image4.jpg" width="100" height="100"

/></a></p>

</div>

</body>

</html>

Mouse Over Code

Navigate This Section:

Mouse Over Images

Display Layout

Demo Layout

Code

The variables are colored blue.

The image “title”, “width”, “height” and URL are self explanatory as are the frame “height”, “width”, “border” and “font”

In #frame {position:absolute; “top” aligns the top of the frame with the top of the thumbnails.

“left” aligns the main frame horizontally in relation to the thumbnails.

p {margin-bottom:20px} aligns the bottom of the thumbnails with the bottom of the enlarged image.

Note that my image size is adjusted to be larger than its fame size so that it fills it completely.

The iFrame can be dragged down to enlarge and show the full display if it is too small.

iWeb for Musicians E Book