Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post

    scalable image AND its map

    the following is a simple way to make background image scalable.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #background
    {
    width:100%; height:100%; position: absolute; z-index: -1; top: 0; left:0;
    }
    </style>
    <title>Untitled Document</title>
    </head>
    
    <body>
    <img id="background" src="png_1.png"/>
    </body>
    </html>
    how to do the same to the map of hotspots created for the image in, say, fireworks? Are there any better suited tools?

    The purpose is being able to have an image scalable together with its responsive elements, with some html objects on top, also placed relatively to the scale of the image.

    I wonder if that is possible at all or a different environment would be needed. any advise?

  • #2
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    200 views and no reply? maybe it is the wrong subforum?

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,089
    Thanks
    15
    Thanked 246 Times in 246 Posts
    You're going to have to use either javascript or a server side language write the code for the map. It will need to 'know' the size of the image
    and multiply the scale of the map accordingly.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    so it is possible? Great. JS is my option of choice.

    Now it seems rather clear.
    I guess I understand what you mean. The map coordinates will be variables derived with such a formula:

    xnew=resolutionew*xold/resolutionold

    Is this correct?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •