I am fairly new to dotnukenet as well, but I would like to share what I know about creating a roll over menu using images as I did it in dotnukenet.
If you know how to use photoshop, you will need it to make transparent menu images and upload them to dotnukenet and use CSS (custom style sheet) to spice up your transparent menu images with a darker or lighter background. If you can't use photoshop, you may use any photo editor that you are comfortable editing images with. You need to create two versions of your menu images.
When you say "image roll over" menu, it could contain two background versions of your images in which half of the image will show at any one time once your mouse rolls over the image and the image changes color. You have to make sure that the image you're going to use for roll over is twice the height of the image that you will need to use in your site. If your image (foreground) size is about 120 pixels x 60 pixels, the background image should be twice the height of the foreground image: 120 pixels x 120 pixels.
Upload a transparent image menu (.gif), with the same size as your foreground image (120px x 60px). Upload this in your dotnetnuke site settings in the admin menu. Then you need to point your image menu within the CSS which is known as targeting. You can apply a CSS class within the skin or add this as a CSS class to the XML file. By doing this, when you are in an HTML code, you need to create a table cell containing the name of your image menu as a "banner". To target the banner image, you would tell the CSS to look within the "banner" table cell for an anchor link containing an image.
td# banner a img
Then you have to upload the background image of the image menu. You use the DNN file manager or any file transfer protocol that you use to upload the background image. DNN file manager will be your root folder for the images that you have uploaded.
You may need to create additional CSS for your DNN site through style sheet editor in the site settings area of the admin. Inside the CSS you will need to fix the position of two states to link two images menu, one for the general appearance and another for the roll over appearance.
This is the HTML of the general appearance of your foreground image:
td#banner a img{
background:url(portals/0/background1.gif) scroll no-repeat top;
width:225px;
height:78px;
}
And this is the HTML of the roll over appearance of your background image:
td#banner2 a:hover img{
background:url(/portals/0/background2.gif) scroll no-repeat bottom;
width:225px;
height:78px;
}
Please check the changes in the position of the background2 so it is now positioned at the bottom, while the foreground image is at the top. When you roll over your mouse on the image, the image will change from foreground to background.