Image mouse over change

  1. 9 months ago

    dave d

    26 Aug 2019 Testers, Xojo Pro Australia

    I’m trying to find an efficient way to do a simple web task.

    What’s the best way to have an image that changes on mouse over and then back on mouse leave.

    Mouse enter and leave definitely is not the right way.

  2. Olivier C

    26 Aug 2019 Testers, Xojo Pro Europe (Belgium, France)

    I’d use the « normal » and « hover » state , available using WebStyles (or css and classes)

  3. dave d

    26 Aug 2019 Testers, Xojo Pro Australia

    That works ok for text, it’s an image I’m trying to show and switch between

  4. Maurizio R

    26 Aug 2019 Testers, Xojo Pro

    Have a look to this thread How to set backgound image to Webcontainer and Webbutton .
    The CSS background image property is used to display an image.

  5. Olivier C

    26 Aug 2019 Testers, Xojo Pro Europe (Belgium, France)

    You can create your own CSS rules and use different images for normal/hover state.

    Have a look here to see how you defined css, style and classes:

    HTML

    <div class="myclass"></div>

    CSS

    .myclass {
       background-image: url(‘image1.png');
       height: 70px;
       width: 120px;
    }
    
    .myclass:hover {
       background-image: url(‘image2.png');
    }
  6. dave d

    1 Sep 2019 Testers, Xojo Pro Australia

    thanks Oliver

or Sign Up to reply!