I am using Dreamweaver 8 and I wanted to show visitors, a porfolio of my website designs. So I want visitor to click on a small image picture and a larger image appears the left of the small image. I was wondering if I should use an iframe to do this or is there a simpler way to do this.

I tried to use the iframe approach, but when I click on the small picture, no large picture appears. I don't know how to set up the iframe properties such as the Layer ID = iFrame or z-index=0. I have attached the code below: -

<div id="iFrame1" style="position:absolute alt="" align="left" class="left"; z-index:0">
<iframe name="iFrame1" width=197 height=152 src="iframe.html" scrolling="no" frameborder="0"></iframe>
</div>

<div id="image1" style="position:absolute; overflow:hidden; left:643px; top:283px; width:60px; height:48px; z-index:1"><a href="iframe.html#bookmark1" target="iFrame1"><img src="../images/Pic Images/DSCF2719-small-framed.jpg" border=0 width=60 height=48></a></div>
<div id="image2" style="position:absolute; overflow:hidden; left:643px; top:336px; width:60px; height:48px; z-index:2"><a href="iframe.html#bookmark2" target="iFrame1"><img src="../images/Pic Images/BE-small-framed.jpg" border=0 width=60 height=48></a></div>
<div id="image3" style="position:absolute; overflow:hidden; left:643px; top:387px; width:60px; height:48px; z-index:3"><a href="iframe.html#bookmark3" target="iFrame1"><img src="../images/Pic Images/WBL-small-framed.jpg" border=0 width=60 height=48></a></div>
<br>

Could you please help me?

Thank you in advance.

wire_jp

The basics of what you've done looks right assuming you have a file named iframe.html that's located in the same folder as the main file that contains the code.

A couple of things I noticed. In <div id="IFrame"> the way you have the syle set is off. You're mixing html attributes with the css. The alt and class need to be outside of the style="" and there isn't css style align property. It would be text-align in css.

<div id="iFrame1" class="left" style="position:absolute; text-align=left; z-index:0">

would work as css, but when I look at it the div as you have set up it isn't really doing anything. I think you can probably remove it safely. It's also possible using the same value for the id on the div and the name on the iframe is causing problems.

Another thing is you mentioned wanting to display images in the iframe. I'm not sure then why you're linking to an html file. Wouldn't you just link directly to the images that you want to show?

Thanks, vangogh for the help. I made some changes but now an "x" shows up in the iframe (refer to the attached screenshot). I have the iframe.html in the same folder as the main file which contains the code. The code is attached below:

<div id="iFrame1" style="position:absolute; left:430px; top:312px;z-index:0">
<iframe name="iFrame1" width=197 height=152 src="iframe.html" scrolling="no" frameborder="0"></iframe>
</div>

<div id="image1" style="position:absolute; overflow:hidden; left:644px; top:312px; width:60px; height:48px; z-index:1"><a href="iframe.html#bookmark1" target="iFrame1"><img src="../images/Pic Images/DSCF2719-small-framed.jpg" border=0 width=60 height=48></a></div>
<div id="image2" style="position:absolute; overflow:hidden; left:644px; top:363px; width:60px; height:48px; z-index:2"><a href="iframe.html#bookmark2" target="iFrame1"><img src="../images/Pic Images/BE-small-framed.jpg" border=0 width=60 height=48></a></div>
<div id="image3" style="position:absolute; overflow:hidden; left:644px; top:415px; width:60px; height:48px; z-index:3"><a href="iframe.html#bookmark3" target="iFrame1"><img src="../images/Pic Images/WBL-small-framed.jpg" border=0 width=60 height=48></a></div>
<br>

Thanks,

wire_jp

I managed to get the problem solve. Thanks for the help.

Cheers,

wire_jp

Maybe you could help me then!

Iv poster http://www.webmaster-talk.com/websit...re-better.html
please help

Someone pointed me to these links below (I found the second link easier to use): -

You could do something like this using the Set Text of Layer behaviour in DW
http://www.dreamweaverresources.com...textoflayer.htm

or if you find that too difficult the Showpic extension maybe what you need:
http://www.projectseven.com/extensi...w_pic/index.htm