Asking For A Little Help From A Coder

Whatever... 😉

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

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: 1954
Joined: 27. July 2010 18:02
phpBB.de User: Kirk

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 19:07
phpBB.com User: Neves Projects

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: 242
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 19:07
phpBB.com User: Neves Projects

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: 242
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: 1954
Joined: 27. July 2010 18:02
phpBB.de User: Kirk

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 19:07
phpBB.com User: Neves Projects

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: 242
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 23: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: 1954
Joined: 27. July 2010 18:02
phpBB.de User: Kirk

Re: Asking For A Little Help From A Coder

Post by Kirk »

Neves wrote: 17. February 2019 23: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 19:07
phpBB.com User: Neves Projects

Re: Asking For A Little Help From A Coder

Post by Neves »

Thank You So Much Kirk
I appreciate that Thank you

Return to “Small talk”