Converting Excel Dashboard to High-Quality HTML Webpage (BONUS INSIDE –software idea)

You can insert an href url in the area tag to get the hyperlinking:

The HTML element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a element.

<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" /> 
  <area shape="default" nohref />
</map>
<img src="picture.png" alt="pic" usemap="#primary" />

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Thank you for your reply Erik - yes but is it possible to add the hyperlink based on the textual value of the area which is the HOTSPOT of the image?

yes - glad ot hear it works the same on your side -
this way has a TWO LARGE ADVANTAGES -
IT OUTPUS FILES WHICH LOOK STATIC AND FIXED IN ALL BROWSERS (converting all tables to DIVs)
AND
IT REMOVES ANY HINTS IT IS A PRODUCT OF EXCEL

I just tried to convert a complex bank PDF report to html and it looks awesome…

The only drawback is that the software generates the background image from teh static images…but I guess that is not such a bit problem - maybe I will find software which solves this small probelm…

thank you for updating the file – I wonder how do I make the HYPERLINKS LOOK WITHOUT ANY FORMATTING IN HTML…do I need to add some style to the header? I SEE YOU HAVE CHANGED HYPERLINK FORMATTING…looks awesome - but I need to know how to switch it off for other panels…:wink:

I’m not sure what you mean with textual value of the area, the area is an empty element i.e. the tag can’t have any html content. Though it can be used to generate css content.

I made an example of an image-map using your chartexport spreadsheet to get the image by a screenshot. It is coded to work the same as the updated file:
chart-export-map.zip (127.4 KB)

Now you have four options to get what you originally asked for.

If the image you export/screenshoot from next chart update has the same size it’s only the new hyperlinks the needs be edited.

Not sure what “switch it off” should do.

The style can be commented out, or only be applied by a media query:


Note:
I should have told that the pseudo element trick on elements that can’t hold any content is afaik only working in Chrome/Chromium. Just made the demo to demonstrate what could be done using a complete image instead of inserting spans with links in divs with table like data. For real use, the pseudo elements on the areas should instead be real links in the html. Sorry.

@semantina
I think I now owe you a crossbrowser working demo that use the chartexport screenshot with link overlays instead of the theoretical styling of map areas. As I suggested before, using a html template and edit link urls and positions might be less work than the export-converting-insert links routine.
chart-export-option-5.zip (128.6 KB)

(You gave me an excuse to pause work a moment, thanks. I hope I didn’t steer you away from investigating the other suggestions you’ve got already.)

1 Like

thank you for your fabulous help!)) I think I will stick with excel output for tables…as it works the best in most browsers - charts are hard to convert though…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.