Skip to main content
A
Anonymous
July 29, 2009
Answered

Positioning of expanding hotspot?

  • July 29, 2009
  • 7 replies
  • 1128 views

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".

target_situation.jpg

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".

problem1.jpg

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".

problem2.jpg

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

This topic is closed to new replies. Start a new post to keep the conversation going.
Correct answer MergeThis

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

7 replies

MergeThis
MergeThis
Inspiring
July 29, 2009

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

A
Anonymous
July 29, 2009

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
MergeThisCorrect answer
Inspiring
July 29, 2009

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices