Jump to content

Image Maps


Sherzod

Recommended Posts

  • 3 weeks later...

Really great !

I think a lot o people didn't realize the potential. Since there is no that much comments about it here.

I will make another example using USA maps and publish in a "uniGUI DOES..." series. 

This is really fantastic. I work with some statistic project relate to demographics/maps and  we can produce some nice interfaces mapping figures in such way.

Edited by Fred Montier
typos
  • Like 2
Link to comment
Share on other sites

Thank You Sherzod for this practical example.

I see you are using a HTMLFrame to hold the Chords for the map images - all good.

Question: This HTMLFrame seems to act as a hidden repository to hold the map image co-ordinates and does not paint (setting Hidden Tag to True and/or Top to -249 makes no difference to the outcome of the WebApp).

(1) Is this normal ?

(2) How many Hidden HTMLFrames can one use ? I assume if it contained visual objects they would have been painted if Visible and not outside form rectangle range ? 

Please advise

  • Like 1
Link to comment
Share on other sites

Sherzod, the following which works on UniImage does not work on MOBILE UnimImage (Throws "O34.getEl is not a function")???

  with Image.JSInterface do begin
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;
 

Please advise ASAP

Link to comment
Share on other sites

  • 2 weeks later...

Sherzod, how are we going with the Mobile Implementation ?

Quote

Sherzod, the following which works on UniImage does not work on MOBILE UnimImage (Throws "O34.getEl is not a function")???

  with Image.JSInterface do begin
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.getEl().select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;

 

Link to comment
Share on other sites

11 hours ago, andyhill said:

Sherzod, how are we going with the Mobile Implementation ?

Hi Andy,

Sorry for the late response.

Try to make these changes:

1. getEl() replace with element

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniImage1.JSInterface do
  begin
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("id", "image-unique-id");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("usemap", "#image-map");');
  end;

  with UniImage2.JSInterface do
  begin
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("alt", "");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("id", "image-unique-id2");');
    JSCode('Ext.get('#1'.element.select("img").elements[0]).dom.setAttribute("usemap", "#image-map2");');
  end;
end;

2. imageMap.js

3. Clear browser cache

 

Link to comment
Share on other sites

  • 3 weeks later...

I don't get it. Why you could use it in mobile since the primary effect is hover to select an element.  It's good for country/state map selection etc... just an example. You don't hover your finger in mobile interface. It should be broken into to steps event to work as desktop. That's is the problem.

As a Desktop UI element is just perfect. Too much trouble with google maps elements to make it work alone. And using image like the Sherzod example, solve all my problems.
 

  • Like 1
Link to comment
Share on other sites

I do. Simply put, Human Image provides 100 odd areas of interest (not shown) where user can select and retrieve specific information:- Desktop (Hover / Click), Mobile (tap) - works as intended independent of zoom but hopelessly useless if rotated (needs separate vertical and horizontal images due to viewport issues).

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...