Zoom function

Du kan bruge zoom på fx et div object - fx (fra msdn)

<HTML XMLNS:CONTROL>
<HEAD>
<TITLE>Zoom Demo</TITLE>
<SCRIPT>
function zoomIn() {
  newZoom= parseInt(oZoom.style.zoom)+10+'%'
      oZoom.style.zoom =newZoom;
      oCode.innerText='zoom: '+newZoom+'';   
  }
function zoomOut() {
  newZoom= parseInt(oZoom.style.zoom)-10+'%'
      oZoom.style.zoom =newZoom;
      oCode.innerText='zoom: '+newZoom+'';   
  }
function changeZoom() {
  newZoom= parseInt(oSlider.value)
        oZoom.style.zoom=newZoom+'%';
        oCode.innerText='zoom: '+newZoom+'%';   
  }
function changeZoom2(oSel) {
  newZoom= oSel.options[oSel.selectedIndex].innerText
        oZoom.style.zoom=newZoom;
        oCode.innerText='zoom: '+newZoom+'';   
  }
</SCRIPT>
</HEAD>
<BODY onload="oZoom.style.zoom='100%';
    oCode.innerText='zoom: 100%'; " >

<!-- Slider and + and - controls;;;;  -->
<DIV STYLE="position:absolute; top:15; left:20;">
<FORM>
<CONTROL:SLIDER ID="oSlider" STYLE="sl--orientation:vertical;
    height:204px; width:28px; background-color:#336699;
    padding-left:5px; border-left:1px solid #6699CC" TICKINTERVAL="10" 
    MAX="200" MIN="0" onchange="changeZoom()"> </CONTROL:SLIDER>
</FORM>
</DIV>
<DIV STYLE="position:absolute; top:15; left:48; width:28px; height:200px;
    background-color:#336699;" ALIGN="center">
<IMG  SRC="/workshop/graphics/zoomscale.gif" BORDER="0" USEMAP="#scaler">
</DIV>

<!-- The zoomable area container -->
<DIV STYLE="position:absolute; top:15; left:76; width:550px;
    height:204px; background-color:black; vertical-align: middle;
    padding:25px; font-family:arial; font-weight:bold; color:white;
    z-index:3"  ALIGN="center">

<!-- The zoomable area -->
<DIV ID="oZoom" STYLE="zoom:100%" ALIGN="center">
<H1>Welcome to Seattle!</H1>
<IMG SRC="/workshop/graphics/seattlesmall.jpg" ALIGN="left">
<P ALIGN="center">A great city in the beautiful state of Washington.</P>
</DIV></DIV>

<!-- Displayed code -->
<DIV STYLE="overflow:hidden; border:1px solid black; position:absolute;
    top:219; left:20; width:606px; height:90px; padding:1px;
    padding-left:25px; background-color:white; z-index:3;">
<SPAN>&lt;DIV style="</SPAN>
<SPAN STYLE="font-weight:bold; font-family:verdana; color:red;
    font-size:9pt" CLASS="coder" ID="oCode"></SPAN>
<SPAN>"&gt;</SPAN>
<DIV>&lt;H1&gt; Welcome to seattle!&lt;/H1&gt;</DIV>
<DIV>&lt;IMG SRC="seattlesmall.jpg"&gt;</DIV>
<DIV>&lt;P&gt;A great city in the beautiful state
of Washington.&lt;/P&gt;</DIV><DIV CLASS="coder">&lt;/DIV&gt;</DIV>
</DIV></DIV>
<DIV ID="oControls" STYLE="position:absolute; top:308; left:20;
    width:606px; height:100px; background-color:gray; color:white;
    font-family:verdana; font-size:11; font-weight:normal;
    padding:10px; z-index:3; text-align:center; border:1px solid black;
    text-align:left;">
<DIV STYLE="padding-left:65px">
The code used to generate the image is shown in the area above.
<BR><BR>
Modify the image using the selections below or the <BR>
slider control above and to the left of this window.
</DIV><HR>
<DIV ALIGN=CENTER>
<SELECT ID="percent" onchange="changeZoom2(percent); ">
    <OPTION SELECTED>Use Percentage Value</OPTION>
    <OPTION>10%</OPTION>
    <OPTION>25%</OPTION>
    <OPTION>50%</OPTION>
    <OPTION>75%</OPTION>
    <OPTION>100%</OPTION>
    <OPTION>150%</OPTION>
    <OPTION>200%</OPTION>
</SELECT>
<SELECT ID="normal" onchange="changeZoom2(normal); ">
    <OPTION SELECTED>Use Number Value</OPTION>
    <OPTION>.1</OPTION>
    <OPTION>0.25</OPTION>
    <OPTION>0.5</OPTION>
    <OPTION>0.75</OPTION>
    <OPTION>1.0</OPTION>
    <OPTION>1.5</OPTION>
    <OPTION>2.0</OPTION>
</SELECT><HR>
</DIV></DIV>
<MAP NAME="scaler">
  <AREA SHAPE="rect" COORDS="0,182,19,199" ALT="plus" HREF="#"
  onclick="zoomIn()" STYLE="cursor:hand">
  <AREA SHAPE="rect" COORDS="1,1,18,15" ALT="minus" HREF="#" 
  onclick="zoomOut()">
</MAP>
</BODY>
</HTML>

Det skal virke i alle browsere. netscape, mozilla, opera osv

http://blooberry.com/indexdot/css/properties/dynamic/zoom.htm ...

Zoom er IE only !-)

Damm. Andre forslag :-(

Jeg har droppet det.

<ole>

Ellers kunne du jo kikke på mit X-browser zoom-object:
    http://tjenester.dk/x-codes.dk/eksperten/zoomobj/

Du kan klikke på billedet og fastlægge centerpunktet (kan også sættes med kode). Der er rimelig gode muligheder for at skræddersy scriptet. Kik i js-filen for en kortfattet dokumentation:
    http://tjenester.dk/x-codes.dk/eksperten/zoomobj/picZoomObj.class.js

/mvh
</bole>

Takker mange gange :-)

... anytime  ;o)