Lecciones Prácticas

« CDS-Invenio: bibreformat & caches

Nuevas directrices de DRIVER para la exportación OAI »

DeepZoom & Seadragon AJAX: add new button with on-hover-changing-style

August 17th, 2009 |

Author: Miguel

Introduction

In my previous posts you will find how to create a viewing interface for JPG TILE images using SEADragon Ajax and jCarousel (jQuery). Please take a look at the following posts before you continue reading:

[Part 1]
[Part 2]
[Part 3]
[Part 4]

Add a new button

Let’s take a close look at the code I was using for creating a new button (for instance, for the save-to-disk button):



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* generation of "save" button------------------- */
var saveControl = makeControlSAVE();
saveControl.style.marginLeft="4px";
saveControl.style.marginBottom="4px";
viewer.addControl(saveControl, Seadragon.ControlAnchor.BOTTOM_LEFT);
 
function doSave(event) {
        Seadragon.Utils.cancelEvent(event);    // so link isn't processed
        // doSave action stuff...
}
 
function makeControlSAVE(){
        var controlSAVE = document.createElement("a");
        var controlImg = document.createElement('img');
        controlImg.src="../img/saveIcon.png";
        controlImg.className="thumb";
        controlImg.title="save";
        controlSAVE.href = "#";
        controlSAVE.id = "controlSAVE2";
        controlSAVE.className = "controlSAVE";
        controlSAVE.appendChild(controlImg);
        Seadragon.Utils.addEvent(controlSAVE, "click", doSave);
        return controlSAVE;
}

This creates a new img (source=../img/load_next_image.png). When the user clicks the image the function doOpenNEXT is executed.

What do we want to achieve? We’d like to add an onMouseOver style change to that button, so that the image appearance changes when user hovers mouse over the button.

I will comment two approaches to solve the problem.

Hands-on: the simple way (using onmouseover)

You will just have to add the following lines to the code shown above:



controlImg.onmouseover = function(event){
                                        var img = document.getElementById('controlSAVE2').firstChild;
                                        img.src = "../img/saveIcon_hover.png";
                                    ;}
controlImg.onmouseout = function(event){
                                         var img = document.getElementById('controlSAVE2').firstChild;
                                         img.src = "../img/saveIcon.png";
                                   ;}

This code just changes the img source onmouseover and onmouseout.

The resulting full code is:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* generation of "save" button------------------- */
var saveControl = makeControlSAVE();
saveControl.style.marginLeft="4px";
saveControl.style.marginBottom="4px";
viewer.addControl(saveControl, Seadragon.ControlAnchor.BOTTOM_LEFT);
 
function doSave(event) {
        Seadragon.Utils.cancelEvent(event);    // so link isn't processed
        // doSave action stuff...
}
 
function makeControlSAVE(){
        var controlSAVE = document.createElement("a");
        var controlImg = document.createElement('img');
        controlImg.src="../img/saveIcon.png";
        controlImg.className="thumb";
        controlImg.title="save";
        controlImg.onmouseover = function(event){
                  var img = document.getElementById('controlSAVE2').firstChild;
                  img.src = "../img/saveIcon_hover.png";
                                            ;}
        controlImg.onmouseout = function(event){
                   var img = document.getElementById('controlSAVE2').firstChild;
                   img.src = "../img/saveIcon.png";
                                   ;}
        controlSAVE.href = "#";
        controlSAVE.id = "controlSAVE2";
        controlSAVE.className = "controlSAVE";
        controlSAVE.appendChild(controlImg);
        Seadragon.Utils.addEvent(controlSAVE, "click", doSave);
        return controlSAVE;
}

Using Seadragon.button class

We build our buttons using img and a (links).

Another way to achieve desired effect is build buttons instead of images with links. The Seadragon.Button class help page shows how to do this.

Seadragon.button is a utility class for creating interactive and flexible image-based buttons. These buttons have four states:

    * Rest (the mouse is off this button and off related buttons)
    * Group (the mouse is off this button but on a related button)
    * Hover (the mouse is on this button)
    * Down (the mouse is pressed on this button)

This class requires an image for each state. It encapsulates the transitions between and behavior of these images. In addition, it supports callbacks for five different events:

    * Press (the mouse is initially pressed on this button)
    * Release (the mouse was pressed and released on this button)
    * Click (the mouse was clicked on this button)
    * Enter (the mouse entered this button, and the mouse is down from this button)
    * Exit (the mouse exited this button, and the mouse is down from this button)

These events are restricted subsets of the corresponding Seadragon.MouseTracker events. For example, the “release” callback is only fired when the MouseTracker releaseHandler’s insideElmtPress and insideElmtRelease are both true. Similarly, the “click” callback is only fired when the MouseTracker clickHandler’s quick is true.

Now, a quick example:



1
2
3
4
5
6
7
8
9
10
11
12
13
function goHome() { // ... } 
var button = new Seadragon.Button( 
                     "Go Home", 
                     "home_rest.png", 
                     "home_group.png", 
                     "home_hover.png", 
                     "home_down.png", 
                     null, 
                     goHome,
                     null,
                     null,
                     null ); 
viewer.addControl(button.elmt, Seadragon.ControlAnchor.TOP_LEFT);

Ok, understood, now how to apply this to my viewer?

We are going to change the code shown previously for this one:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var butSAVE = new Seadragon.Button(
                                   "Save Image",
                                   "../img/saveIcon.png",
                                   "../img/saveIcon.png",
                                   "../img/saveIcon_hover.png",
                                   "../img/saveIcon.png",
                                   null,
                                   doSave,
                                   null,
                                   null,
                                   null );
 //   State Buttons:
//     *  Rest (the mouse is off this button and off related buttons)
//     * Group (the mouse is off this button but on a related button)
//     * Hover (the mouse is on this button)
//     * Down (the mouse is pressed on this button)
//   Callbacks for different events
//     *  Press (the mouse is initially pressed on this button)
//     * Release (the mouse was pressed and released on this button)
//     * Click (the mouse was clicked on this button)
//     * Enter (the mouse entered this button, and the mouse is down from this button)
//     * Exit (the mouse exited this button, and the mouse is down from this button)
 
viewer.addControl(butSAVE.elmt, Seadragon.ControlAnchor.BOTTOM_LEFT);
 
function doSave(event) {
      //Seadragon.Utils.cancelEvent(event);    // so link isn't processed
      //doSave function stuff ...
}

Please note the commented line in doSave’s new version (line number 27)! Now we DO WANT the link to be processed and the event must not be cancelled!

You can watch a full working example here!

Related posts:

DeepZoom & SEADragon (II)

DeepZoom & SEADragon (IV)

DeepZoom & SEADragon (III)

DeepZoom & SEADragon (I)

Ajax (I): peticiones HTTP – HTTP Requests

Posted in Informática - web | Tags: boton, button, class, deepzoom, javascript, jcarousel, onhover, onmouseover, seadragon ajax, Seadragon.button

« CDS-Invenio: bibreformat & caches

Nuevas directrices de DRIVER para la exportación OAI »

5 Responses to “DeepZoom & Seadragon AJAX: add new button with on-hover-changing-style”

jeff Goldenson says:

26/08/2009 at 18:19

I was hoping to see what this working example looked like, but am having no luck with the link provided.

Suggestions?

Much thanks for the great series of posts…

Jeff

admin says:

27/08/2009 at 14:42

Hi there Jeff,

You mean the last link? Our server was down yesterday due to hardware update. The link is working right now

Sorry for the inconvenience!

pitini says:

04/12/2010 at 09:35

Hi Miguel,

Thanks for your great example.

I am wondering that Seadragon control is built into dll file and what we do is to just add that dll file to our application and declare to use like this:

Meanwhile you show us how to add more buttons to the Seadragon in js file.

In order words, could we add more buttons when we are using the Ajax dll file ?

Thanks and hoping you share me any suggestions about my question.

pitini

Fotograf bryllup says:

18/05/2011 at 06:16

Hello just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results.

Miguel says:

18/05/2011 at 11:20

@Fotograf bryllup Thanks for the feedback! Do you mean pics in the last link? (http://zaguan.unizar.es/deepZoom/antifonario/index.html)