对鼠标旋转图像Javascript方法点击

我有一系列的饼图图像（我用Google Chart Tools）一个PHP页面都是一样的700x280大小：对鼠标旋转图像Javascript方法点击

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

我想为用户提供可以查看与条形图相同的数据 - 当他们点击图表时。

上次我使用Javascript，它曾经用于MSIE4和Netscape。请给我一些指点我的小功能。

I.e.我不需要任何帮助来构建谷歌图表，我只需要一点点帮助就可以通过点击鼠标就地旋转图像的Javascript函数，但需要满足以下要求：

1）禁用Javascript的用户应该仍然能够看到饼图。此外，它也将是很好的，让他们也看到条形图（即通过将条形图放在HTML链接后面，或者你可以用Javascript隐藏条形图，而对于禁用Javascript的用户，他们不会隐藏 - 这没关系）。

2）请为所有图表使用1个通用函数 - 即我不希望10个图表有10个函数。

非常感谢！亚历克斯

来源

2010-11-12 Alexander Farber

实现它的年龄，因为我写了没有框架的任何JavaScript（你忘了提及，如果你使用一个..你可能应该！）。无论如何，这是我的刺伤。没有Javascript的人可以悬停饼图查看条形图，而使用Javascript的人可以点击它们。

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

来源

2010-11-12 11:03:40 Frode

真棒解决方案，谢谢！如果我想在整个BODY中搜索（因为我的网页很小）而不是建议的var chartArea = document.getElementById（“chartArea”）;我怎么能这样做？而且我很好奇，你更喜欢什么JS框架？ – 2010-11-12 13:01:02

好吧，这似乎工作：for（var child in document.body.childNodes） – 2010-11-12 13:36:23

非常欢迎。是的，我使用chartArea的唯一原因是减少了要循环的元素的数量 - 所以如果您的页面很小，body的childNodes也可以正常工作。至于框架，你不能用jQuery出错。对于更大的单页应用程序，您可能想要使用更多集成小部件和构建系统的东西 - 我总是以Dojo为结尾，这让我很满意。 – Frode 2010-11-12 13:59:25

如果你可以用影像变更上悬停，而不是在点击生活，你可能不需要任何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>

来源

2010-11-12 11:40:19 Webveloper

感谢您的建议！ – 2010-11-12 13:01:52

对鼠标旋转图像Javascript方法点击

回答

相关问题