Positioning of expanding hotspot?

[Guest]

Hi there,

I'd like to set the position of an expanding hotspot in correlation to the trigger. How can I do this?

Target situation

The expanding hotspot is shown directly beneath the trigger (here: button "Chapter B"). I want the hotspot to appear beneath the trigger but aligned top. So all hotspot content is displayed on the right of the trigger and expands only down. This is shown as model in screenshot "Target Situation".

Problem 1

The first problem is, that the first line of the hotspot content is aligned with the line/row the trigger is in. This happens if I insert the whole hotspot content as a single image. So the first lines expands up. See screenshot "Problem 1".

Problem 2

The second problem arises if the image is inserted in two parts to have a workaround for the top alignment. The second line within the expanding hotspot is displayed left aligned under the trigger - not left aligned in the hotspot. See screenshot "Problem 2".

I figured out several workaround with transparent placeholders. But how can this be resolved in a clean way be positioning the expanding hotspot?

BR,

Hobbes

[MergeThis]

You could try a JavaScript onmouseover event, with code in a script section of the head section plus the link in the page:

     http://www.w3schools.com/jsref/jsref_onmouseover.asp

Or, you could use the onmouseover script totally within the link, such as:

<a href="ThisTopicName.htm" onmouseover="document.navpane.src='v9_nav_pane_collapsed.gif'" onmouseout="document.navpane.src='v9_nav_pane.gif'" style="color: #0000ff; text-decoration: underline; "><img src="v9_nav_pane.gif" name="navpane" alt="navpane" title="navpane" id="navpane" width="226" height="370" border="0" /></a>

Be sure you don't introduce any line breaks; the html editor will do that, but you shouldn't. To ensure this, paste the code into Notepad, turn off Word Wrap, and delete line breaks until you have a single line. Copy/paste that into your topic.

You might also investigate CSS image replacement, as well as Walter Zorn's free cross-browser Tooltip JavaScript Library at

http://www.walterzorn.com/tooltip/tooltip_e.htm

His method allows you to position the tooltip in exact locations at any of all four compass points. It's a great tool!

Good luck,

Leon

[Guest]

Thanks Leon, those are really very helpful links (even for some other questions), although they don't resolve my problem.

I'm looking for a solution without a pop-up window or a tip box. The expanding hotspot is the right approach concerning the wanted look&feel. Just the positioning doesn't work.

Does anyone know if there is a possibility to position the hotspot at all (I'm certain there must be)?

[MergeThis · Accepted solution]

In your .css file, add a top vertical alignment property, as shown in bold below:

A.expandspot {
color: #008000;
cursor: hand;
font-style: italic;
text-decoration: none;
vertical-align: top;
}

The baseline position seems to be the default (bottom and middle are the other allowable values) .

Good luck,

Leon

[Guest]

That seems to work for this case.

I added the code directly in the head code fo the affected file (without colouring and font style). It also works fine that way.

Thanks so far. I marked the answer as correct because it solves one big part of the problem.

Still open is the question, how to align the expanding hotspot within itself. All further images still flip to the the next line and are left aligned in the whole page (see screenshot 3 of my first posting).

[MergeThis]

Why are you still inserting the image in two parts (image 3), if the top v-align is working for you? If you must, I think I'd try setting the alignment for both images to the right.

Or, inserting a single image renders the issue moot.

Good luck,

Leon

[Guest]

The image still flipped into a new line when it was to high. So I kept the two images and the workaround with a transparent placeholder.

But this issue seems to have another cause. For some odd reaseon RoboHelp wants to add a line break when a picture is replaced or updated. This is shown in the preview although there isn't any line break in the code! (Don't call me crazy, I even can't believe my eyes.).

I hope I elminiated that now.

[Captiv8r]

Hi there

Why aren't you using Drop-down hotspot for this? It would seem to offer just what you are looking for.

Just curious... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7 or 8 within the day - $24.95! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks