CODEWITHSUNDEEP
javascript
Alexander Farber
Alexander Farber

Reputation: 22978

Javascript method for rotating images on a mouse click

I have a PHP-page with a series of pie chart images (I use Google Chart Tools) all of the same 700x280 size:

<html>
<head>
<script>
var chart1 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd';
var chart2 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15';
var chart3 ='http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15';

XXX please suggest a function here XXX
</script>
</head>
<body>
<img src="logo.png" width=700 height=280>

Chart 1:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April" width=700 height=280>

Chart 2:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August" width=700 height=280>

Chart 3:

<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December" width=700 height=280>

</body>
</html>

I would like to offer users the possibility to view the same data as a bar chart - when they click on a chart.

Last time I've used Javascript it had been for MSIE4 and Netscape. Please give me some pointers for my little function.

I.e. I don't need any help with constructing Google Charts, I just need little help on the Javascript function to rotate images in-place, on a mouse click, but with the following requirements:

1) Users with Javascript disabled should be still able to see the pie charts. Also it would be nice to enable them to see the bar charts too (i.e. by putting bar charts behind an HTML-link or maybe you hide the bar charts with Javascript and for users with Javascript disabled they are not hidden - which is okay).

2) Please 1 universal function for all charts - i.e. I don't want to have 10 functions for 10 charts.

Thank you very much! Alex

Upvotes: 0

Views: 978

Answers (2)

Webveloper
Webveloper

Reputation: 1079

If you can live with the image changing on hover instead of on click, you may not need any JavaScript...

<style type="text/css">
/*<[CDATA[*/
a.chart,a.chart:hover{
    cursor:default;
    display:block;
    background-repeat:no-repeat;
    width:700px;
    height:280px;
}

#chart1{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April);}
#chart1:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd);}

#chart2{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August);}
#chart2:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15);}

#chart3{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December);}
#chart3:hover{background-image:url(http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15);}
/*]]>*/
</style>

<a id="chart1" class="chart" href="javascript://"><br/></a>
<a id="chart2" class="chart" href="javascript://"><br/></a>
<a id="chart3" class="chart" href="javascript://"><br/></a>

Upvotes: 0

Frode
Frode

Reputation: 5710

Realizing it's ages since I wrote any javascript without a framework (you forgot to mention if you were using one.. You probably should!). Anyway, here's my stab at it. People without Javascript can hover the pie charts to see the bar charts, while people with Javascript can click on them.

<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>

Upvotes: 1

Related Questions