create a html page with 3 state buttons using photoshop

Posted on 2009-04-21
Last Modified: 2013-12-25
I am building an app where for part of it I do the following -

User opens up a html object with a definitive size e.g. 400x300

For ease of use I use dreamweaver and do the following - make margins 0 and
just create a 400x300 image in photoshop and link it in. Currently then what i do is create
a button (3 stages, e.g. black when not active, red when rolled over and yellow when clicked down) I can then insert the button through the software and place it in the right place. But these
buttons are not part of the html page, they are on top of it, what i want to do is actually have a
3 state button inside the html - how do i do that
Question by:nathan1038
    LVL 19

    Expert Comment

    Firstly, html supports 4 button states; link, active, visited, and hover. If you want onclick, or onmousedown, your solution will require javascript.

    Secondly, "User opens up a html object with a definitive size e.g. 400x300" is an ambiguous description. Specifically what are you referring to as an html object?

    Lastly, what is the purpose of the button and have you at made an attempt to mock up this page in DW yourself?

    Author Comment

    Its the software I use that creates .exe's. To save you time let me say this,

    I need to create a photoshop type website with buttons so need to know how to put one of those buttons
    in there.

    I tell you what, why don't you tell me the code for an up / over / down (not visited as I do not require this)
    and I will try and see if i can make up a prototype and continue this question on from there

    Author Comment

    I guess what i am after is a photoshop website type page with slices
    LVL 13

    Expert Comment

    Usage is
    a:link {color:#FF0000} /* unvisited link */
    a:visited {color:#00FF00} /* visited link */
    a:hover {color:#FF00FF} /* mouse over link */
    a:active {color:#0000FF} /* selected link */

    refer this
    LVL 26

    Accepted Solution

    Hi Nathen!

    What version of Photoshop do you have? Do you have an older version with Image Ready per chance?

    The reason that I ask is because it used to be very easy to set up button rollovers by designing the button on three layers, then exporting to Image Ready (which came with Photoshop vesions prior to CS2), defining the links and exporting the HTML.

    When Adobe bought out Macromedia they inherited Fireworks, a program that did a lot of what Image Ready did. Adobe became clever and stopped giving away Image Ready so that you would need to buy another program to do what you used to do in Photoshop.

    However, with the new versions of Dreamweaver, you can bring a photoshop file directly into dreamweaver and tell it which layer to show. This way you can bring the fill in three times, each showing a different button state (layer). As an added feature, if you edit the photoshop file, all three instances of the file in Dreamweaver gets updated.

    Dreamweaver then generates your html along with jpegs, png or gifs for your buttons.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
    In this tutorial viewers will learn a few layer organization tricks and tips to improve their workflow in Photoshop. Open a multi-layer document in Photoshop: View all your layers by going Window > Layers:  To make sure your layers can be identified…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now