Rollover button in Photoshop

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 7730 Views - Last Post: 18 August 2011 - 03:03 AM

#1 omnicoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 05-May 11

Rollover button in Photoshop

Posted 09 June 2011 - 09:09 AM

I made a rollover button in Photoshop. Embedded the buttons into my HTML as .png files. My problem is, the rollover change happens before I put my mouse on the button. The mouse will be about 1/2'' away from the button. When the button rollover. Will someone please tell me how to correct this problem. I removed the background layer in Photoshop. That I made black. I now have the checker board showing with my buttons. I also put bevel and lighting effects on top of my buttons.

Is This A Good Question/Topic? 0
  • +

Replies To: Rollover button in Photoshop

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9384
  • View blog
  • Posts: 35,237
  • Joined: 12-June 08

Re: Rollover button in Photoshop

Posted 09 June 2011 - 09:29 AM

Well - let's see the button images and the code you are using for the roll over. The problem could be a million things - the top being your image slices have some fading gradient 0.5" away from the button center.
Was This Post Helpful? 0
  • +
  • -

#3 omnicoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 05-May 11

Re: Rollover button in Photoshop

Posted 09 June 2011 - 11:01 AM

View Postmodi123_1, on 09 June 2011 - 09:29 AM, said:

Well - let's see the button images and the code you are using for the roll over. The problem could be a million things - the top being your image slices have some fading gradient 0.5" away from the button center.

Here are the buttons and the code.

Attached image(s)

  • Attached Image
  • Attached Image

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9384
  • View blog
  • Posts: 35,237
  • Joined: 12-June 08

Re: Rollover button in Photoshop

Posted 09 June 2011 - 11:23 AM

First - just copy/paste your code in the post. (clearly using the code tags.)

Well your code is jacked up. Correct the apostrophes and double-quotes.

Hmm I can't see an image so either that didn't work, or work is blocking it.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>template</title> 
<link type="text/css" rel="stylesheet" href="mlmtemplate.css" />

</head>
<body>
  <div id="allcontent">
     <div id="header">
         This is testing the header section.
      </div>
<img src="button7A.png" onmouseover="src='button7B.png'" onmouseout="src='button7A.png'">

<p>
      This is the template for my business project.
sdjfajfjfasjfasdjf<br/>
jflkajsd;kfjlfj<br/>
dkfjkfjdkfjlkfj<br/>
jadkjfjfjfasjfk<br/>
djflkjfjdfjajf 
</P>
          </div>
</body>



</html>

Was This Post Helpful? 0
  • +
  • -

#5 omnicoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 05-May 11

Re: Rollover button in Photoshop

Posted 09 June 2011 - 11:55 AM

With the exception I stated initially about my rollover problem. My rollover worked just fine the way I have my quotes. In my HTML. I don't know of another way to code without help. if I remove my quotes. I am just starting to learn how to write code. Is there a certain way I am suppose to upload my .png file images. So you can see them? I am sending the buttons images also in .psd format. I see my rollover button images in my second post.

Attached File(s)


This post has been edited by stayscrisp: 11 June 2011 - 12:54 PM
Reason for edit:: Don't quote the post above you :)

Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9384
  • View blog
  • Posts: 35,237
  • Joined: 12-June 08

Re: Rollover button in Photoshop

Posted 09 June 2011 - 12:01 PM

My work must be blocking the attached images again. I can't open a PSD here.
Was This Post Helpful? 0
  • +
  • -

#7 omnicoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 05-May 11

Re: Rollover button in Photoshop

Posted 09 June 2011 - 12:49 PM

Here are the rollover button images in .jpeg format.
Attached ImageAttached Image

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by stayscrisp: 11 June 2011 - 12:55 PM

Was This Post Helpful? 0
  • +
  • -

#8 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9384
  • View blog
  • Posts: 35,237
  • Joined: 12-June 08

Re: Rollover button in Photoshop

Posted 09 June 2011 - 04:40 PM

Well yeah - how much darn white space around the button do you need? The mouse over and junk all work on the IMAGE as a WHOLE. If you want just the colored button areas cut out all that white space. Not to mention have only one button per image.
Was This Post Helpful? 0
  • +
  • -

#9 omnicoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 05-May 11

Re: Rollover button in Photoshop

Posted 10 June 2011 - 07:26 AM

I thought my problem had something to do with the background(white space). I was trying to remove the white space. Which I made as a black background in Photoshop on my first layer.Thank you for the help.

This post has been edited by stayscrisp: 11 June 2011 - 12:55 PM

Was This Post Helpful? 0
  • +
  • -

#10 Tangela  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 08-October 10

Re: Rollover button in Photoshop

Posted 03 July 2011 - 06:54 AM

Hey man I am not sure if the problem is fixed yet but you can do rollover in css.
#yourimage
{
  width: 100px;
  height: 100px;
  background-image(image.png);
}

#yourimage:hover
{
  width: 100px;
  height: 100px;
  background-image(rollover.png);
}



Hope this helps :)
Was This Post Helpful? 0
  • +
  • -

#11 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: Rollover button in Photoshop

Posted 08 July 2011 - 11:24 AM

Trust me when I say learn to do this entirely in CSS and javascript, it'll save you a ton of time on design and page load later.
Was This Post Helpful? 0
  • +
  • -

#12 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 126
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Re: Rollover button in Photoshop

Posted 25 July 2011 - 03:54 PM

View PostTangela, on 03 July 2011 - 02:54 PM, said:

Hey man I am not sure if the problem is fixed yet but you can do rollover in css.
#yourimage
{
  width: 100px;
  height: 100px;
  background-image(image.png);
}

#yourimage:hover
{
  width: 100px;
  height: 100px;
  background-image(rollover.png);
}



Hope this helps :)

Even better you can use a single image and only display half of it, then "move" it (by changing the background-position property) in the hover pseudo-class.

What I'm talking about

This post has been edited by RetardedGenius: 25 July 2011 - 03:55 PM

Was This Post Helpful? 0
  • +
  • -

#13 Finney_3  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 75
  • Joined: 17-April 10

Re: Rollover button in Photoshop

Posted 16 August 2011 - 10:36 AM

Has this issue been solved yet? I would say to use css for your roll over. When you slice out your buttons I usually make shut the background off so its transparent and then I save them in png. This will allow for your to easily slice the button as close as you can. I'm not a css3 buff but you can make your buttons using the correct tags and then just reuse the image for rollover with either a gradient or different color depending on what your trying to do with it. Hopefully this has been solved.
Was This Post Helpful? 0
  • +
  • -

#14 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: Rollover button in Photoshop

Posted 16 August 2011 - 01:29 PM

Finney, you really need to stop answering topics with a simple rehash of what everyone else has already said. I'm far more likely to negative rep for that, and considering how often you've been doing it...

These topics are old, and while that doesn't constitute as a necro thread you should know that it's frowned upon to drag up old topics to say what has already been said.
Was This Post Helpful? 0
  • +
  • -

#15 Finney_3  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 75
  • Joined: 17-April 10

Re: Rollover button in Photoshop

Posted 17 August 2011 - 01:27 AM

Lemur I'm not sure if you are aware of this but people tend to say they same stuff when they are talking about sentences. There is nothing wrong with giving my 2 sense as you felt you wanted. Are you young? You giving me a neg rep doesnt do anything for me. Rep in your cyber world must be a currency which in my word means nothing. Instead of trolling around threads and worry about what others are saying and doing in order to try and help with there input just don't read the information provided. I now know where the neg rep came from. I like to look through the forums threads to see if there is something that I might be able to assist in. I then go right down to the bottom and answer with my thoughts.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2