Ik ben op zoek naar de juiste code om een wereldkaart aan twee kanten te laten wegvallen met behulp van een semitransparante PNG die een fade van transparant naar wit (achtergrondkleur site) bevat.

Zodra de gebruiker het browservenster verkleint, moet zowel links als rechts er tegelijkertijd van de afbeelding worden 'afgesneden', hetgeen mooi afgewerkt dankzij de PNG. Ik krijg het alleen zelf voor geen mogelijkheid voor elkaar, en heb alle combi's van positions, overflows en (min-)widths/heights geprobeerd. De wereldkaart zelf moet perse een img zijn en geen background, omdat er gewerkt wordt met image maps icm. Mootools.

Mijn opzet:

Code:

body { 
    margin: 0; 
} 
#left, #right { 
    min-width: 20px; 
    width: 20px; 
    height: 600px; 
    background-color: #ff0000; 
    position: absolute; 
} 

#left { 
    left: 0px; 
    top: 0px; 
} 

#right { 
    right: 0px; 
    top: 0px; 
} 

#map { 
    height: 600px; 
    position: absolute; 
    left: 20px; 
} 

#container { 
    position: relative; 
    width: 640px; 
}

Code:

<div id="container"> 
    <div id="left"></div> 
    <div id="map"><img src="Desert.jpg" alt="Map" width="600" height="600" /></div> 
    <div id="right"></div> 
</div>

z-index misschien iets om mee te gaan spelen?