How To Make Button Hover When Clicked

Ask the community
,
1

Hello,

I have 3 buttons overtop of a slideshow. Each button corresponds to a different slide on the slideshow. For example when I click button1 it goes to the first slide on the slide show, same with button2 to the second slide and button3 to the third.

What I’m trying to do is that when you click any of the buttons, that buttons changes colour (basically stays on the hover effect) showcasing that thats the slide you are on. So if i click button1 and it brings me to slide1, I want that button to change colour (remain on a hover effect) until another button is clicked, where then that other button would change colour.

Here’s the code I have which allows me to link each button to a slide. Would I need to add something to this or create a new code? Please let me know and include a code if you can

thank you.

$w.onReady(() => {
$w( “#button61” ).onClick(()=> {$w( “#fullWidthSlides2” ).changeSlide( 0 )})
$w( “#button56” ).onClick(()=> {$w( “#fullWidthSlides2” ).changeSlide( 1 )})
$w( “#button62” ).onClick(()=> {$w( “#fullWidthSlides2” ).changeSlide( 2 )})
})

2 
$w.onReady(() => { 
   $w("#button61").onClick(()=> {
      $w("#fullWidthSlides2").changeSlide(0)
      $w("#button61").style.backgroundColor="rgb(155,255,55)"
   })
   $w("#button56").onClick(()=> {
      $w("#fullWidthSlides2").changeSlide(1)
      $w("#button56").style.backgroundColor="rgb(155,255,55)"
      })  
   $w("#button62").onClick(()=> {
      $w("#fullWidthSlides2").changeSlide(2)
      $w("#button62").style.backgroundColor="rgb(255,0,0)";
   })
})

You will have to complete the code by your own…

3

Hey, can you give more detail> i am happy to help.

4

Thank you for your help! The only thing is that I want the button to change back to its original colour when another is clicked. I’m not sure how I can do that.

5

Hey! I want the button to change back to its original colour when another is clicked. Here is the code I currently have.

$w.onReady(() => {
$w( " #button61 " ).onClick(()=> {
$w( " #fullWidthSlides2 " ).changeSlide( 0 )
$w( " #button61 " ).style.backgroundColor=“rgb(155,255,55)”
})
$w( " #button56 " ).onClick(()=> {
$w( " #fullWidthSlides2 " ).changeSlide( 1 )
$w( " #button 56" ).style.backgroundColor=“rgb(155,255,55)”
})
$ w( " #button62 " ).onClick(()=> {
$w( " #fullWidthSlides2 " ).changeSlide( 2 )
$w( " #button 62" ) .style.backgroundColor=“rgb(255,0,0)”;
})
})

6

@pierredalati
This should be done very easy.

You have 3-Buttons.
You press BUTTON-1 and the color of this button changes, so why not just expand the code a little bit and also change color of the two other buttons simultaniously?

$w.onReady(() => { 
  $w("#button61").onClick(()=>{
    $w("#fullWidthSlides2").changeSlide(0)
    $w("#button61").style.backgroundColor="rgb(155,255,55)"
    $w("#button56").style.backgroundColor="rgb(55,55,55)"
    $w("#button62").style.backgroundColor="rgb(55,55,55)"
  })

  $w("#button56").onClick(()=> {
    $w("#fullWidthSlides2").changeSlide(1)
    $w("#button56").style.backgroundColor="rgb(155,255,55)"
    $w("#button61").style.backgroundColor="rgb(55,55,55)"
    $w("#button62").style.backgroundColor="rgb(55,55,55)"
  })      

  $w("#button62").onClick(()=> {
    $w("#fullWidthSlides2").changeSlide(2)
    $w("#button62").style.backgroundColor="rgb(255,0,0)";
    $w("#button61").style.backgroundColor="rgb(55,55,55)"
    $w("#button56").style.backgroundColor="rgb(55,55,55)"
  })
})
7

@russian-dima Great, this is what I needed, thanks!

How to I make it so that the first one is automatically applied when you open the site.

$w.onReady(() => {
$w( “#button61” ).onClick(()=>{
$w( “#fullWidthSlides2” ).changeSlide( 0 )
$w( “#button61” ).style.backgroundColor= “rgb(52,191,82)”
$w( “#button56” ).style.backgroundColor= “rgb(55,55,55)”
$w( “#button62” ).style.backgroundColor= “rgb(55,55,55)”
})

$w( “#button56” ).onClick(()=> {
$w( “#fullWidthSlides2” ).changeSlide( 1 )
$w( “#button56” ).style.backgroundColor= “rgb(52,191,82)”
$w( “#button61” ).style.backgroundColor= “rgb(55,55,55)”
$w( “#button62” ).style.backgroundColor= “rgb(55,55,55)”
})

$w( “#button62” ).onClick(()=> {
$w( “#fullWidthSlides2” ).changeSlide( 2 )
$w( “#button62” ).style.backgroundColor= “rgb(52,191,82)” ;
$w( “#button61” ).style.backgroundColor= “rgb(55,55,55)”
$w( “#button56” ).style.backgroundColor= “rgb(55,55,55)”
})
})

8

@pierredalati

$w.onReady(() => {   
$w("#fullWidthSlides2").changeSlide(0) 

$w("#button61").onClick(()=>{    $w("#fullWidthSlides2").changeSlide(0)    $w("#button61").style.backgroundColor="rgb(52,191,82)"    $w("#button56").style.backgroundColor="rgb(55,55,55)"    $w("#button62").style.backgroundColor="rgb(55,55,55)"  })  $w("#button56").onClick(()=> {    $w("#fullWidthSlides2").changeSlide(1)    $w("#button56").style.backgroundColor="rgb(52,191,82)"    $w("#button61").style.backgroundColor="rgb(55,55,55)"    $w("#button62").style.backgroundColor="rgb(55,55,55)"  })        $w("#button62").onClick(()=> {    $w("#fullWidthSlides2").changeSlide(2)    $w("#button62").style.backgroundColor="rgb(52,191,82)";    $w("#button61").style.backgroundColor="rgb(55,55,55)"    $w("#button56").style.backgroundColor="rgb(55,55,55)"  })})