mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-07 18:39:23 +03:00
Code Issues Projects Releases Wiki Activity

Better Button Fix

Browse Source 
Wrapped the images in a single div and used that as the content of a
button element.
This commit is contained in:
Mark Salsbery 2013-12-06 16:24:52 -08:00
parent e070475172
commit d3bcd0cec8
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/button.js
View File

@ -120,7 +120,7 @@ $.Button = function( options ) {
* @member {Element} element * @member {Element} element
* @memberof OpenSeadragon.Button# * @memberof OpenSeadragon.Button#
*/ */
this.element = options.element || $.makeNeutralElement( "div" ); this.element = options.element || $.makeNeutralElement( "button" );
//if the user has specified the element to bind the control to explicitly //if the user has specified the element to bind the control to explicitly
//then do not add the default control images //then do not add the default control images
@ -129,22 +129,23 @@ $.Button = function( options ) {
this.imgGroup = $.makeTransparentImage( this.srcGroup ); this.imgGroup = $.makeTransparentImage( this.srcGroup );
this.imgHover = $.makeTransparentImage( this.srcHover ); this.imgHover = $.makeTransparentImage( this.srcHover );
this.imgDown = $.makeTransparentImage( this.srcDown ); this.imgDown = $.makeTransparentImage( this.srcDown );
this.imgDiv = $.makeNeutralElement( "div" );
this.element.appendChild( this.imgRest ); this.imgDiv.style.position = "relative";
this.element.appendChild( this.imgGroup );
this.element.appendChild( this.imgHover );
this.element.appendChild( this.imgDown );
//this.imgRest.style.position =
this.imgGroup.style.position = this.imgGroup.style.position =
this.imgHover.style.position = this.imgHover.style.position =
this.imgDown.style.position = this.imgDown.style.position =
"absolute"; "absolute";
this.imgRest.style.top =
this.imgGroup.style.top = this.imgGroup.style.top =
this.imgHover.style.top = this.imgHover.style.top =
this.imgDown.style.top = this.imgDown.style.top =
"0px"; "0px";
this.imgRest.style.left =
this.imgGroup.style.left = this.imgGroup.style.left =
this.imgHover.style.left = this.imgHover.style.left =
this.imgDown.style.left = this.imgDown.style.left =
@ -160,6 +161,12 @@ $.Button = function( options ) {
this.imgDown.style.top = this.imgDown.style.top =
""; "";
} }
this.imgDiv.appendChild( this.imgRest );
this.imgDiv.appendChild( this.imgGroup );
this.imgDiv.appendChild( this.imgHover );
this.imgDiv.appendChild( this.imgDown );
this.element.appendChild( this.imgDiv );
} }
@ -183,10 +190,8 @@ $.Button = function( options ) {
// Whether this button should fade after user stops interacting with the viewport. // Whether this button should fade after user stops interacting with the viewport.
this.shouldFade = false; this.shouldFade = false;
this.element.style.cursor = "pointer";
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
this.element.style.position = "relative"; this.element.style.position = "relative";
this.element.tabIndex = "0";
this.element.title = this.tooltip; this.element.title = this.tooltip;
/** /**