Newbie help with CSS Rollover

[Garindan]

Hi, would somebody be able to advise me please? I'm just starting out with web design so please be gentle :)

I have started building a site in dreamweaver and have just added image rollovers, only to find that IE6 is blocking the rollovers as they use javascript (with its 'active content' block). Will it still block them in this way if the site is finished and uploaded to the web?

If so can i do anything? I had a quick look at using CSS rollovers but all the guides i've found use lots of code, and i've hardly learnt any so far, i don't know where to start :(

Unfortunately there isn't much option for changing the design as it was just meant to be an update to the site, not a total redesign. Strangely i'm finding that rollovers created in dreamweaver (which im using) have a problem, as do rollovers made in adobe imageready, however when the site was first done the rollovers were done in imageready and the site was done in golive and there wasn't a problem.

So what can i do? Would anybody be willing to tell me an easy way to create CSS Image Rollovers in Dreamweaver? I am fairly new to this but i do know how to add a CSS style to a cell. If someone would be willing to take me through it i would be extemely gratefull. Any help would be greatly appreciated. Thanks in advance.

[jo1ene]

My advise is to learn HTML and CSS and ditch the editors. I just fixed a web site that had rollovers, made in dreamweaver, that would crash the whole computer. The home page had 90 pages of printed code. I mad an exact duplicate in 1.5 pages. Surely that suggests something?

Also, CSS rollovers only work on the <a> element. You could set a background image for a:link and define a hover image for a:hover. You would have to have some text for the link of course. This would also have to be done manually.

<style>
a:link {
background-image: url(bg1.gif);
background-position: top left;
background-repeat: no-repeat;
}
a:hover {
background-image: url(bg2.gif);
}
</style>

Thr are SO MANY tutorials for HTML and CSS out there. Just search for 'em. It would behoove you to progress towards doing your design work manually.

[rocknbil]

Garindan - the blocking you are getting tells me you are on Windows XP and that you are checking these from your local machine, correct? Upload them to your server and the blocked content message should go aeay. Or just click the security bar and allow the active content.

If you want a good WYSIWYG graphics editor- if you have Dreamweaver you probably got it from Studio MX. If you did, Fireworks is ine of the bundled programs. It's not just a G.E., it also has functions to create and export rolllovers. If you don't have it, get it and you can point and click your way to a solution.

I too agree with hand-coding, but hope this helps.

[DrDoc]

There has been some pretty good discussion on the topic before, with examples of how to accomplish pure CSS rollovers.
[webmasterworld.com...]

[Garindan]

Thanks alot for your replies everyone, i appreciate it. I will indeed learn pure coding, but dreamweaver is just a start.

Thanks for the reply about blocked javascript being a local thing, i had found that out only recently so the javascript will be fine when on the web.

I will still look into CSS rollovers as it seems they are much more welcomed by the web designer community.

Thanks again everyone. :)