PDA

View Full Version : Image hotspots



alexandercarter
22 Jul 2010, 1:29 AM
Hello everyone,

I would like to add a final touch to my application by presenting an image with hotspots. A tap on a hotspot will launch the great overlay effect already available.

- Should I position each hotspot element using an "absolute" CSS property or is there a better way?

Thanks.

evant
22 Jul 2010, 2:02 AM
You could do something like this:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {

var regions = [{
overlayText: 'Text 1',
region: new Ext.util.Region(330, 200, 350, 180)
}];

var p = new Ext.Panel({
html: '<img src="overlay-1.png" alt="Photo" />'
}).show();

p.body.on('click', function(e, t){
var xy = e.xy,
active = {
top: xy[1],
right: xy[0],
bottom: xy[1],
left: xy[0]
};
Ext.each(regions, function(r){
if(r.region.contains(active)){
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 400,
height: 400,
scroll: 'vertical',
html: r.overlayText
}).show();
return false;
}
});
}, null, {delegate: 'img'});

}
});


The regions give a little bit of margin for error, but you get the idea, just fill the rest in.

alexandercarter
22 Jul 2010, 2:37 AM
Thanks

alexandercarter
22 Jul 2010, 3:46 AM
I'm basing the screen on the samples and I was wondering if I could encapsulate your code. I have to admit, I'm having a little trouble with the syntax and am again trying to avoid nesting Ext.Panel components.

evant
22 Jul 2010, 4:26 AM
I don't understand what you mean. I posted a fully working example...

alexandercarter
22 Jul 2010, 4:32 AM
Exactly, it works great on my start page, thanks :)

I was trying to get it to work in another part of the application, a screen that corresponds to "demos.BottomTabs", but am not certain how to convert the use of "Ext.setup" to an "new Ext.Panel".

evant
22 Jul 2010, 5:09 AM
Take the code inside the onReady block. You can see all it does is create a panel then bind a listener onto the panel body. Do the same thing in your app.

alexandercarter
22 Jul 2010, 11:25 PM
Hi,

I placed the code into the basic structure of the page as indicated, but I imagine that trying to create two "Ext.Panel" is causing a problem. In short, I would like to keep the "demos.BottomTabs" whilst respecting your working code.


demos.BottomTabs = new Ext.Panel({

var regions = [{
overlayText: 'Text 1',
region: new Ext.util.Region(330, 200, 350, 180)
}];

var p = new Ext.Panel({
html: '<img src="overlay-1.png" alt="Photo" />'
}).show();

p.body.on('click', function(e, t){
var xy = e.xy,
active = {
top: xy[1],
right: xy[0],
bottom: xy[1],
left: xy[0]
};
Ext.each(regions, function(r){
if(r.region.contains(active)){
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 400,
height: 400,
scroll: 'vertical',
html: r.overlayText
}).show();
return false;
}
});
}, null, {delegate: 'img'});

});

Would it be advisable then to remove the "Ext.Panel" from the "p" variable and change the bracket types?


var p = [{
html: '<img src="overlay-1.png" alt="Photo" />'
}].show();

Again, sorry for the back and forth, the system is great on start-up but as soon as I try to put it into a different part of my application, I hit a wall.

Thanks :)

evant
22 Jul 2010, 11:45 PM
No, that would be very bad.

[] is just an array, an array doesn't have a show method! The container class transforms any items in an array into real panel objects at runtime.

Think about what you're doing and how all this fits together. The constructor of a tab panel takes in a series of config options for creating the tab panel and describing the child items. You can't just embed arbitrary code wherever you like, mostly because it's not valid JS syntax.



var regions = [{
overlayText: 'Text 1',
region: new Ext.util.Region(330, 200, 350, 180)
}];

demos.BottomTabs = new Ext.Panel({
html: '<img src="overlay-1.png" alt="Photo" />'
}).show();

demos.BottomTabs.body.on('click', function(e, t){
var xy = e.xy, active = {
top: xy[1],
right: xy[0],
bottom: xy[1],
left: xy[0]
};
Ext.each(regions, function(r){
if (r.region.contains(active)) {
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 400,
height: 400,
scroll: 'vertical',
html: r.overlayText
}).show();
return false;
}
});
}, null, {
delegate: 'img'
});

alexandercarter
22 Jul 2010, 11:58 PM
Thank you; the explanation is brilliant :) I had tried to reapply "demos.BottomTabs" rather than the "p" variable, but my syntax was not good at all!

alexandercarter
23 Jul 2010, 2:40 AM
Is the ".show()" method necessary in this example? If I keep it, the image doesn't appear, if I remove it, the image displays without hotspot functions. I didn't realise you could apply jQuery methods directly to the end of an "Ext.Panel" element.