The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Resizing image for browser size with hotspots for ‘buttons’

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #31295

    I hope this makes sense and hopefully someone can help me out.

    I just used the idea for scaling an image to suit the size of the browser. I created the image in photoshop and inserted into dreamweaver. All is working but I am stuck on how to create the buttons and keep them to scale with the size of the browser.

    This is what I have done.
    Created a website pages as an image in Photoshop (was just a mock design but after seeing the tutorial on scaling thought I would just use this as an image)
    Inserted image into dreamweaver and added CSS code to make it resize with browser size (all working correctly)
    Tried inserting a hotspot over the ‘buttons’ on the image so that I can link to other pages – this is where I get stuck. In dreamweaver it looks correctly placed but in the browser the hotspot will be too far to the left of the ‘button’ or when the browser is sized smaller it is too far to the right and never over the correct ‘button’

    How am I able to make sure that the hospot stays in the correct place no matter what size the browser is? Is this possible?

    Thank you :)


    Sorry a bit of a newby here.
    My site is not up and running yet I am only previewing through Dreamweaver.
    I have moved the hotspots to different positions (so not directly over the ‘button’) to see if that makes a difference. I can get it over the correct spot in the browser on my laptop but when I reduce the size of the browser the image resizes but the hotspot will not stay over the same position as it was when the browser was at full size. (I hope that makes some sense)
    I’m not sure how I can demonstrate this as my site is not live yet. Any suggestions? Thanks

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.