Image mouse over change

  1. 3 weeks ago

    dave d

    Aug 26 Pre-Release 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

    Aug 26 Pre-Release Testers, Xojo Pro Europe (Belgium, France)

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

  3. dave d

    Aug 26 Pre-Release Testers, Xojo Pro Australia

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

  4. Maurizio R

    Aug 26 Pre-Release 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

    Aug 26 Pre-Release 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

    Sep 1 Pre-Release Testers, Xojo Pro Australia

    thanks Oliver

or Sign Up to reply!