對鼠標旋轉圖像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方法點擊

回答

相關問題