Reset button hover in form builder -...

User 2874450 Photo


Registered User
7 posts

I followed the instructions by @Philatgr8 to add in a reset button, but does anyone know in the code itself how to add a background hover image? I got my background image to work, but not the hover.

I was able to add my main and hover image for the Submit Button in the Coffee Cup Interface, but the custom reset button I can't seem to get the hover to work.

Any thoughts? Here is my code in the main form html page for the submit and reset buttons:
<div class="fb-footer" id="fb-submit-button-div" style="min-height: 1px;">
<input class="fb-button-special non-standard" id="fb-submit-button" style="border: currentColor; width: 100px; height: 41px; font-family: Helvetica, Arial; background-image: url('common/images/submit_2.png'); background-color: rgb(255, 255, 255);"
type="submit" data-regular="" value="" />
<input class="fb-button-special non-standard" id="fb-reset-button" style="border: currentColor; width: 100px; height: 41px; font-family: Helvetica, Arial; background-image: url('common/images/reset_2.png'); onmouseover: url('common/images/reset-hover_1.png'); background-color: rgb(255, 255, 255);"
type="reset" data-regular="" value="" />
</div>
User 187934 Photo


Senior Advisor
18,829 posts
Online Now

Hi Chris,
Try removing the apostrophes from the url
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2874450 Photo


Registered User
7 posts

Thanks so much for the response - sadly that didn't work :(
any other thoughts?

The image is showing in dreamweaver and is on the server - but the code just doesn't want to activate the hover/mouseover effect.
User 187934 Photo


Senior Advisor
18,829 posts
Online Now

You would be better off using a script.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2874450 Photo


Registered User
7 posts

not too sure what script/where to put it :(
User 187934 Photo


Senior Advisor
18,829 posts
Online Now

Try this.
<input class="fb-button-special non-standard" id="fb-reset-button" style="border: currentColor; width: 100px; height: 41px; font-family: Helvetica, Arial; background-image: url('common/images/reset_2.png'); background-color: rgb(455, 455, 455);" type="reset"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#fb-reset-button").hover(function () {
jQ(this).css({ "background-image": "url('common/images/reset_hover_1.png')" });
},
function () {
jQ(this).css({ "background-image": "url('common/images/reset_2.png')" });
}
);
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2874450 Photo


Registered User
7 posts

thanks so much for the help! That worked!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.