How do I do this? Image rollover type stuff in Dreamweaver

Joined
Jul 21, 2005
Messages
634
I'm making some images in Illustrator and using them as navigation buttons in Dreamweaver. I want to have the images display their alternate/rollover image as long as the user is on the corresponding page of the site. Similar to how the 'active' option works when creating links with regular text. Hope that makes sense

I'm just beginning to mess around with web design so forgive me if my techniques aren't optimal. Thanks
 
Last edited:
I prefer hand coding, but for Dreamweaver, you can do this :

1. Click 'Insert' from the menu nav
2. Hover over 'Image Objects'
3. Click 'Rollover Image'
4. Fill out the fields with your images

Hope that helps, post back if you have trouble.

EDIT: I misread your post, How are your pages setup, do you have a separate file for each page?

If so, apply a class to the corresponding navigation button on each page. Use css to have that be the background image instead of the default.
Example (style is in header) (menu in body)
Code:
<style type="text/css">
.active {
	background:	url(image/path.jpg);
}
</style>


<ul>
	<li>Menu 1</li>
	<li class="active">Menu 2 (active page)</li>
	<li>Menu 3</li>
</ul>
 
basically I have a div container with a central container for content. Off to the left and the right inside this main container I have tables that contain the image buttons. When the user gets to the main page the 'Main&#8217; image inside the table cell should display its rollover image. If they click on 'Media&#8217;, the image for that button should display its rollover image as long as the user is on that page and so on. I&#8217;m certainly welcome to an easier, better approach if there is one. This method seems to be doing what I want pretty easily so far except for this problem.
 
Could you post your code & let me know if you have a separate file for each page or you're using some template/framework. There's going to be different ways to handle this depending on how you have everything set up.
 
Could you post your code & let me know if you have a separate file for each page or you're using some template/framework. There's going to be different ways to handle this depending on how you have everything set up.

This.

OP, are you writing from scratch or using a framework?
 
Off to the left and the right inside this main container I have tables that contain the image buttons.

Gathering from your post basically you have 2 links Main and Media. You want to display the image link for the page that you are on in the 'roll-over' state permanently.
In other words don't use a roll over for the Main link when you are on the main page, instead use an regular image link. Only make sure the image used as the link is the same image used for the Main link when it is in the 'roll-over' state. Like-wise for Media. Hope i got that right!
 
Back
Top