CODEWITHSUNDEEP
javascripthtmlcsspng
Dran Dev
Dran Dev

Reputation: 519

Layering PNG in HTML/CSS?

I want to make an interactive map of the world using HTML, CSS, and JS. Using SVG was probably the recommended way to go, but to be honest I have no experience in utilizing it. Plus editing paths for doing minor changes is a pain. I really prefer exporting each country as a PNG image, placing them in HTML, and JS will handle all the interaction.

It's really easy in concept. The problem however is that how to layer these different PNGs so that each countries will be on its specific place? If you use two <img src=... it would either put the images into a column or a row:

This is how it should be How it should be

But this is how it will show up in HTML enter image description here

or this enter image description here

Forgive me for being too naive of this. Thanks a ton!

Upvotes: 3

Views: 2010

Answers (2)

Pons Purushothaman
Pons Purushothaman

Reputation: 2261

As @rotateDev said, absolute positioning each images with proper offset is the best solution if you are decided to go with PNG images. But clicking on each country will definitely be an issue because of the random shapes of the countries.

A solution for this is implement countries as background image of individual <DIV> and place a label inside the div with country name. Only this labels will be clickable.

HTML Sample

<div class="country gernany">
   <a href="#">Germany</a>
</div>
<div class="country france">
   <a href="#">France</a>
</div>
<div class="country italy">
   <a href="#">Italy</a>
</div>

CSS sample:

.germany{
   .background-image: url(germany.png);
}
.germany.active{
   .background-image: url(germany-active.png);
}

We can use JavaScript to append some class to the <DIV> on the hover or click of the label so we can highlight the country on hover of the label.

<script>
$('.country').click(function(){
   $(this).addClass('active');
});
</script>

Upvotes: 2

benjamyan
benjamyan

Reputation: 210

For this case, I would use position:absolute on the images, and use the left, right, top, bottom properties to align them how you like. Just be sure to set position:relative to your parent div.

If this is not possible for whatever reason, you can use the transform property to set the horizontal and vertical position.

Upvotes: 3

Related Questions