OnMouseOver Button

[TavoxPeru 0]

Hi, this little code is perfect for adding short instructions on a submit button, simply add your text to the mouseover event of the button, for example:<input type="submit" value="Click here" onmouseover="this.value='== Just click once! =='" onmouseout="this.value='Click here!'">regards,

[pyost 0]

This is a very handy function, and there is another place where it is quite useful. In CSS, you can create buttons that change their background colour when the mouse pointer is above them. However, this can be achieved by using JavaScript and HTML.

<td width="60" onmouseover="this.bgColor='#9db5c8';" onmouseout="this.bgColor='#c0d3e7';">

The table cell will be #c0d3e7 until the mouse pointer comes to it. Then it will become #9db5c8.

[Velocity 0]

Very useful little snippet, Tavox. Can you use a code for when you put your mouse over a picture, a little box comes up next to the cursor with writing? If you know what I'm talking about, I need that code. Its a very useful little one as wellThanks-Kyle

[seec77 0]

The code for the alternate text is something like this:

<img src="..." alt="Alternate text here!" />

You should give all your images (other than spacer/background ones) alternate texts, so that users with vision impairment or text-based browsers will be able to browse your site easily. Alt also helps when you have a broken image, i.e. an image not loading correctly for the user - the user will still be able to see what was supposed to be in the picture. It has nothing to do with Javascript or CSS!

[TavoxPeru 0]

Very useful little snippet, Tavox. Can you use a code for when you put your mouse over a picture, a little box comes up next to the cursor with writing? If you know what I'm talking about, I need that code. Its a very useful little one as wellThanks

-Kyle

one way is by using the alt attribute as seec77 said, the other way is by using the title attribute, and the syntax is similar as the alt attribute:

<img src="your_image_file" alt="your alternate text goes here" title="your title text goes here" ...>

Now, i recommend that you use both attributes with the same text because with firefox only works one of them, i'm not sure which one is, sorry but in this moment i dont remember.

Best regards,

[pyost 0]

The "title" attribute is the one you should use. A long time ago () "alt" was the only attribute, and it was supposed to be shown when the image can't be displayed. However, many people used it to give image a title. So as to solve this problem, the "title" tag was introduced. Now, since the problem was solved, "alt" is used to describe image in case it doesn't display, whereas "title" gives image a title which is displayed as a tooltip.

[eliments 0]

Useful for sure.... please inform me of any other useful tips.... that makes things much simpler.The code for something even that simple was not so fun to always have to write. :/Thanks for the tip^^

[TavoxPeru 0]

This is a very handy function, and there is another place where it is quite useful. In CSS, you can create buttons that change their background colour when the mouse pointer is above them. However, this can be achieved by using JavaScript and HTML.

 

<td width="60" onmouseover="this.bgColor='#9db5c8';" onmouseout="this.bgColor='#c0d3e7';">

The table cell will be #c0d3e7 until the mouse pointer comes to it. Then it will become #9db5c8.

That's correct, you can achieve that with JavaScript and HTML but only to say that this can also be achieved with the CSS's :hover pseudo-class that everyone use with the HTML's A tag, but do you know that you can also use this pseudo-class with other elements not only with the A tag???? honestly i don't, and i just discover it a few days ago.

 

I'm talking about the :hover, :active and :focus pseudo-classes, you can use these pseudo-classes with other HTML elements like forms, input boxes, legend, fieldsets, etc. to achieve awesome effects in your pages, and the nice thing is that when you validate your CSS you dont worry about it because are VALID, but as usual this doesn't work fine with IE.

 

So, please visit the following page Contact Us first using Firefox and then with IE to see what i'm talking about.

 

Best regards,

[pyost 0]

but as usual this doesn't work fine with IE

Of course... Luckily, there are several ways of getting rid of this problem, or even avoiding it. First of all, you should try to create the necessary effect with <a> only, since it is sure to work in all browsers. If this, however, isn't possible, you can try using the whatever:hover hack. It is a .htc file that enables hover functionality for all elements in Internet Explorer. Here is the link: http://peterned.home.xs4all.nl/csshover.html

 

Personally, I don't like using any hacks. Instead, I tend to make my pages the same in all browsers by using pure, valid CSS, with no JavaScript at all. However, I do give the advantage to JavaScript, since it is not a hack, but a normal option. If someone does not have JavaScript enabled, it's his/her problem - that's like living in the past!

[sparkx 0]

Hi, this little code is perfect for adding short instructions on a submit button, simply add your text to the mouseover event of the button, for example:<input type="submit" value="Click here" onmouseover="this.value='== Just click once! =='" onmouseout="this.value='Click here!'">

I use this function a lot mainly for roll-over effects as it is easyer then uploading a .swf (Macromedia flash 8 file). You could use it for text but its cooler if its images. There are examples everywhere. Ever been to a website with buttons that glow when your mouse is over them? That what it is. I think everyone should lean this command because it can be added on-to to make some pretty cool effects.
Thanks,
Sparkx

[iGuest 3]

thanks for help

OnMouseOver Button

 

Replying to pyost

 

Hey,

Thanks for giving the code for mouseover colour change..

Cheers

Amrit

 

-reply by amrit