Giter Club home page Giter Club logo

Comments (7)

jaukia avatar jaukia commented on August 11, 2024

I wouldn't even have assumed that any one is using image maps anymore! If image maps are not working out of the box, I won't spend time making them work, unfortunately. However, you can use css to position (even transparent) elements on top of your image and then add Zoomooz to those to enable zooming to different parts of image.

from zoomooz.

yoooee avatar yoooee commented on August 11, 2024

Thanks for the feedback. Unfortunately, I have to map out some fairly complicated shapes. Think of a map of the United States with each state being a clickable item to which you can zoom.

from zoomooz.

uiliw avatar uiliw commented on August 11, 2024

im in the totally same situation, i could do it using jquery, like, when click on the image map where there is some buildings over a street map, it zooms to the DIV absolutely placed under the map clicked, but i need control to jump over the buildings..witch im having trouble! would be good if zoomooz could detect the coordinates of the imagemap and zoom into it with no need to add more divs and write more jquery!

<img src="mapa/predio1a.png" id="building_place" usemap="#m_predio1a" alt="" /><div id="building_div"></div>
<map name="m_predio1a">
   <area shape="poly" id="building_map" coords="132,13,84,41,83,160,66,171,66,198,153,245,220,206,220,179,181,157,182,85,196,74,197,44,172,29,171,2,152,24,132,13" alt="" />
</map>
$(window).load(function() {
   $.zoomooz.setup({ debug:false, root:$('.view1'), closeclick:true, duration:'1000', easing:'ease-in-out'});

   $('#building_map').click(function(evt) { //the area to be clicked
        evt.stopPropagation();
        $('#building_div').zoomTo(); //the div under building
   });  
});

from zoomooz.

jaukia avatar jaukia commented on August 11, 2024

Thank you for your feedback and for the feature suggestion as well as for the example! Unfortunately, Thinglink is a hobby for me and I don't have time to implement all the requested features. :/

Feel free to extend Zoomooz for this purpose and suggest a patch!

from zoomooz.

jaukia avatar jaukia commented on August 11, 2024

Using the areaOffset plugin for jQuery might be of help for this one,
https://github.com/Poetro/jquery.areaOffset

from zoomooz.

uiliw avatar uiliw commented on August 11, 2024

Thanks Jaukia, ill give a shot on this one!

from zoomooz.

jaukia avatar jaukia commented on August 11, 2024

It probably requires some changes to zoomooz though. You'll need to replace "offset" commands with "areaOffset" somewhere in the code.

from zoomooz.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.