3 Images - Post ID 204562
bough
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.
Eric Rohloff
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>
<!--
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
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
Jo Rice
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
(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
bough
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; }
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>
<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.
bough
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
jamo
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'); }
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>
<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:)
bough
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 
And then in the body..
It's just showing text, not the buttons, blue text, and regular link colors.
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'); }
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>
<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.
bough
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!!
Thanks James!!
jamo
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.
