How do you make an image highlight on mouse over?

[StarGoon]

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.

[DarkShock]

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.

[StarGoon]

Here is what i am working with.

I want to take this image when it is idle and no mouse is on it...

And then have it do this when i scroll a mouse over it.

[DarkShock]

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:

[Simon Brown]

Something like this:

If you don't like the whole document.getElementById, look into jQuery.

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.

[DarkShock]

And there ya' have it. Nice job Simon.

[StarGoon]

Thanks for all your input guys. Go to http://www.corerebellion.com to see what ive been doing and why i am asking about those images. This is the first time ive ever coded or made images so i think it is looking good for first timing.

[Crazy Man Dan]

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.

[StarGoon]

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;">

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

[Ego Eram Reputo]

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