1) Place an object ( like a black box ) on your page. I made it same size as thumbnail so I could determine placement.
2) Select that object > then " Tools " > then " Custom Script Assistant " > then copy and paste the code below in
the " Object Events " box.
3) Do not place the images on the page - Upload them to your root directory. ( I found it easy to place images on
the page - then build and publish page - go back and remove images from page and upload again without images,
then they stay in directory but not on page.)
4) Blue numbers determine where the large image is placed - IN RELATION TO where the thumbnail was placed.
NOTE: If thumbnail is on the RIGHT side of large image you will need to use a minus sign ( -100 ).
Red numbers are the size of "large.jpg" -
Green numbers can place a border ( width ) and pick color of border on large image.
Pink thumb.jpg and large.jpg get replaced with the image names.
2) Select that object > then " Tools " > then " Custom Script Assistant " > then copy and paste the code below in
the " Object Events " box.
3) Do not place the images on the page - Upload them to your root directory. ( I found it easy to place images on
the page - then build and publish page - go back and remove images from page and upload again without images,
then they stay in directory but not on page.)
4) Blue numbers determine where the large image is placed - IN RELATION TO where the thumbnail was placed.
NOTE: If thumbnail is on the RIGHT side of large image you will need to use a minus sign ( -100 ).
Red numbers are the size of "large.jpg" -
Green numbers can place a border ( width ) and pick color of border on large image.
Pink thumb.jpg and large.jpg get replaced with the image names.
5) If used multple times on same page, change the p1 to p2, p3, etc for each time code is used on same page.
5 ) Check out these links for more info.
5 ) Check out these links for more info.
<html>
<head>
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:20px; left:100px; width:240px; height:320px; border:01px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="thumb.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="large.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
</html>
<head>
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:20px; left:100px; width:240px; height:320px; border:01px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="thumb.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="large.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
</html>
Same code as above
<html>
<head>
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:20px; left:100px; width:240px; height:320px; border:01px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="thumb.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="large.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
</html>
<head>
<style type="text/css">
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:absolute; top:20px; left:100px; width:240px; height:320px; border:01px solid #ccc;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="thumb.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="large.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
</html>