Enlarge Thumbnail Image

[Karen615]

Let's say I have a thumbnail image and I want the user to roll their mouse over the image and then the image will enlarge.

Can this be done in Dreamweaver 8 or do I need another program? If it can be done in DW8, how do I do this?

Thank you in advance, Karen
:)

[TORCH511]

Like many things HTML (dreamweaver) there are many ways to do this. using scrictly HTML and CSS you can do it this way

in the head of a page stick this:

<style>
img.rollover:hover {
width: 400px;
height: 400px;
}
</style>

All that is is a CSS definition that gets applied to image tags that have a class designated of "rollover"

Then in the body of your web page, add this:


<img class="rollover" width="100px" height="100px" src="yourimage.jpg"/>


As far as the size of the image, use the image size, I just put 100 and 400 as an example. There are other ways to do this, however this is about as simple as they come. You can further define the CSS properties to control how the image grows (or shrinks for that matter).

You can also use Insert>Image Objects>Rollover Image, click the appropriate options, select the appropriate images and volia, however it uses DHTML(javascript) to do it, IE7 does not like it, you would still have to edit the option so the rollover image changes size, and is a more complicated and lengthier script than just using HTML and CSS.

And it is not so much Dreamweaver doing this. Dreamweaver is only really an HTML (and web language) editor. It's fancy, has all the bells and whistles and is really powerful, but it is still JUST an editor. You can do a lot more with HTML than what Dreamweaver has built in functions for so it is good to not depend on it.

[Karen615]

Thank you for your response - I'm very new to DW and I'm not familiar with html code at all. It seems as though you feel it's possible, you suggest against it. Is that true?

This is my dilemma - I am working on a Web site for a friend and she's a chocolatier. In the photo gallery, I came up with a concept. On the first page, I was going to add a chocolate bar and put the thumbnail images on each section. The chocolate bar with the thumbnail images looks cool. It's just that, if I don't use the method of the rollover and have the image enlarge, the chocolate bar concept is a wash.

The only other way is to have the user click on the chocolate bar thumbnail and then he/she will be directed to a new page with an enlarged view. The I'll have to add a link to go to the previous or next image. If that's what I have to do, the concept of the chocolate bar is useless. Don't you think?

Do you or anyone else have any suggestions for my concept?

Thanks again, Karen

[TORCH511]

Yes, it is possible and yes, I am recommending against it as far as using the rollover object within Dreamweaver. The DHTML (Javascript) code is messy and for the 95% of us who use Internet Explorer, you get an annowing message in the toolbar. There are easier and better ways of doing what you want.

As far as your chocolate bar idea goes, it can be done with HTML and CSS, though depending on how many parts of the chocolate bar you have to program a rollover effect for could make getting the rollovers to show up where you want them to be pain in the rear-end.

The hole thing could be made with Photoshop (if using CS2 or prior then you would use it's companion ImageReady) or with Fireworks by creating an image map, however the end result would still be DHTML and IE is going to balk at the idea.

If you REALLY want to do this, and you want it to work nicely and look professionally, then probably your best bet is to make the chocolate bar a flash object. Of course you would have to have Flash to do that which is a problem in itself.

Wish I could help you more, but Dreamweaver only goes so far.

[Karen615]

Thank you very much for your help. I'll have to learn how to use Flash.

Karen
;)