Documentation Dynamic Media Viewers Reference Guide

Add Favorite button

Last update: November 6, 2021

Topics:
Dynamic Media Classic,Viewers,SDK/API,eCatalog

CREATED FOR:

Developer
User

The position of the Add Favorite button is fully managed by the Favorites menu.

The appearance of the Add Favorite button is controlled with the following CSS class selector:

.s7ecatalogviewer .s7addfavoritebutton

CSS properties of the Add Favorite button

background-image	The image that is displayed for a given button state.
background-position	Position inside artwork sprite, if CSS sprites are used. See also CSS Sprites.
width	Width of the button.
height	Height of the button.

NOTE

This button supports both the state and selected attribute selectors, which can be used to apply different skins to different button states. In particular, selected='true' corresponds to the state when a user can add a new Favorite icon by selecting or tapping. The attribute selected='false' corresponds to the normal operation mode when a user can zoom, pan, and swap pages.

The button tool tip can be localized. See Localization of user interface elements for more information.

Example - To set up an Add Favorite button that is 28 x 28 pixels. And, it displays a different image for each of the four different button states when selected or not selected.

.s7ecatalogviewer .s7addfavoritebutton {
 width:28px;
 height:28px;
}
.s7ecatalogviewer .s7addfavoritebutton[selected='false'][state='up'] {
background-image:url(images/v2/AddFavoriteButton_dark_up.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='false'][state='over'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='false'][state='down'] {
background-image:url(images/v2/AddFavoriteButton_dark_down.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/AddFavoriteButton_dark_disabled.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='true'][state='up'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='true'][state='over'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='true'][state='down'] {
background-image:url(images/v2/AddFavoriteButton_dark_over.png);
}
.s7ecatalogviewer .s7addfavoritebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/AddFavoriteButton_dark_disabled.png);
}

recommendation-more-help