Rollover help

Okay,

I made a really nice logo for my website and it has FOUR text layers on it to be used as MAIN navigation for any page. The text layers are HOME | FORUMS | SHOP | CONTACT. Now, the text is part of the image. I am trying to add a rollover effect for each text layer. When a user mouses over, I want it to change to another color. Now I can't find a way to do this... all over google, I only find out to make rollovers on an image by itself or from an existing image, not only some parts of the image. You can see an example of what I am trying to do here: http://www.teamxbox.com. Right under their logo and ad space, or above the "feature" graphic, there are four buttons.

How can I do this? [flame="protection"]If you get mad at me for asking a basic question, then don't reply with a hate-response, if you will not tell me how to do it, at least tell me where I can go to learn this. I'm not looking for the answer, just want to know where to learn this from... if you give me the answer... more better for me .[/flame]

The code part you can get from just about any site - just view soruce. If you see the MM.... code its the roll over from dreamweaver, but it doesnt have to be that complicated.

For PS, just create your rollover a layer above your image, when you save using IR, you just select the rollover panel and you select the "over" state and show that layer.

I'm having a little dilemma with IR. Should I use image maps or slices for the text layers?

slices: That is what you split up your images with, so you can use the right kind of format for each image - ie. gif, jpg, png....

image maps: if you have, for instance a picture of a keyboard and you wanted to make several of the keys into buttons, but rather than trying to align them all in a table, you could just keep the image whole and give "hot" areas where they would be links. It's based on an x/y coordinate system from the edge of the image. Its either square/rectangle or polygon (the more the points the more you can mimic a rounded corners or circles.) Its tedious to do by hand, but with a tool, like in DW its simple.

What you want is (in IR)
window --> Rollovers...

Now that you have the panel open, select a new rollover state, just like you do to add a new layer (same icon. you'll see.)
Now this is the "over state". Now show your over state layer in your layers pallet. So what you just did is added a new state, showed the layer, then when you save optimised IR will add the html code for you. That way it saves 2 images for you. if you have 2 states.

Hi guys!

Can anyone help me, I'm trying to create a rollover effect on standard text in Dweaver. So the text with a link highlights or has an underline on mouseover.

I know you can do it in Iready with a rollover but surely there is a way to do it in Dweaver.

Thanks in advance

I would do it in ImageReady like marble explained and then export the source and open it in Dreamweaver. Should work fine and then you might be able to edit it, although I'm not sure. Going to go try that I think.

tom

ImageReady is a godsend, it will slice your image and put it into proper tables for you.

It's a huge timesaver. Use it.

Hmm.. If I do it in ImageReady its saved as .gif files which I can't edit in Dreamweaver.
Many pages are full of highlighted rollover text. The Teamphotoshop home page uses them aswell.

Thanks for replys anyway

Originally posted by muugen
Hmm.. If I do it in ImageReady its saved as .gif files which I can't edit in Dreamweaver.
Many pages are full of highlighted rollover text. The Teamphotoshop home page uses them aswell.

Thanks for replys anyway

IR doesnt save them as .gif's, you do. You need to explore IR a bit more.

Do it in ImageReady and export it. It will go into a folder called images and make a .html file for you. Open the .html file in Dreamweaver it should work.

tom