rollover form and click changing background color question

 say you have the following

<input name="formbox1" type="text" class="test" style="background-color:#b6c9ea" tabindex="2" onFocus="'#d4eefd';" onBlur="'#b6c9ea';" onMouseOver="'#d4eefd';" onMouseOut="'#b6c9ea';" size="20">

First how do i change the colors to background image loads so i can use the colors i want, secondly, if i want the user to be able to mouseover and have the color change, but click and have the mouseover color stay with that form ( without following the mouseover behavoiur again once i move the mouse off?) any suggestions would be great.

is there a way to do the mouseover and click attributes at the same time but obey the onclick once the mouse moves off?- this might be a ridiculous question, i just thought it would be cool to be able to see visually a little better which forms you haven't or have filled out depending on the color of them more than what text is in them-please feel free to give me your opinions on this.
Who is Participating?
alinaxConnect With a Mentor Commented:
.imagebg {
      background-attachment: fixed;
      background-image: url(imagedir/imagename.gif);
      background-repeat: repeat;

the image  can be any .gif, .png, ....

This was made in css and the styesheet was called imagebg.css.

You apply it to the form and then use the colours as you want.

This is an idea to change on mouse over and click

onMouseOver =" rollOver('#color',true)"
onMouseOut =" rollOver('#color',false)"
onMouseDown =" rollPress('#color',true)"
onMouseUp =" rollPress('#color',false)"
onClick =" rollClick('#color')">

You can use the same or different color anywhere. Give it a try.
toddkellerAuthor Commented:
thanks i will try it out and get back to you!-
toddkellerAuthor Commented:
i must be doing something wrong, i put this in the form tag, didn't know if i was supposed to get rid of the background style or not-i did and it changed to the onMouseDown color, but i get no action when i rollover it.? am i using the roll commands correctly?

<input name="form1" type="text" class="test" id="form1" style="background-color:#b6c9ea" tabindex="1" onMouseOver=" rollOver('#d4eefd',true)" onMouseOut=" rollOver('#b6c9ea',false)" onMouseDown=" rollPress('#d4eefd',true)" onMouseUp=" rollPress('#b6c9ea',false)" onClick="rollClick('#d4eefd')" size="30">
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

toddkellerAuthor Commented:
The first was what i was looking for thanks,
Can I see the site now?
Post url
Nice to help
toddkellerAuthor Commented:
heh, i wish!, it's got alot more to go, soon though, it is actually 2 sites working together with a software package in house, but i'll let you know when it's up, :)
I´m sure you forgot puttting the list of images that must be loaded for mouse over
Dreamweaver does it directly when inserting them.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.