Drop-down Menu in svg graphic

Forum Moderators: not2easy

Message Too Old, No Replies

Drop-down Menu in svg graphic

dvcONS

4:52 pm on Sep 25, 2008 (gmt 0)

Hi,

I'm developing an interactive graphic for presenting research results. I have an svg graphic embeded in an HTML page. The graphic itself is linked to an HTML drop-down menu which changes some of the characteristics of the graphic (i.e., swithches between different categorical variables). This all works fine. However, I'd like to embed or float the drop down menu in or over the svg graphic (at the moment it sits underneath so it doesn't look like its associated). I have no idea how to do this. Any advice will be appreciated.

Regards

dvc

dvcONS

8:46 am on Sep 26, 2008 (gmt 0)

Here's the basic code associated with the above. It makes it easier to see what I want to do. There are 3 seperate files (HTML, Javascript, svg):

dvc

/////HTML Code/////
<html>
<head>
<script type="text/javascript" src="javascript_test.js" language="JavaScript"> </script>
<title>A test of HTML forms</title>
</head>
<body onload="init()" style="font-family:sans-serif">
<p>This is a test of HTML form elements</p>
<embed src="svg_test.svg" width="800" height="500" type="image/svg+xml" id="vectorGraphic">
<form name="testform">
<select name="testselect" onchange="tellMe()">
</select>
</form>
</body>
</html>

////Javascript Code/////
function init(){
SelectList_1();
}

function SelectList_1() {
//populates selection list
for (i=0;i<DistList.length;i++){
document.forms['testform'].testselect.options[i] = new Option(DistList[i]);
}
//reference to svg document
graph = document.getElementById('vectorGraphic');
svgGraph=graph.getSVGDocument();
}

function tellMe(){
//gets current selection value
LAList = document.forms['testform'].testselect.options[document.testform.testselect.selectedIndex].value;
}

var DistList = [
"Adur","Allerdale","Alnwick","Amber Valley","Arun","Ashfield","Ashford","Aylesbury Vale","Babergh","Barking/Dagnham","Barnet","Barnsley","Barrow-in-Furnss","Basildon","Bsingstke-Deane","Bassetlaw","Bath-N.E.Somset","Bedford","Berwick-Tweed","Bexley","Birmingham","Blaby","Blackbrn-Darwen","Blackpool","Blaenau Gwent","Blyth Valley","Bolsover","Bolton","Boston","Bournemouth","Bracknell Forest","Bradford","Braintree","Breckland","Brent","Brentwood","Bridgend","Bridgnorth","Brighton-Hove","Bristol, City of","Broadland","Bromley","Bromsgrove","Broxbourne","Broxtowe","Burnley","Bury","Caerphilly","Calderdale","Cambridge","Camden","Cannock Chase","Canterbury","Caradon","Cardiff","Carlisle","Carmarthenshire","Carrick","Castle Morpeth","Castle Point","Ceredigion","Charnwood","Chelmsford","Cheltenham","Cherwell","Chester","Chesterfield","Chester-le-Street","Chichester","Chiltern","Chorley","Christchurch","City of London","Colchester","Congleton","Conwy","Copeland","Corby","Cotswold","Coventry","Craven","Crawley","Crewe-Nantwich","Croydon","Dacorum","Darlington","Dartford","Daventry","Denbighshire","Derby","Derbyshire Dales","Derwentside","Doncaster","Dover","Dudley","Durham","Ealing","Easington","E. Cambrdgeshre","East Devon",
"East Dorset","East Hampshire","East Hertfordshre","East Lindsey","E. Nrthamptnshre","E. Riding/Yrkshre","East Staffordshire","Eastbourne","Eastleigh","Eden","Ellesmere-Neston","Elmbridge","Enfield","Epping Forest","Epsom and Ewell","Erewash","Exeter","Fareham","Fenland","Flintshire","Forest Heath","Forest of Dean","Fylde","Gateshead","Gedling","Gloucester","Gosport","Gravesham","Great Yarmouth","Greenwich","Guildford","Gwynedd","Hackney","Halton","Hambleton","Hamrsmth-Fulhm","Harborough","Haringey","Harlow","Harrogate","Harrow","Hart","Hartlepool","Hastings","Havant","Havering","Herefordshire","Hertsmere","High Peak","Hillingdon","Hinckley-Boswrth","Horsham","Hounslow","Huntingdonshire","Hyndburn","Ipswich","Isle of Anglesey","Isle of Wight","Isles of Scilly","Islington","Kennet","Kensingtn-Chlsea","Kerrier","Kettering","K. Lynn-W. Norflk","Kingston Hull","Kingston Thames","Kirklees","Knowsley","Lambeth","Lancaster","Leeds","Leicester","Lewes","Lewisham","Lichfield","Lincoln","Liverpool","Luton","Macclesfield","Maidstone","Maldon","Malvern Hills","Manchester","Mansfield","Medway","Melton","Mendip","Merthyr Tydfil","Merton","Mid Bedfordshire","Mid Devon","Mid Suffolk","Mid Sussex","Middlesbrough","Milton Keynes","Mole Valley","Monmouthshire","Neath Port Talbot","New Forest",
"Newark-Shrwood","Newcastle-Tyne","Newcastle-Lyme","Newham","Newport","North Cornwall","North Devon","North Dorset","N.E. Derbyshire","N. E. Lincolnshire","N. Hertfordshre","North Kesteven","N. Lincolnshire","North Norfolk","North Shropshire","North Somerset","North Tyneside","N. Warwickshire","N.W. Leicestrshre","North Wiltshire","Northampton","Norwich","Nottingham","Nuneatn-Bedwrth","Oadby-Wigston","Oldham","Oswestry","Oxford","Pembrokeshire","Pendle","Penwith","Peterborough","Plymouth","Poole","Portsmouth","Powys","Preston","Purbeck","Reading","Redbridge","Redcar-Cleveland","Redditch","Reigate-Banstead","Restormel","Rhnda-Cynon-Taff","Ribble Valley","Richmnd-Thames","Richmondshire","Rochdale","Rochford","Rossendale","Rother","Rotherham","Rugby","Runnymede","Rushcliffe","Rushmoor","Rutland","Ryedale","Salford","Salisbury","Sandwell","Scarborough","Sedgefield","Sedgemoor","Sefton","Selby","Sevenoaks","Sheffield","Shepway","Shrwsbry-Atcham","Slough","Solihull","S. Bedfordshire","South Bucks","S.Cambridgeshre","South Derbyshire","S.Gloucestershre","South Hams","South Holland","South Kesteven","South Lakeland","South Norfolk","S. Nrthamptnshre","S. Oxfordshire","South Ribble","South Shropshire","South Somerset","S. Staffordshire","South Tyneside","Southampton","Southend-on-Sea","Southwark","Spelthorne","St Albans","St Edmundsbury","St. Helens","Stafford","Staffrdshre Mrlnd","Stevenage",
"Stockport","Stockton-on-Tees","Stoke-on-Trent","Stratford-on-Avon","Stroud","Suffolk Coastal","Sunderland","Surrey Heath","Sutton","Swale","Swansea","Swindon","Tameside","Tamworth","Tandridge","Taunton Deane","Teesdale","Teignbridge","Telford-Wrekin","Tendring","Test Valley","Tewkesbury","Thanet","Vale Glamorgan","Three Rivers","Thurrock","Tonbridge-Malling","Torbay","Torfaen","Torridge","Tower Hamlets","Trafford","Tunbridge Wells","Tynedale","Uttlesford","Vale White Horse","Vale Royal","Wakefield","Walsall","Waltham Forest","Wandsworth","Wansbeck","Warrington","Warwick","Watford","Waveney","Waverley","Wealden","Wear Valley","Wellingborough","Welwyn Hatfield","West Berkshire","West Devon","West Dorset","West Lancashire","West Lindsey","West Oxfordshire","West Somerset","West Wiltshire","Westminster","Weymouth-Prtlnd","Wigan","Winchester","Windsor-Maidnhd","Wirral","Woking","Wokingham","Wolverhampton","Worcester","Worthing","Wrexham","Wychavon","Wycombe","Wyre","Wyre Forest","York"];

////SVG Code///
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1600 1000">

//Basic Elements

</svg>