Ik heb een nogal ingewikkelde website. Deze heb ik onlangs omgezet van 2.5 naar 3. Nu ben ik bezig om de inhoud responsive te maken.
De bestaande situatie is:
Op de website staat een kaart (van een stad). Hierop staan met blauwe stippen ca. 60 huizen gemarkeerd.
Link staat een menu met 60 adressen. Als men op een adres klikt wordt het desbetreffende stipje rood. Als men op de rode stip klikt, komt er een pop up schermpje met een tekst over dat huis.
Ik heb dit als volgt gemaakt:
Een template met als background de kaart, zodat ik die niet 60 keer opnieuw moet laden. In een artikel een rode stip als laag (met div) met daarin een link naar de pop up.
Als ik de website responsive maak moet ik de afbeelding in een module zetten omdat een background niet meeschaalt. Als ik de stip dan als laag op de juiste plek zet met position absolute dan schaalt de stip niet op de juiste manier mee.
Ik kan dit natuurlijk wel met css oplossen, maar dit moet heel nauwkeurig en dan voor 60 verschillende stippen. Dat kost me veel te veel tijd.
Ik heb als oplossing bedacht om dan toch maar 60 keer een kaart in een artikel te zetten met 60 keer een andere rode stip. De afbeelding schaalt dan in zijn geheel en de rode stip ook. En dan de hele afbeelding te linken. Maar dat kost natuurlijk erg veel ruimte.
Als iemand een redelijk snelle en betere oplossing voor dit probleem heeft, hoor ik het graag.
De 2.5 website is te zien bij deze
link