Revision history [back]

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

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

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