I need a zooming tool

[orkun]

hello

I need a zooming tool for a map displayed with a4j:mediaoutput.

how can I do that ?

regards

[tsurdilovic]

I was doing something similar and this is how it was implemented:

1. JavaScript code for "enlarge", "decrease" copied from samples/richfaces-demo/src/main/webapp/scripts/picturesUtils.js

<script type="text/javascript">
//<![CDATA[
function resize(id, coeff) {
 var pic = document.getElementById(id);

 var w = Math.round(pic.width * coeff);
 var h = Math.round(pic.height * coeff);

 if (w > 1 && h > 1) {
 pic.width = w;
 pic.heigth = h;
 }
}

function enlarge(id){
 resize(id, 1.1);
}

function decrease(id){
 resize(id, 0.9);
}
//]]>
</script>

2. a4j:mediaOutput and rich:contextMenu

<a4j:mediaOutput id="pic" element="img" cacheable="false"
 createContent="#{mediaBean.paint}" value="myimage.png"
 mimeType="image/jpeg" >
</a4j:mediaOutput>

<rich:contextMenu event="oncontextmenu" attachTo="pic" submitMode="none">
 <rich:menuItem value="Zoom In" onclick="enlarge('pic');" id="zin"></rich:menuItem>
 <rich:menuItem value="Zoom Out" onclick="decrease('pic');" id="zout"></rich:menuItem>
</rich:contextMenu>

(see http://livedemo.exadel.com/richfaces-demo/richfaces/contextMenu.jsf)