Asking For A Little Help From A Coder

Whatever... 😉
Post Reply

Topic author
Neves
Active Member
Posts: 30
Joined: 15. February 2019 18:07
phpBB.com User: Neves Projects
Contact:

Asking For A Little Help From A Coder

Post 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.
Image
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
User avatar

Kirk
Dev
Posts: 1937
Joined: 27. July 2010 18:02
phpBB.de User: Kirk
Contact:

Re: Asking For A Little Help From A Coder

Post by Kirk »

How's the coding?
Gruß Udo

Topic author
Neves
Active Member
Posts: 30
Joined: 15. February 2019 18:07
phpBB.com User: Neves Projects
Contact:

Re: Asking For A Little Help From A Coder

Post 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>&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
Image

I have the buttons made but I don't know the code to make it change from one button to the other
User avatar

talonos
Portal Specialist
Posts: 241
Joined: 7. June 2009 15:12
phpBB.com User: talonos

Re: Asking For A Little Help From A Coder

Post by talonos »

this link may help you with what your after.


https://stackoverflow.com/questions/180 ... n-imghover
Creating board3 website? check the sites out below for board3 compatible extensions
Talonos: Pretereo stormrage EU OFFLINE!

Topic author
Neves
Active Member
Posts: 30
Joined: 15. February 2019 18:07
phpBB.com User: Neves Projects
Contact:

Re: Asking For A Little Help From A Coder

Post 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
User avatar

talonos
Portal Specialist
Posts: 241
Joined: 7. June 2009 15:12
phpBB.com User: talonos

Re: Asking For A Little Help From A Coder

Post 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.
Creating board3 website? check the sites out below for board3 compatible extensions
Talonos: Pretereo stormrage EU OFFLINE!
User avatar

Kirk
Dev
Posts: 1937
Joined: 27. July 2010 18:02
phpBB.de User: Kirk
Contact:

Re: Asking For A Little Help From A Coder

Post by Kirk »

it can also do it with pure css

Image
Gruß Udo

Topic author
Neves
Active Member
Posts: 30
Joined: 15. February 2019 18:07
phpBB.com User: Neves Projects
Contact:

Re: Asking For A Little Help From A Coder

Post by Neves »

How did you do that with .css Kirk ?
User avatar

talonos
Portal Specialist
Posts: 241
Joined: 7. June 2009 15:12
phpBB.com User: talonos

Re: Asking For A Little Help From A Coder

Post by talonos »

Neves wrote: 17. February 2019 22:46 How did you do that with .css Kirk ?
my example is CSS.
Creating board3 website? check the sites out below for board3 compatible extensions
Talonos: Pretereo stormrage EU OFFLINE!
User avatar

Kirk
Dev
Posts: 1937
Joined: 27. July 2010 18:02
phpBB.de User: Kirk
Contact:

Re: Asking For A Little Help From A Coder

Post by Kirk »

Neves wrote: 17. February 2019 22:46 How did you do that with .css Kirk ?
Look for PM
Gruß Udo

Topic author
Neves
Active Member
Posts: 30
Joined: 15. February 2019 18:07
phpBB.com User: Neves Projects
Contact:

Re: Asking For A Little Help From A Coder

Post by Neves »

Thank You So Much Kirk
I appreciate that Thank you
Post Reply

Return to “Small talk”