<head>
<style>
// Set image1 to visible, image2 to invisible by default
.image1 {
display: inline;
}
.image2 {
display: none;
}
</style>
<!-- If SVG supported by browser, swap the visiblilty state of both images -->
var svgSupport = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
if ( svgSupport ) {
<style>
.image1 {
display: none;
}
.image2 {
display: inline;
}
</style>
</head>
<body>
<!-- Div container has both images, but only one should 'exist' (Be visible AND take up physial space) -->
<div>
<image src="image1" class="image1" />
<image src="image2" class="image2" />
</div>
</body>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.