Need help with image gallery

**divinedesign21** · 08-07-2005, 06:35 PM

I'm new here so I hope this question is posted in the right place.

I am working on a website and I want to create an image gallery like the one at www.susanstripling.com

where you mouse over an image and it appears at the right side of the page in a larger version.

How is this done? Is it done easily in Dreamweaver also?

Thanks.

**Twey** · 08-07-2005, 07:09 PM

The example in question was done with Flash. You can do this in DHTML as well, however:

HTML Code:

<style type="text/css">
div.previews img {
width: 50px;
height: 50px;
padding: 5px;
}
</style>
<script type="text/javascript">
function preview(image) {
document.getElementById("fullsize").src = image.src;
}
</script>
</head>
<body>
<img id="fullsize" src="blank.jpg"/>
<div class="previews">
<img src="pic1.png" onmouseover="preview(this);"/>
<img src="pic2.png" onmouseover="preview(this);"/>
</div>

**jscheuer1** · 08-08-2005, 01:44 PM

I kind of went a little nuts on this one and came up with a DOM scripted demo. I couldn't get the positioning the way I wanted without using an iframe but, I haven't given up on that yet. Right click inside the gray area and view source (IE) or this frame - view frame source (Mozilla). It is highly configurable and that might lead to some confusion but, each choice is commented and if you only change one thing at a time, it should be clear what each means.

**jscheuer1** · 08-10-2005, 04:48 PM

Here is an even better demo it displays right on the page where you are using it like a block level element (division, table, etc.). The best part is that much of the configuration is now automatic. Requires at least a Transitional non URL DOCTYPE for best appearance.

Thread: Need help with image gallery

Thread Tools

Search Thread

Need help with image gallery

Bookmarks

Bookmarks

Posting Permissions