Page 1 of 1
Asking For A Little Help From A Coder
Posted: 17. February 2019 04:34
by Neves
Forum is
Small Talk
so here goes.
I need a little help from a coder, either to help or point me to where I can find my answer.
I have a separate html page with links that I added to my forum, it creates a links bar just below the one that's already there and I can add as many links as I want, I created my own button as links, please see pic.
I also created other buttons the same as those but in red instead of blue.
What I needed help with is I whated the buttons to switch from the blue button to the red button when the courser goes over it.
Is there any one that can help or point me to a tutorial ?
Thanks
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 08:35
by Kirk
How's the coding?
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 13:30
by Neves
Hi Kirk
In
overall_header.html I put this
<!-- INCLUDE navbar2.html -->
then i made a new Navbar that I renamed
navbar2
and put this code in it
Code: Select all
<div class="navbar" role="navigation" style="margin-top:4px">
<div class="inner">
<span class="crumb" {$MICRODATA}><a href="http://www.paypal.me/NProjects466"><img src="http://www.nevesprojects.com/pics/paypaldonation.jpg" itemprop="url" accesskey="h" data-navbar-reference="index"></a></span>
<span class="crumb" {$MICRODATA}><a href="http://www.nevesprojects.com/sales/"><img src="http://www.nevesprojects.com/pics/sales.jpg" itemprop="url" accesskey="h" data-navbar-reference="index"></a></span>
<span class="crumb" {$MICRODATA}><a href="http://www.nevesprojects.com/video/"><img src="http://www.nevesprojects.com/pics/videosite.jpg" itemprop="url" accesskey="h" data-navbar-reference="index"></a></span>
<span class="crumb" {$MICRODATA}><a href="http://nevesprojects.com/arcade.php"><img src="http://nevesprojects.com/pics/arcade.jpg" itemprop="url" accesskey="h" data-navbar-reference="index"></a></span>
</div>
</div>
all works good, I would just like to have a mouse over feature like in the pic below
I have the buttons made but I don't know the code to make it change from one button to the other
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 13:47
by talonos
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 15:50
by Neves
Thanks talonos
but I think that's showing me how to change colors of button.
I have 2 buttons one is blue the other is red
the blue button is
sales_blue.jpg and the red button is
sales_red.jpg
I would like to have it that when I put my mouse over
sales_blue.jpg it will switch to
sales_red.jpg
Please see this link below and put mouse over the card and you will see what I mean
https://www.tutorialrepublic.com/codela ... r-with-css
I just don't know how to use that code with what I have
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 17:08
by talonos
Code: Select all
<style type="text/css">
.FIRSTBUTTON {
height: 20px;
width: 85px;
background: url("sales_blue.jpg") no-repeat;
}
.FIRSTBUTTON:hover {
background: url("sales_red.jpg") no-repeat;
}
</style>
<span class="crumb" {$MICRODATA}><a href="http://www.nevesprojects.com/sales/" itemprop="url" accesskey="h" data-navbar-reference="index"><div class="FIRSTBUTTON"></div></a></span>
FIRSTBUTTON <---- class name so can be change to something like "salesbutton"
you'll need to add the image height and width to place the image correctly
background is where you'll assign the image instead of using the <img> tag
using <img> tag for the code would make hover need to have allot more code as it would require javascript but its easerly obtainable and more crossbrowser compatable using css.
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 19:31
by Kirk
it can also do it with pure css
Re: Asking For A Little Help From A Coder
Posted: 17. February 2019 22:46
by Neves
How did you do that with .css Kirk ?
Re: Asking For A Little Help From A Coder
Posted: 18. February 2019 01:48
by talonos
Neves wrote: ↑17. February 2019 22:46
How did you do that with .css Kirk ?
my example is CSS.
Re: Asking For A Little Help From A Coder
Posted: 18. February 2019 05:49
by Kirk
Neves wrote: ↑17. February 2019 22:46
How did you do that with .css Kirk ?
Look for PM
Re: Asking For A Little Help From A Coder
Posted: 18. February 2019 10:31
by Neves
Thank You So Much Kirk
I appreciate that Thank you