aktuell unterrichte ich 2 Tage AJAX. Meine Teilnehmer fragen, ob es auch geht mit ASP.NET AJAX ein Bild zu drehen. Leider gibt das AJAX Control Toolkit derartiges nicht her. Ich habe das hier exemplarisch für den Internet Explorer auf Basis von Filtern das implementiert.
<script type="text/javascript">
function rotate(o, winkel)
{
rad = winkel * Math.PI * 2 / 360;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
o.filters.item(0).M11 = costheta;
o.filters.item(0).M12 = -sintheta;
o.filters.item(0).M21 = sintheta;
o.filters.item(0).M22 = costheta;
}
</script>
<body>
<div id="drehen1"
style="position:absolute; filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')">
<img src="rot.png" />
</div>
<input type="button" value="drehen" onclick="rotate(drehen1,30)">
Ist ja ein guter Anfang, aber nochh viel cooler gehts mit JQuery. Allerdings braucht man zusätzlich ein Plugin wie JQuery rotate. Dann sollte es auch in anderen Browsern als IE funktionieren.
Mit folgende Zeilen Code drehen wir um 23° das JQuery Bild.
<img id="ppedv" src="logo_jquery_215x53[1].gif" />
<script language="jscript">
$(document).ready(hannes2);
function hannes2() {
$("#ppedv").rotateRight(23);
}
</script>
das ganze sieht dann so aus, voll cool!
