How to highlight interactive elements on HTML output?

Hi,

Is it possible to highlight interactive elements on HTML output? I see that in the preview under sitemap.

I want to create an HTML output and ship it to multiple users without having to write a story board for them to understand the interactions

Hi manishkapoor11 ,
Try to below steps. refer the attached screenshot.


Once you apply the highlight feature, it should update the URL. It will add hi=1 to the end of the URL, which you can then send to someone else, and it will apply the highlight when that person views it.

I hope it will be useful for you.

Thanks,
Vikram

Hi Vikram

Thanks for your response. However, i am looking for a way to make these highlights appear when someone opens the HTML folder which Axure generates. I will need to host the HTML files on a location, so not sure if sharing a URL will work. Any ideas?

there was a example called fairy dust by @Lennart (btw author of “Axure for Mobile, Second Edition”).
it was made for axure 6.5 and has not been updated. the basic functionallity is to trigger the style attribute of the interactive html-tags (cursor: pointer) and to add a css style to these elements.

i made a simplified example and used the border (what does not make so much sense without updating the box-size-model in css too).
the look would be nicer using box-shadow of course.
simple-fairydust.rp (61.6 KB)

Hi manishkapoor11,

I had a look at this conversation and I thought I’d try a few things.

If you have access to the Pro version of Axure RP, you could give the interactive elements notes which would manifest themselves as blue icons in the top right of each widget. This can be turned on and off in the “Generate HTML” dialog and it is one way to attract attention to the interactive elements–or any elements of your choosing! Here is more information on that:

Widget Notes | Axure

But if you can’t–or don’t want to–use notes, it would be a little more difficult to attract attention to these elements.

You can’t trigger the built in green “fairy dust” without the sitemap. But you can Generate HTML with the sitemap minimized. So as long as you are okay with having the sitemap minimized when your clients open the html file, there may be a way to jury-rig your generated HTML so it opens with the interactive elements highlighted.

When you choose to highlight the interactive elements from the sitemap, you’ll notice that the URL changes. More specifically, it gets a little “&hi=1” tag. Now I used that knowledge and created a solution that may work for you.

Create a dummy page–let’s call this page “OpenMe”. Using the OnPageLoad event of that page, link to the page you want loaded first–i.e. home–but add the tags so it looks like this:


Really we are opening the start.html file to the “home” page (#p=home) with highlights (&h=1) and the sitemap minimized (&c=1).

Then generate HTML files. Now when you send this out to your clients, instruct them to open the openme.html file instead of the start.html file.

FYI, I’m not going to go as far as to say that this is a “hack”, but I’m not sure I can say it’s an officially supported solution either. It’s really more of a workaround. These tags–"&hi=1"–are subject to change so I can’t guarantee this will work forever or in all instances. I just got curious and thought you might find it useful!

And here’s the file.
Highlight.rp (71.7 KB)

Very bad too see still no solution for this in RP8. It will be very good too see highlighted by default