asked on

How to keep the original relative size of images

Hi,

I have a number of images that together form a perfect map. I need to upload and position these images individually, because I want to be able to use every single image as a link. It is some puzzle to get the images positioned, but it is possible :)

My problem is that the images does not maintain their relative sizing according to the originals when uploaded and displayed on the page.

I am sure that it is because I am missing something in the CSS settings. But what ??

I have these global CSS settings for the images:

   .container .image {
    position: relative;
    background-color: transparent;

}

.container:hover .image  {
    background-color: cornflowerblue;
    opacity: 0.9;
}

Open in new window

and the HTML for the images is this:

            <div class="w3-row" style="margin-left: -100px;">

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Hjørring.png" style="margin-top: 30px; margin-left: 283px; width: 100%; height: 100%; " alt="Hjørring" class= "image"> 
                </div>   
                </div>  

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Aalborg.png" style="margin-top: 110px; margin-left: 134px; width: 100%; height: 100%; " alt="Aalborg" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Thisted.png" style="margin-top: 121.5px; margin-left: -72.5px; width: 100%; height: 100%; " alt="Thisted" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Ringkøbing.png" style="margin-top: 192px; margin-left: -215px; width: 100%; height: 100%; " alt="Ringkøbing" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Viborg.png" style="margin-top: 175px; margin-left: -285px; width: 100%; height: 100%; " alt="Viborg" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Randers.png" style="margin-top: 200px; margin-left: -317.5px; width: 100%; height: 100%; " alt="Randers" class= "image"> 
                </div>   
                </div> 

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Århus.png" style="margin-top: 200px; margin-left: -110px; width: 100%; height: 100%; " alt="Århus" class= "image"> 
                </div>   
                </div>

                <div class= "container">
                <div class="w3-col w3-mobile" style="width:10%; height: 10%;">
                    <img src="Skanderborg.png" style="margin-top: 229px; margin-left: -625px; width: 100%; height: 100%;%alt="Skanderborg" class= "image"> 
                </div>   
                </div>
        </div>

Open in new window

Chris Stanyon

Hey Peter,

Nothing in your CSS should have any bearing on image size.

What is likely to have an effect is the width and height that you're adding to the container elements and the internal DIVs. You're setting these to 10%.

Also, trying to accuarately position elements using margins (particularly negative margins) will cause you no end of trouble. If you want to accurately position an element, then use the position CSS, for example.

position:absolute;
top: 124px;
left: 47px;

Let us know more about what you're trying to achieve and we might be able to offer some suggestions on the way forward.

Peter Kroman

ASKER

Well - I can see that I can't do it this way. When I scale the browser the individual images float around like ducks in a pond :)

What I really want is this:

I have this map showing the counties of Denmark at a given time in history. I need to be able to mark every county as an individual link. I thought that I could do that by using individual images and position them relative to each other, but it seems that I have to give up on that idea,

It there any other way that I can do that?

Chris Stanyon

Aside from scaling issues, your idea won't work because Images are rectangular and so would need to stack on top of each other to line up. This would prevent your individual links from working the way you want.

If you just want to break an image up into several different links, then using an Imagemap is the way to go. Basically, it allows you to draw 'areas' over the image - each with it's own link. Here's the example from the W3Schools:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Open in new window

You can draw shapes as retangles, circles or polygons (likely to be the one you need) and there are online generators to help you create your map. It's not going to be easy, and it's a basic solution so you may need to look around for alternatives

Peter Kroman

ASKER

Thanks Chris,

I am now working with SVG paths. Let's see where that brings us :)

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial