0

[ask] adding imagemap component with color area

asked 2015-01-16 03:31:07 +0800

tnharisman gravatar image tnharisman
31 3

updated 2015-01-16 03:40:14 +0800

Dear All,

please help, I get a problem where I need to add color to a specific area at coordinates. actually my question is similar to this question http://forum.zkoss.org/question/81041/question-with-imagemap-and-zk/ but because there is not some response, so I write again here. Sample of what I mean like this http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight/docs/demo_usa.html

I make in ZK like this:

<zk>
<script src="/js/maphilight/jquery.min.js"/>
<script src="/js/maphilight/jquery.maphilight.min.js"/> 

<style>
.my-imagemap a {
cursor: default;        
}
</style>

<window apply="com.demo.MapLight">
<div sclass="my-imagemap">
<imagemap id="siteMap" src="/images/siteplan.jpg" width="100" height="100">
<area shape="polygon" coords="612,215,625,221"/>
<area shape="polygon" coords="677,198,695,209"/>
<area shape="polygon" coords="651,181,673,193,676" />
<area shape="polygon" coords="622,169,649,180"/>
</imagemap>
</div>
</window>
</zk>

Java Code :

public class MapLight extends GenericForwardComposer {
     public void doAfterCompose(Component comp) throws Exception {
        Clients.evalJavaScript("$("+siteMap.getUuid()+").maphilight();");
     }
}

source : jquery.min.js ==> download here

jquery.maphilight.min.js ==> download here

thank you, tn harisman

delete flag offensive retag edit
Be the first one to answer this question!
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-01-16 03:31:07 +0800

Seen: 6 times

Last updated: Jan 16 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More