Skip to main content

The hotspots3d section is optional and only required if you want to display hot spots on your 360° object spin. Hot Spots consist of a marker line and a marker dot as well as content area. The content area may contain all kind of HTML content, e.g. formatted text, hyperlinks, images, videos and alike.

Each hotspot requires an individual hot spot definition node.

In addition a <defaults> node can be used to define default parameter values.

<hotspots3d>
  <defaults>
    <normalClass value="hotspotNormal"/>
    <hoverClass value="hotspotOver"/>
    <activeClass value="hotspotAction"/>
    <perimeterAngleFadeOut value="15" />
  </defaults>
  <hotspot>
    <text value="Hot Spot A "/>
    <x value="11"/>
    <y value="223"/>
    <z value="-116"/>
    <perimeterAngle value="0"/>
    <perimeterAngleRange value="60"/>
  </hotspot>
  <hotspot>
    <text value="Hot Spot B "/>
    <x value="11"/>
    <y value="223"/>
    <z value="-116"/>
    <perimeterAngle value="90"/>
    <perimeterAngleRange value="30"/>
    <perimeterAngleFadeOut value="5" />
  </hotspot>
</hotspots3d>

Hot Spot Parameters:

x, y, z​

float

x, y, z distance on the real object measured from center of object
since 17.10

The x, y and z distance in mm on the real object measured from the center of the object (usually equal to the center of the turn table).

Combined with the required <camera> parameters, the viewer calculates the rotated and projected position of the hot spot on screen.

text​

string

HTML content to display for this hot spot
since 17.10

The HTML content to display for this hot spot.

Note that the value needs to be XML encoded if the content contains invalid characters for XML attribute values (e.g. &amp; for &, &lt; for <, &gt; for > and &quot; for ").

horizontalMarkerSize​

integer

length of the horizontal line of the hot spot's marker
since 17.10
30
Default

Length of the horizontal line of the hot spot's marker. Range: [-x ... 0 ... x]

verticalMarkerSize​

integer

length of the vertical line of the hot spot's marker
since 17.10
100
Default

Length of the vertical line of the hot spot's marker. Range: [0 ... x]

horizontalMarkerPosition​

float

horizontal position of the marker line
since 17.10
0
Default

Defines the horizontal position of the marker line on the tooltip. Range: [0.0 ... 1.0]
The value 0.0 marks the left corner of the tooltip while 1 marks the right corner.

Neues Projekt

verticalMarkerPosition​

float

vertical position of the marker line
since 17.10
0.5
Default

Defines the vertical position of the marker line on the tooltip. Range: [0.0 ... 1.0]
The value 0.0 marks the top corner of the tooltip while 1 marks the bottom corner.

Neues Projekt

markerAngle​

float

angle of the vertical hot spot marker
since 17.10
45
Default

Defines the angle of the vertical hot spot marker.

perimeterAngle​

float

viewing angle in degrees at which to display the hot spot
since 17.10

The viewing angle in degrees at which to display the hot spot. E.g. for a hot spot on the left side of the object use 90. For a hot spot at the back of the object use 180. Alias: perimeterAngleY

perimeterAngleX​

float

viewing angle in degrees at which to display the hot spot
since 17.10

The viewing angle in degrees at which to display the hot spot.

Only applies if a rotation around the x-axis is used.

perimeterAngleRange​

float

angle range in which the hot spot shall be visible
since 17.10
30
Default

The angle range in which the hot spot shall be visible. E.g. a perimeterAngle of 90 and a perimeterAngleRange of 40 would display the hot spot from 70 to 110 degrees (+/- 20°).

Alias: perimeterAngleRangeY

perimeterAngleRangeX​

float

angle range in which the hot spot shall be visible
since 17.10
30
Default

The angle range in which the hot spot shall be visible. Only applies if a rotation around the x-axis is used.

perimeterAngleFadeOut​

float

angle range in which the hot spot shall be faded in and out
since 17.10
10
Default

The angle range in which the hot spot shall be faded in and out. A value of 0 means that the hot spot will be displayed or hidden immediately when entering or leaving the perimeterAngleRange. Values greater than 0 extend the perimeterAngleRange by the given degrees in which the hot spot's opacity changes.

Alias: perimeterFadeOutY

perimeterAngleFadeOutX​

float

angle range in which the hot spot shall be faded in and out
since 17.10
10
Default

The angle range in which the hot spot shall be faded in and out. A value of 0 means that the hot spot will be displayed or hidden immediately when entering or leaving the perimeterAngleRange. Values greater than 0 extend the perimeterAngleRange by the given degrees in which the hot spot's opacity changes. Only applies if a rotation around the x-axis is used.

perimeterZoom​

float

specifies from which magnification level on a hot spot is displayed
since 17.10
1.0
Default

An optional parameter specifying from which magnification level on a hot spot should be displayed. E.g. 2.5 would hide the hot spot as long as the magnification level is below 2.5. This parameter has no effect if the zoom is disabled by the global enableZoom parameter.

perimeterImageWidth​

float

defines the absolute width of spin instance for displaying hot spot
since 17.10
1.0
Default

Similar to perimeterZoom. While perimeterZoom depends on the magnification, this parameter defines the absolute width of the (zoomed) spin instance to decide whether to show or hide a tooltip. It is recommended to set this parameter as a default hot spot parameter when using relative instance sizes.

interactive​

boolean

Prevent reaction
since 17.10
false
Default

The hot spot content area will not react on mouse over, click actions and alike when setting interactive to false.

actionParameter​

string

used for hot spot callback function
since 17.10

An optional parameter value that will be passed on to the hot spot callback function.

url​

string

An optional URL to open if the user clicks the hot spot label
since 17.10

An optional URL to open if the user clicks the hot spot label. You can use any URL you can use with the window.open command, like regular URLs as well as javascript: or email: URLs.

urlTarget​

string

determines
since 17.10
_self
Default

The target frame or window to open the URL in. Use e.g. _blank to open hyperlinks in a new window.

focusOnClick​

boolean

zoom and/or rotate to hotspot position on click
since 17.10
true
Default

Enables zooming and/or rotating to hotspot position on click.

rotateOnFocus​

boolean

rotate to sceneSet and scene
since 17.10
true
Default

Setting this parameter totrue rotates to sceneSet and scene matching the coordinates defined in hotspot.perimeterAngle, while false keeps the current sceneSet and scene.

zoomOnFocus​

boolean

zoom to hotspot
since 17.10
true
Default

Setting this parameter to true zooms to the hotspot, while false keeps the current zoom.

focusRadius​

float

size of section when zooming to a hotspot
since 17.10
0.25
Default

Determines the size of the section when zooming to a hotspot.

focusAngleX, focusAngleY​

float

defines scene with given focus angle (optional)
since 17.10

If set, the target scene or sceneSet will not be determined by the perimeterAngle parameter, but with the given focusAngle.

normalClass​

string

CSS class name to use for content div tag in normal state
since 17.10
FSI360HotSpot_Normal
Default

A CSS class name to use for the content <div> tag in normal state.

activeClass​

string

CSS class name to use for content div tag in mouse onclick state
since 17.10
FSI360HotSpot_Active
Default

A CSS class name to use for the content <div> tag in onclick state.

hoverClass​

string

CSS class name to use for content div tag in mouse over state
since 17.10
FSI360HotSpot_Hover
Default

A CSS class name to use for the content <div> tag in mouse over state.

Example CSS classes:

It is recommended to add the following CSS classes to the HTML document containing FSI Viewer instances with hot spots. These classes will be used if you do not define normalClass, hoverClass and activeClass parameters for your hot spots. The _Mobile und _SmallMobile classes will be added to the hot spot class names on mobile device or small mobile devices (phones). You can use them to adjust the font size to increase the readability of text within the hot spots.

<style type="text/css">
div.FSI360HotSpot_Normal {
  border: 2px solid rgba(255, 255, 0, 0.8);
  font-family: sans-serif;
  color: #000;
  font-size: 13px;
  background: rgba(255, 255, 200, 0.8);
  padding: 3px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

div.FSI360HotSpot_Active {
  background: #FFF;
}

div.FSI360HotSpot_Mobile {
  font-size: 13px;
}

div.FSI360HotSpot_SmallMobile {
  font-size: 32px;
}
</style>

cssClass​

string

CSS class name to add to the hot spot's content div tag
since 17.10

An additional CSS class name to add to the hot spot's content <div> tag.

cssStyle​

string

CSS style value to add to the hot spot's content div tag
since 17.10

An additional CSS style value to add to the hot spot's content <div> tag.