Button-style picture link?

[Alexey Zhebel]

I can make a topic link as a predefined button with custom text. And I can make a topic link to be a custom picture. But what if I want my custom picture link to act like a button (i.e., to change when I hover over it and click it)? Is that possible or are picture links "static"?

[Tim Green]

Hi Alexey,

Use an image toggle for this. You can define the "small" version to be a different image, and you would use a button image for that. The only restriction on this is that it must be a click event, you can't define it to expand on mouseover. You must also turn off lightbox mode in Configuration > Publishing Options > HTML Help/Webhelp > HTML Export Options, otherwise the expanded image will be displayed in a lightbox overlay instead of inline.

[Alexey Zhebel]

But a toggle picture can't be a link, can it?

[Tim Green]

But a toggle picture can't be a link, can it?

No, but wouldn't a link that expands when you click on it be a bit distracting/confusing. It might be interesting the first time but I think quite soon you would find it annoying, like blinking text...

[Martin Wynne]

I can make a topic link as a predefined button with custom text. And I can make a topic link to be a custom picture. But what if I want my custom picture link to act like a button (i.e., to change when I hover over it and click it)? Is that possible or are picture links "static"?

Hi Alexey,

Unless you need PDF output, often the easiest solution for CHM and Webhelp is to Insert HTML Code Object and write your own code:

1. create two images of your button, say button_dead_abc.png and button_live_abc.png to represent the normal and mouse-over appearance of your button. Put the image files in your Baggage Files.

2. then to create a working button link to say topic ID topic_abc put something like this in an HTML Code Object:

Code: Select all

<a href="topic_abc.htm" 
 onmouseout="document.getElementById('button_abc_1').src='button_dead_abc.png'" 
onmouseover="document.getElementById('button_abc_1').src='button_live_abc.png'"> 
<img id="button_abc_1" border="0" src="button_dead_abc.png" title="go to topic abc" alt="button link to topic abc">
</a>

If you need more than one button link in your topic, each one must have a unique img ID. So you would change button_abc_1 to say button_abc_2 or button_xyz_1 (in 3 places), and edit the other parts accordingly.

regards,

Martin.

[Alexey Zhebel]

Thanks, Martin. That seems like a nice workaround.