Jump to content

How do you make an image highlight on mouse over?


Recommended Posts

I am trying to figure out how to make a image highlight when i scroll the mouse over it and cant find anything on it. I would love to get this problem solved, thanks.

Edit: I should try to be a little more clear i guess. I made a button type image and post it on my website but on that button instead of it being plain i was wondering how you can make it change to another color when you scroll the mouse over it. Something i thought would be simple seems to be harder then i thought cause i cant find out how to do it lol.

Link to comment
Share on other sites

I remember doing something just like that in my Web Design class a while back. You will have to make a second image of what you want the button to look like when you mouse-over it. After that you have to use a code that will change the picture when you mouse-over the button. I don't remember it, but maybe you can find it online. All you can do with Paint.NET is make the images, but the mouse-over effect is something done in HTML.

---- Gallery | Sig Tutorial | deviantART | Sig Videos | PhotoBucket ----

D                  E                  S                  T                  I                 N                  Y

Link to comment
Share on other sites

Yup. You're going to have to use an HTML code to make that happen. :wink:

I just found this site that will generate a code for you. Link

Hope it works. :wink:

---- Gallery | Sig Tutorial | deviantART | Sig Videos | PhotoBucket ----

D                  E                  S                  T                  I                 N                  Y

Link to comment
Share on other sites

You can also use CSS (and I do that on my site), but I had to put a DIV tag inside an A tag which the W3C validator didn't seem to like.

You could put a span inside of the anchor and set it to display:block.

What I generally do is put both the normal state and the hover state in a single image one on top of the other - so, say the link image is 30px tall, the final image would be 60px tall - then set the anchor to display:block and the image as the background with background-position:top. Then, on :hover, set it to background-position:bottom.

I am not a mechanism, I am part of the resistance;

I am an organism, an animal, a creature, I am a beast.

~ Becoming the Archetype

Link to comment
Share on other sites

I got it to work in javascript and it works great but now im trying something wierd and it seems it should be simple. Seeing how some of you are coders i was wondering if you can see why this doesnt work. The mouse over works perfect but the mouse down does not. Let me know if you know anything.

This is in the sub of the html file.

onmouseout="image1.src=staticImage1.src;"

onmousedown="image1.src=clickimage1.src;">

homenav.gif

I figured onmousedown would work but its not. Your input would be greatly appreciated.

Link to comment
Share on other sites

This area of the forum is for General Discussions and Questions pertaining to Paint.NET. Not for HTML, CSS or Javascript questions and discussions. See the bar above the orange box where it says

Board index » Paint.NET Discussion » General Discussion & Questions

You'll be wanting to post any more questions in the Web Design thread in the Alfredo: Here

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...