Website Pointer Change Design?

[ich]

Hello,

recently I saw some websites, which do show a "colored dot" when one is hover a link.
This is instead of the commonly used "hand with a pointing finger".
Depending on the webdesign, the corporate color selection, I feel this a good idea.
I just wondering, if I can do with Xara something similar?
Any advice?

Add update:
I cannot find an example for a pointer change when hover a link. But I can show an example of a website which uses a "dot" as pointer at all. The dot size changes when hover a link and in any other case it is a dot instead of the common "arrow". Looks nice too, if matching to the webstyle. This is why I am curious if this can be done with xara too (maybe add any css code) ?

https://palladian.design

[Acorn]

Hello,

recently I saw some websites, which do show a "colored dot" when one is hover a link.
This is instead of the commonly used "hand with a pointing finger".
Depending on the webdesign, the corporate color selection, I feel this a good idea.
I just wondering, if I can do with Xara something similar?
Any advice?

ich, it would be be done using SVGs as these render smaller and crisper.

You need a suitable SVG, which you can create and save from within your XDA.

TG.zip - the file details an approach; unzip to a new folder.

The main part is to set up the cursor or links using CSS:

<style>
a:link {
  cursor: url('index_htm_files/acorn.svg'), pointer;
}
</style>

So in your red dot case there could be two SVGs.
Circles are easy so they might have been created as in-line SVGs, avoiding the need for external SVG files.

Acorn

[ich]

Acorn,
ok, I need to dig into it and check.
Many thanks for your feedback. Will try it.
Ciao,
ich

[gwpriester]

I moved this thread to Web Design Chat

[Egg Bramhill]

Using Acorns xar file here's one I've made with different svg cursors. Page 2 has a small red dot enlarging to a larger green one on mouse-over.

One issue I encountered was that the cursors wouldn't display the exact colours of the svg's.

Xara file attached.

DEMO

[ich]

THX all,
I will definitely check all your input.
Ciao,
Ich

[Acorn]

Using Acorns xar file here's one I've made with different svg cursors. Page 2 has a small red dot enlarging to a larger green one on mouse-over.
One issue I encountered was that the cursors wouldn't display the exact colours of the svg's.
Xara file attached. DEMO

Thank you Egg, it is nice seeing someone understand the detail.

My monitor colours of SVGs and browser usage are the same., even in Firefox.

Acorn

[Egg Bramhill]

My monitor colours of SVGs and browser usage are the same., even in Firefox.

That's strange. I tried to do a video showing the differences but on the screen grab video the buttons are the same colour as the svg's. It must be something I've set-up on my PC.

[ich]

Hello,
I followed the advice and it works well. The only thing I did experience is, that when opening the website on my Mac (iMac with big Screen) the safari shows the buttons not nice (not rounded).
When I open the webpage on same equipment but with e.g. Edge Broweser, it shows up perfect. Also for sure the XARA preview shows it perfectly.
I tried several sizes of the button, nothing changes.
I assume, Safari (latest version) must have a problem with this approach?
I could not test it on safari using a laptop (to see if the screen size makes a difference). But I guess that is not the route-cause. So I assume Safari is somehow blame for it.
Ciao ICH

[ich]

UPDATE / FINDINGS:
I did run several tests and figured this out:
When creating the circle (as replacement for a cursor) which will be filed as .svg by own, from the shape-tool, it appears not round on a Safari-Browser (but e.g.on Opera / Edge).
When instead loading the circle from the content-catalog (form), file as .svg, it appears also on Safari as a circle.

However: The .svg dots, will still displayed with an unsharp edge, when looking at them via Safari Browser, whereas they are always sharp looking via other Browsers (even same Mac)

Just as an update of my findings.