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><DIV style="</SPAN>
<SPAN STYLE="font-weight:bold; font-family:verdana; color:red;
font-size:9pt" CLASS="coder" ID="oCode"></SPAN>
<SPAN>"></SPAN>
<DIV><H1> Welcome to seattle!</H1></DIV>
<DIV><IMG SRC="seattlesmall.jpg"></DIV>
<DIV><P>A great city in the beautiful state
of Washington.</P></DIV><DIV CLASS="coder"></DIV></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>
Ny bruger
Nybegynder
Opret
Preview
