New Topic/Question
Reply
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.
15 Replies - 5615 Views - Last Post: 18 August 2011 - 03:03 AM
MultiQuoteReplies To: Rollover button in Photoshop
#2
modi123_1
- Suitor #2
-
Reputation: 6602
- Posts: 23,924
- 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
- New D.I.C Head
Reputation: 0
- Posts: 16
- Joined: 05-May 11
Re: Rollover button in Photoshop
Posted 09 June 2011 - 11:01 AM
modi123_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 File(s)
-
index.html (747bytes)
Number of downloads: 86
Was This Post Helpful?
0
#4
modi123_1
- Suitor #2
-
Reputation: 6602
- Posts: 23,924
- 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.
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
- New D.I.C Head
Reputation: 0
- 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)
-
Number of downloads: 58 -
Number of downloads: 56
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
#8
modi123_1
- Suitor #2
-
Reputation: 6602
- Posts: 23,924
- 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
- New D.I.C Head
Reputation: 0
- 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
- New D.I.C Head
Reputation: 0
- 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.
Hope this helps
#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
#12
RetardedGenius
- >>──(Knee)──►
-
Reputation: 125
- Posts: 555
- Joined: 30-October 10
Re: Rollover button in Photoshop
Posted 25 July 2011 - 03:54 PM
Tangela, 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.
Hope this helps
#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
- D.I.C Head
Reputation: 2
- Posts: 67
- 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
- OpenBSD Head
-
Reputation: 1120
- Posts: 3,072
- 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.
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
- D.I.C Head
Reputation: 2
- Posts: 67
- 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
|
|
| 