html - インタラクティブに画像を回転

Question

マウスクリックで画像を回転させることはできますか? だから私は空のhtmlページに画像を持っていて、画像をクリックしてドラッグして、その中心を中心に回転させたいと思っています。コードまたは実際の例はありますか?

よろしく、 マーク

Answer 1

以下はサンプルコードです。

<style type="text/css">
  img.primary   { display: inline; }
  img.secondary { display: none; }
  div.foo:hover img.secondary { display: inline; }
  div.foo:hover img.primary   { display: none; }
</style>

<script type="text/javascript">
function swapImages(container)
{
    for(var child in container.childNodes)
    {
        child = container.childNodes[child];
        if(child.nodeName == "IMG")
            child.className = child.className == "primary" ?
                "secondary" : "primary";
    }   
}

window.onload = function() {
    // Remove the foo class when the page loads, to disable hover
    var chartArea = document.getElementById("chartArea");
    for(var child in chartArea.childNodes)
    {
        child = chartArea.childNodes[child];
        if(child.nodeName == "DIV" && child.className == "foo")
            child.className = "";
    }
}
</script>

<div id="chartArea">
    <div class="foo" onclick="swapImages(this);">
        <img class="primary" src="http://somewhere/piechart1.png" />
        <img class="secondary" src="http://somewhere/barchart1.png" />
   </div>

    <div class="foo" onclick="swapImages(this);">
        <img class="primary" ... />
        <img class="secondary" ... />    
    </div>

   <div class="foo" ....>
</div>