How to create a rollover image with the same image?

[enlightenme]

I have a series of photos that I would like to create rollovers for. When I rollover these images I would like a bigger identical image to pop up. I thought there was a way to do this with DWCS3 without going into code? I am wondering what would be the simplest method to achieve this - please explain. If necessary please provide the code.

Thanks

[TORCH511]

I know you did not want to go into code, but there is so much more you can do with code and it is not that hard;

In the head paste the following:


<style type="text/css">
img.rollover{
width: ~width of button here~px;
height: ~height of button here~px;
}
img.rollover:hover{
width: ~width of button here~px;
height: ~height of button here~px;
}
</style>


Then just put this in the body section where the button would appear


<img class="rollover" src="~path to image here~"/>


Just replace the sections between the ~~ with the appropriate info.

Here's the caveat: when you create the rollover effect, it may mess with positioning. You may have to mess with it a little to keep the image centered IF you need it to be.

Another way to go would be to use CSS to create a standard rollover button, and just edit the image so that the normal image appears smaller. You can create rollover images in DW so you don't need to touch the code.

[ldrain]

make sure you save your original image to the larger size, so when the rollover is displayed it won't be pixelated or blurry :o

[enlightenme]

I know you did not want to go into code, but there is so much more you can do with code and it is not that hard;

In the head paste the following:


<style type="text/css">
img.rollover{
width: ~width of button here~px;
height: ~height of button here~px;
}
img.rollover:hover{
width: ~width of button here~px;
height: ~height of button here~px;
}
</style>


Then just put this in the body section where the button would appear


<img class="rollover" src="~path to image here~"/>


Just replace the sections between the ~~ with the appropriate info.

Here's the caveat: when you create the rollover effect, it may mess with positioning. You may have to mess with it a little to keep the image centered IF you need it to be.

Another way to go would be to use CSS to create a standard rollover button, and just edit the image so that the normal image appears smaller. You can create rollover images in DW so you don't need to touch the code.


Thanks again, Torch!

You are right, code is good to know. I should take a class in at least HTML or XHTML which are essential to know in web design.

Although, for this, I thought there is away to do this without code, that is to go to the Insert menu > Image Object > Rollover, then place the original image and then a bigger identical image as the 'rollover image'. I have tried this but have not been successful in getting it to work. Can this work?

I ordered the 'missing manual' today. I have looked at it before and it seems very comprehensive. What do you think of this book?

Anyway, Thanks:)

[TORCH511]

When it comes to books, generally speaking any book that teaches at the speed in which you like to learn, or even in the method in which you like to learn will work best. Some people prefer a more reference type book that just spells out the concepts and details, while others prefer an example based approached. So what works best for me (reference all the way) may not be the best option for you.

I don't have any of the 'missing manual' books but I have glanced over some at Borders. They seem adequate enough. I have always prefered the 'Bible' series of books and own a ton of them (OK, more like a couple hundred pounds).

When it comes to HTML and the like, I would be dead without a comprehensive reference book, of which I have several including pocked sized for quick reference.

I think you will find that after a few weekends sitting down in front of Dreamweaver you will get the hang of HTML very quickly. It is very easy to pick up and learn.

[enlightenme]

When it comes to books, generally speaking any book that teaches at the speed in which you like to learn, or even in the method in which you like to learn will work best. Some people prefer a more reference type book that just spells out the concepts and details, while others prefer an example based approached. So what works best for me (reference all the way) may not be the best option for you.

I don't have any of the 'missing manual' books but I have glanced over some at Borders. They seem adequate enough. I have always prefered the 'Bible' series of books and own a ton of them (OK, more like a couple hundred pounds).

When it comes to HTML and the like, I would be dead without a comprehensive reference book, of which I have several including pocked sized for quick reference.

I think you will find that after a few weekends sitting down in front of Dreamweaver you will get the hang of HTML very quickly. It is very easy to pick up and learn.

Thanks again Torch!:)

You seemed to bypass my inquiry regarding the 'Insert option' for the rollover. Will this work? As I mentioned I want to create the effect when someone hovers over an image an identical images pops up to create a close up view. I noticed this on a lot of websites and it looks great.

What do you think?

[TORCH511]

Didn't bypass so much as I was trying to steer you along a different route.

Can you? sort of. You can use the INSERT>Image Objects>Rollover to input in a rollover button

HOWEVER

Dreamweaver does this with a big chunk on javascript. It works good but the code is not as efficient as doing it with CSS. PLUS you would have to do even more editing to do the image size shift to alter the javascript, or apply CSS to it than just using CSS to begin with. The other issue is that IE does not like DW javascript and you get that stupid warning bar at the top of the browser window UNLESS you go in and add some more code so it does not do that.

[enlightenme]

Didn't bypass so much as I was trying to steer you along a different route.

Can you? sort of. You can use the INSERT>Image Objects>Rollover to input in a rollover button

HOWEVER

Dreamweaver does this with a big chunk on javascript. It works good but the code is not as efficient as doing it with CSS. PLUS you would have to do even more editing to do the image size shift to alter the javascript, or apply CSS to it than just using CSS to begin with. The other issue is that IE does not like DW javascript and you get that stupid warning bar at the top of the browser window UNLESS you go in and add some more code so it does not do that.

Thanks Torch! I'll get it to work eventually.;)