Asking For A Little Help From A Coder

[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

[Kirk]

How's the coding?

[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>&nbsp;&nbsp;
				<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>&nbsp;&nbsp;
				<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>&nbsp;&nbsp;
				<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>&nbsp;&nbsp;


	</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

[talonos]

this link may help you with what your after.


https://stackoverflow.com/questions/180 ... n-imghover

[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

[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.

[Kirk]

it can also do it with pure css

[Neves]

How did you do that with .css Kirk ?

[talonos]

How did you do that with .css Kirk ?

my example is CSS.

[Kirk]

How did you do that with .css Kirk ?

Look for PM

[Neves]

Thank You So Much Kirk
I appreciate that Thank you