Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    OK. I know this is probably a really simple question, but I need to know. How do I make my navigation work with rollovers? I have made the navigation layout and have sliced up the buttons, but now, how do I add rollover effects to these buttons and link them.

    I kinda know how to link them, just do it in dreamweaver. But, how do I get the rollover effects? I'm really stuck. I'd appreciate any help!

    Thanks in advance, will7.
    Rednerve
    Creative Freelance Design

  2.  

  3. #2
    Senior Member DesignBox's Avatar
    Join Date
    Apr 2004
    Posts
    340
    Member #
    5659
    Save the rollover bits again
    and in dreamweaver there should be an option somewhere for rollovers

  4. #3
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    OK, I'm just going out now, so I'll try it when I get back. I'm just learning photoshop you see, but I love it so far!

    EDIT: What do you mean? "Save the rollover bits again"? How do you save slices again? I have it all as one big image sliced up, so what do I do, select my slice and then save it again?
    Rednerve
    Creative Freelance Design

  5. #4
    Senior Member DesignBox's Avatar
    Join Date
    Apr 2004
    Posts
    340
    Member #
    5659
    File save for web

    Select the slices you want to save (with the shift button)and save as a different file name so you don't overwrite the existing buttons
    buttons_over.jpg/gif for example.

    In the property inspector in Dreamweaver there is somewhere where you select rollovers. I can't tell you exactly where because I use GoLive

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Photoshop does not create your rollovers for you. Dreamweaver can create that functionality for you. You need two images. Generally they should be very similar with only some differences between the 'normal state', and the 'rollover state'.

    Once you have your two images(however you get them) put them inside your images folder or whatever folder you are putting your images inside of for your website. Go into dreamweaver, put your cursor where you want the image to appear. Make sure the common toolbar is active at the top.

    You will see a 'Rollover Image' icon. When you press it a dialig box will appear asking for the name of the image, this is just a discriptave name, and for all purposes optional. You then must apply the orgional image or the normal state of the image. In the next field specifcy what image you want to appear when you rollover that image. The checkbox will specify if you want the rollover image to load with the rest of the site or if you want to wait until somebody rolls over it to load. Alternate text will be, obviously, the alt text that you would normally apply to any image. The last field specifys where you want to go when you click the image.

    All dreamweaver will then do is write the Javascript that will give the illusion of a rollover image. It is pretty simple and streight-forward. There is more then one way to achive this effect, such as the CSS :hover psudeo class. Personally I would rather use that method to create my rollovers, but if you want to do it that way you have to do it manually since dreamweaver does not have that functionality built in.


  7. #6
    Senior Member Trico's Avatar
    Join Date
    Feb 2004
    Location
    Nottingham, UK
    Posts
    894
    Member #
    5081
    [searchweb]ImageReady Rollovers[/searchweb]
    ImageReady is a more distant brother of Photoshop, which was installed alongside Photoshop, it's more suited for creating rollovers/animations and will output the code Javascript code for you, I can't gurantee how efficient the code will be; but it does get the job done.

  8. #7
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    Designbox...can you be like...really specific on how you do it. Or can anyone give me any tutorials on doing this?

    I am sorry I'm so stupid but hey, everyone has to learn somewhere!
    Rednerve
    Creative Freelance Design

  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    What DesignBox is saying is after you have saved the image you want to use for your button you need to save another one for the rollover. So you need TWO seperate images, and not to forget to name them differently or else you will overwrite one of them.

    I think my post was quite an indepth tutorial, but if you need further explination let me know.


  10. #9
    Senior Member
    Join Date
    Mar 2004
    Posts
    1,518
    Member #
    5220
    I get about that. But my problem, is that my nav is one big image sliced up. And when I open the sperate JPEGs, I cannot edit them as they are not .psd files. I'm new to photoshop (that is my only excuse for my dumbness).
    Rednerve
    Creative Freelance Design

  11. #10
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    You dont want to edit the jpgs, you want to only edit the psd and then save the result(s) as jpgs. Think of jpg only as a final image format, you would never want to edit a jpg unless you absolutly had to.

    What you should do is make your changes in your psd file and save only that slice. so say for instance you have a psd file(since you do) and you have it sliced up(since you do). There should be one clice that holds the button you want to save. Save that has a jpg(you already have). Now change that button somehow in photoshop(what you have not done yet). You might add another layer on top of the button, put some small graphic on it, change the font size, whatever. That will be your rollover state, now save that slice again to create your other jpg.

    Then follow my post above on how to get it working in dreamweaver.

    EDIT: trico's post below outlines this same process.



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com