Archief - JS/CSS: Background-Image Position veranderen...

Hellow, waarde mede-forumgangers / webneuten , ...
ik zit met een heel tof idee in mijn hoofd dat ik graag zou uitwerken.
technisch gezien weet ik hou het gaat werken, maar heb even in praktijk geprobeerd, en ik bleek niet meteen een logische manier te vinden.

uiteindelijk is het heel simpel wat moet gebeuren, maar ik zoek een manier om het te doen :

stel :

je hebt een div van 600px op 600px.
als bg geef je die een image, van 6000px op 6000px
deze achtergrond staat standaard top left positioned, dus krijg je de linkerbovenhoek te zien in je div.

Nu zou ik graag, met behulp van knoppen ( UP / DOWN / LEFT / RIGHT )
die achtergrond kunnen laten opschuiven.

dus :
stel, je klikt op RIGHT, dan schuift die achtergrond eigenlijk bv. 200px door naar rechts. ( left:-200px)
klik je op DOWN, schuift die background 200px naar beneden... ( top:-200px?)

foutafhandelijk etc hoeft nog allemaal niet. maar hopenlijk snappen jullie wat ik bedoel ,en kunnen jiullie me helpen.

dit heb ik nu dus van code :

HTML

<div id="maparea">
</div>


CSS

#maparea { width:600px; height:600px; background-image:url(bigBG.jpg); border:2px solid brown;}


als JS had ik gedacht aan iets dergelijks, maar dat geeft errors, en kan ik geen righting bepalen ( omhoog, omlaag, links rechts... )

function moveRight() {
this.document.getElementById("maparea").style.backgroundPosition = this.document.getElementById("maparea").style.backgroundPosition + 200;
}

die functie triggerd ik vanop een button ofzo...

Alvast bedankt voor jullie hulp !

http://pihxel.joggink.be/pihxel.htm

bekijk dit is ... (de header, na klikken op mapnavigatie)

moest ik dat kunnen hebben,
zou P E R F E C T zijn.
ik heb dit project ook gezien, en daarmee dat ik wist dat het kon.
deze manier zou ideaal zijn

edit : werkt niet in IE7?

Knap project, maar het is toch niet helemaal in orde qua vormgeving. Jammer, verdient beter.

Hoe bedoel je qua vormgeving?