3 Images - Post ID 204488

User 2924428 Photo


Registered User
1,718 posts

Hey guy's, I was wondering what the HTML5 code would be to insert three images for 1 button, a regular button, a hover button, and a clicked button, if you can please help me with this as I am struggling to find anything online about it. :/
User 187934 Photo


Senior Advisor
20,267 posts
Online Now

This will get you started.:)
<style type="text/css">
<!--
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

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 38401 Photo


Senior Advisor
10,951 posts

html5 change image on mouseover
(that is the Google Search I did)

This is the link to the search. It's really not hard to find things Max, it's the terms that get us messed up lol, sometimes it's right under our noses if only we search the right terms in the right order :) Hope this helps!
https://www.google.com/search?q=html5+c … =firefox-a
User 2924428 Photo


Registered User
1,718 posts

a {img: button_reg_home.png; }
a:visited { img:button_sel_home.png; }
a:hover { img:button_hov_home.png; }
a:active { color:#FF0000; }


<div style="border:1px solid #808080;position:fixed; top:40%; right:0px;" id="rightcontainerBox">
<a class="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_home.png" width="150" height="40" alt="" ></span></a>
<a class="menu" href="http://www.kingfizz.com/about.html" title="menu"><span><img src="buttons/button_reg_about.png" width="150" height="40" alt="" ></span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_pic.png" width="150" height="40" alt="" ></span></a>
<a class="menu" href="http://www.kingfizz.com/contact.html" title="menu"><span><img src="buttons/button_reg_cont.png" width="150" height="40" alt="" ></span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span><img src="buttons/button_reg_shop.png" width="150" height="40" alt=""></span></a>
</div></div>


Hey Eric, I tried using this code for the img home, and I couldn't get it to work using a : {img "image code"} or a: {url:"image code"}. I'm not sure if I can use it since I already have a class named "A" as well. Take a look.
User 2924428 Photo


Registered User
1,718 posts

BTW Thanks Jo Ann, i'm trying to use some of the codes and it's still a work in progress :)
User 2147646 Photo


Registered User
233 posts

a { background-image: url('button_reg_home.png'); }
a:visited { background-image: url('button_sel_home.png'); }
a:hover { background-image: url('button_hov_home.png'); }

<div>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Link 1</span></a>
<a class="menu" href="http://www.kingfizz.com/about.html" title="menu"><span>Link 2</span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Link 3</span></a>
<a class="menu" href="http://www.kingfizz.com/contact.html" title="menu"><span>Link 4</span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Link 5</span></a>
</div>


This should work:)

User 2924428 Photo


Registered User
1,718 posts

Hello James, I did 3 different graphics for this one, here is the code i'm using, the images aren't showing up :(
a { background-image: url('button_reg_one.png'); }
a:visited { background-image: url('button_sel_one.png'); }
a:hover { background-image: url('button_hov_one.png'); }


And then in the body..
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Home</span></a>
<a class="menu" href="http://www.kingfizz.com/about.html" title="menu"><span>About Us</span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Pictures</span></a>
<a class="menu" href="http://www.kingfizz.com/contact.html" title="menu"><span>Contact</span></a>
<a class="menu" href="http://www.kingfizz.com" title="menu"><span>Forums</span></a>


It's just showing text, not the buttons, blue text, and regular link colors.
User 2924428 Photo


Registered User
1,718 posts

It works! I have to remember that CSS needs the files to be uploaded to the server to use the URL code :) Thanks James!!
User 2147646 Photo


Registered User
233 posts

Glad I could help :)


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.