I don't know what it is about Visio's Save As Web Page function that I find intriguing, but every time I spot a question about it I feel bound to dive in and take a look. The most recent question in the newsgroups asks how to change the mouse cursor when the user hovers over a shape with a hyperlink.
Although there's no way to change the this type of behaviour through the UI, there's a fairly easy fix if you're prepared to do a bit of post-publish text editing...
Of course, there are usually a number of options when tackling this kind of problem. For example editing the CSS would be one answer, but in this case would require more editing of both the style sheet itself and some of the html pages. In addition, we can use the existing JavaScript to do a lot of the work for us.
A JavaScript answer
As it turns out each shape element (within the Save As Web Page output) already includes a onmouseover event to update the tooltip for the respective shape. The event calls a function in the main holder page called UpdateTooltip, and takes three parameters: the element that raised the event, a page ID and a shape ID.
What the UpdateTooltip function does is set the tooltip text and this is dependent on a number variables, but of interest here is whether or not the shape includes a hyperlink. So it's at this point we can just add our single line of code to set the cursor image.
Walkthrough
- Open your Visio document and select File / Save as Web Page...
- In the subsequent Save dialog, select an appropriate file location and click the Publish... button
- Locate your primary web page (eg Drawing1.htm) using Windows Explorer and open in Notepad or some other editor
- Search for 'hlObj.Hyperlink.length' and you should find the first line in the code below (there should only be one instance)
- Add the highlighted line of code and save the document
Note - If you just want to change the mouseover cursor for all shapes (irrespective of whether they contain hyperlinks, just move the element.style.cursor.... line up so that it's the first line that executes inside the UpdateTooltip function.
Cursors
In the above example I've used the 'help' cursor style, but of course there are other standard types as well:
Auto, Crosshair, Default, Pointer, Move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
You can also specify a url to an image, which might be an interesting method if combined with a bit more logic in the JavaScript. (Remember that the UpdateTooltip function already contains a reference to the page and shape allowing further interrogation of other shape properties, and this could then be used to decide on an appropriate image to display.) For more details on cursor manipulation have a look at this link: HTML DOM cursor property - W3Schools.
