create a html page with 3 state buttons using photoshop

Posted on 2009-04-21
Medium Priority
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

ID: 24200890
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

ID: 24201776
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

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

Expert Comment

ID: 24201987
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

David Brugge earned 2000 total points
ID: 24212072
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.

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses
Course of the Month16 days, 19 hours left to enroll

862 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