Bildebølge
Vi legger demoen i en iFrame for å forenkle koden.
Hvis du vil kan du se den i et eget vindu, og inspisere kildekoden:
Wave
https://borres.hiof.no/wep/js/ex/wave/wave.html
Dataene er lagret slik:
_data.js
// these JSON-string may as well been produced on server and accesed by a httpRequest
var objString='{"kom":[\
{"navn":"Halden","w":"72","h":"120","fil":"72px-Halden_komm.png","resultat":"21,4,1,2,4,2,5,8,2"},\
{"navn":"Moss","w":"104","h":"120","fil":"104px-Moss_komm.png","resultat":"16,2,1,1,-,2,8,8,1"},\
{"navn":"Sarpsborg","w":"96","h":"120","fil":"96px-Sarpsborg_komm.png","resultat":"24,2,0,2,3,1,6,9,2"},\
{"navn":"Fredrikstad","w":"103","h":"120","fil":"103px-Fredrikstad_komm.png","resultat":"18,2,0,1,3,2,7,17,3"},\
{"navn":"Hvaler","w":"96","h":"120","fil":"96px-Hvaler_komm.png","resultat":"7,1,-,1,-,1,5,6,0"},\
{"navn":"Aremark","w":"96","h":"120","fil":"96px-Aremark_komm.png","resultat":"6,-,-,4,4,-,2,1,0"},\
{"navn":"Marker","w":"95","h":"120","fil":"95px-Marker_komm.png","resultat":"14,-,-,5,4,-,2,-,0"},\
{"navn":"Rømskog","w":"95","h":"120","fil":"95px-Romskog_komm.png","resultat":"5,-,-,3,4,-,-,1,0"},\
{"navn":"Trøgstad","w":"103","h":"120","fil":"103px-Trogstad_komm.png","resultat":"5,0,-,6,2,2,2,4,0"},\
{"navn":"Spydeberg","w":"96","h":"120","fil":"96px-Spydeberg_komm.png","resultat":"4,1,-,5,2,2,3,4,0"},\
{"navn":"Askim","w":"101","h":"120","fil":"101px-Askim_komm.png","resultat":"12,1,-,2,2,2,7,7,2"},\
{"navn":"Eidsberg","w":"96","h":"120","fil":"96px-Eidsberg_komm.png","resultat":"8,2,-,8,3,3,4,7,0"},\
{"navn":"Skiptvedt","w":"95","h":"120","fil":"95px-Skiptvet_komm.svg.png","resultat":"7,-,-,7,2,-,3,2,0"},\
{"navn":"Rakkestad","w":"96","h":"120","fil":"96px-Rakkestad_komm.png","resultat":"6,0,-,6,5,4,1,3,0"},\
{"navn":"Råde","w":"96","h":"120","fil":"96px-Rade_komm.png","resultat":"10,0,-,3,3,0,4,7,0"},\
{"navn":"Rygge","w":"96","h":"120","fil":"96px-Rygge_komm.png","resultat":"8,2,-,1,1,1,5,8,1"},\
{"navn":"Våler","w":"96","h":"120","fil":"96px-Valer_Ostfold_komm.png","resultat":"4,1,-,4,2,0,4,6,0"},\
{"navn":"Hobøl","w":"96","h":"120","fil":"96px-Hobol_komm.png","resultat":"5,-,-,2,2,3,2,7,0"}\
]}';
Javaskriptet
_bildemenu.js
// wave heights
var hilitedHeight=60;
var smallHeight=30;
var imList=null;
var kommuner=null;
// partinames matching list of data in kommuner.resultat
var partier=new Array("Ap","SV","RV","Sp","KrF","V","H","Frp","Andre");
// on load:
function setupMenu()
{
// parse data and set up kummuner
var mElt=document.getElementById('imagemenu');
var obj=eval("("+objString+")");
kommuner=obj.kom;
for (var bix=0;bix<kommuner.length;bix++)
{
var im=document.createElement('img');
im.setAttribute('id','im'+bix);
im.setAttribute('src',kommuner[bix].fil);
im.setAttribute('alt',kommuner[bix].navn);
im.setAttribute('hspace','0px');
im.setAttribute('border','0px');
im.setAttribute('title',kommuner[bix].navn);
im.setAttribute('class','clickable');
im.setAttribute('height',smallHeight+'px');
kommuner[bix].smallWidth=Math.floor(kommuner[bix].w*(smallHeight/kommuner[bix].h));
kommuner[bix].smallHeight=smallHeight;
kommuner[bix].hilitedWidth=Math.floor(kommuner[bix].w*(hilitedHeight/kommuner[bix].h));
kommuner[bix].hilitedHeight=hilitedHeight;
im.setAttribute('width',kommuner[bix].smallWidth+'px');
mElt.appendChild(im);
// set action
im.onmousemove=over;
im.onclick=show;
}
// the only images on the page
imList=mElt.getElementsByTagName('img');
}
// when we move cursor over a menuimage
function over(e)
{
for(var pix=0; pix < imList.length; pix++)
leave(pix);
var im=e.target;
var ix=0;
while((im!=imList[ix]) &&(ix < imList.length))
ix++;
if(ix < imList.length)
{
im.width=kommuner[ix].hilitedWidth;
im.height=kommuner[ix].hilitedHeight;
neighbour(ix-1,ix);
neighbour(ix+1,ix);
}
// if we want dynamic update of results
// if not we need a click to display
show(e);
}
// fix neighbours, make a wave
function neighbour(ix,bigix)
{
if((ix < 0) ||(ix > imList.length-1))
return;
var im=imList[ix];
var fraction=Math.abs(bigix-ix)/2;
im.width=kommuner[ix].smallWidth
+(kommuner[ix].hilitedWidth-kommuner[ix].smallWidth)*fraction;
im.height=smallHeight+(hilitedHeight-smallHeight)*fraction;
}
// when we leave a menuimage
function leave()
{
for(var pix=0; pix < imList.length; pix++)
{
var im=imList[pix];
im.width=kommuner[pix].smallWidth;
im.height=kommuner[pix].smallHeight;
}
}
// show results, election results
function show(e)
{
var im=e.target;
var ix=0;
while((im!=imList[ix]) &&(ix < imList.length))
ix++;
if(ix < imList.length)
{
document.getElementById('showName').innerHTML=kommuner[ix].navn;
var list=kommuner[ix].resultat.split(',');
for(cix=0;cix<list.length;cix++)
{
var val=list[cix]=='-' ? 0 : list[cix];
document.getElementById(partier[cix]).style.height=8*val+'px';
}
}
}
HTML koden :
_wave.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>kommuner</title>
<style>
.clickable{cursor:pointer}
</style>
<script type="text/javascript" src="data.js"> </script>
<script type="text/javascript" src="bildemenu.js"> </script>
</head>
<body onload="setupMenu()" style="text-align:center">
<h3>Representanter ved kommunevalget 2007</h3>
<h2 id="showName" style="font-size:26px;margin-bottom:10px">
</h2>
<div >
<table style="margin-left:auto;margin-right:auto">
<tr>
<!-- first td is placeholder to keep stable height -->
<td valign="bottom"><img id="none" src="none.gif" alt="_" width="1px" height="200px" /></td>
<td valign="bottom"><img id="Ap" src="Ap.gif" alt="Ap" width="40px" height="1px"/></td>
<td valign="bottom"><img id="SV" src="SV.gif" alt="SV" width="40px" height="1px"/></td>
<td valign="bottom"><img id="RV" src="RV.gif" alt="RV" width="40px" height="1px"/></td>
<td valign="bottom"><img id="Sp" src="Sp.gif" alt="Sp" width="40px" height="1px"/></td>
<td valign="bottom"><img id="KrF" src="KrF.gif" alt="KrF" width="40px" height="1px"/></td>
<td valign="bottom"><img id="V" src="V.gif" alt="V" width="40px" height="1px"/></td>
<td valign="bottom"><img id="H" src="H.gif" alt="H" width="40px" height="1px"/></td>
<td valign="bottom"><img id="Frp" src="Frp.gif" alt="Frp" width="40px" height="1px"/></td>
<td valign="bottom"><img id="Andre" src="Andre.gif" alt="Andre" width="40px" height="1px"/></td>
</tr>
<tr>
<td></td>
<td>Ap</td>
<td>SV</td>
<td>RV</td>
<td>Sp</td>
<td>KrF</td>
<td>V</td>
<td>H</td>
<td>Frp</td>
<td>Andre</td>
</tr>
</table>
</div>
<!-- the wave menu goes here -->
<div id="imagemenu" style="position:fixed; bottom:10px; left:0px; width:100%">
</div>
</body>
</html>
