Find out if mouse is over an image for HtmlViewer

General
1

Following the discussion in Context menu for HtmlViewer I need to find out if the mouse is over an an image in the HtmlViewer (or WKWebviewMBS) or not.

According to

I need to add some sort of

me.EvaluateJavaScript("document.addEventListener('mouseover', function(e) { xojo.triggerWebEvent('cursorEvent', e.clientX + ':' + e.clientY + ':' + e.target.tagName); });")

according to ChatGPT. According to the docs "xojo.triggerWebEvent"should be " “executeInXojo”. How do I use this? I can’t find any example.

Confused…

Is there a simpler way to find this out? Is this possible at all?

2

executeInXojo is my lifeblood these days!

Let’s assume your image has an id of “SpecialImage” like so:

<img id="specialImage" src="path/to/your/image.jpg" alt="Special Image">

You’ll add script to your web page with event listeners for mouseenter and mouseleave like so:

// Getting the image element by its ID
const image = document.getElementById('specialImage');

// Adding event listeners for mouseenter and mouseleave
image.addEventListener('mouseenter', function() {
    executeInXojo('mouseenter', 'specialImage');
});

image.addEventListener('mouseleave', function() {
    executeInXojo('mouseexit', 'specialImage'); 
});

Then in Xojo, go to your HTMLViewer and handle the JavascriptRequest event with the following code:

Function JavaScriptRequest(method As String, parameters() as Variant) Handles JavaScriptRequest as String
  
  select case method
    
  case "mouseenter"
    if parameters.Count = 0 then return
    select case parameters(0).StringValue
    case "specialImage"
      //Mouse is over the image
      
    end select
    
    
  case "mouseexit"
    if parameters.Count = 0 then return
    
    select case parameters(0).StringValue
    case "specialImage"
      //Mouse has left the image
      
    end select
    
    
  end select
End Function
1 Like
3

I’m not sure if I understand what you want
In a simple project with WKWebViewControlMBs1, DesktopButton1 and DesktopArea1

WKWebViewControl1
Opening Event:
Me.LoadURL("https://www.mothsoftware.com")
runJavaScriptAlertPanel Event:
TextArea1.Text = message

DesktopButton1
Pressed Event:

Var exec() As String

exec.Add("document.addEventListener('mouseover', function(event) {")
exec.Add("alert( event.target.innerHTML);")
exec.Add("});")
WKWebViewControlMBS1.EvaluateJavaScript( String.FromArray( exec ) )

Then if you press the button and hover over the WKWebViewControl the elements will get printed in the textarea.

Guess @Christian_Wheel’s solution is what you want – he just answered while I was typing :slight_smile:
But I leave my answer as an alternative

2 Likes
4

Sample Project.

5

@Christian_Wheel : thanks a lot!

1 Like
6

Almost there. I can identify the menu and add new entries. The html is the example is a bit different to mine:

Screenshot 2024-02-20 at 13.51.59
Screenshot 2024-02-20 at 13.51.591112×204 18 KB

How do I add an event listener for the a href so that I get the name of the url handler?

7

Your <a> needs an id attribute.

<a id="myLink" href="max-attachment-handler://ha_stat_19_20190131_235301_346525385.png">This is the link text, you can optionally put an img tag here too</a>

...

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const link = document.getElementById('myLink');

    // Mouse enter event
    link.addEventListener('mouseenter', function() {
        executeInXojo('mouseenter', 'myLink');
    });

    // Mouse leave event
    link.addEventListener('mouseleave', function() {
		executeInXojo('mouseexit', 'myLink');
    });

});
</script>
1 Like
8

If you want this to be a bit more dynamic, I’ve modified Christian’s example. The JavaScript code will now attach an event handler to all links on the page that contain an IMG element, it’s executed from DocumentComplete so you don’t need to modify the HTML you’re loading before-hand (in case that’s an issue), and the JavaScript returns the href value of the link to JavaScriptRequest so you can differentiate multiple elements.

3 Likes