Web Hosting Forum | Lunarpages

Author Topic: Hotspots and Resizing Images  (Read 6218 times)

Offline dkteddy

  • Trekkie
  • **
  • Posts: 13
Hotspots and Resizing Images
« on: November 02, 2012, 07:00:06 AM »
I have a background image that does automatic resizing when the user maximizes their window. My problem is that the hot spots that I create do not stay in the same location when the user resize it them ... I have tried many methods and none worked so far. I tried setting position to relative, fixed, changing the height of width of the background, but nothing ...

I need help. Here is my code:

Code: [Select]
<style>

img.bg {
/* Set rules to fill background */
min-height: auto;
min-width: auto;

/* Set up proportionate scaling */
width: auto;
height: 100%;

/* Set up positioning */
position: fixed;
top: 0;
left: 13%;
right: 13%;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
</style>
<style>
.hotspotted {
position: relative;
}

.hotspot {
display: block;
position: fixed;
visibility: visible;
background-image: url(sistersbtn_s4.png);
}

#calendar {
height: 107px;
left: 31px;
top: 646px;
width: 196px;
}

#sfhome{
height: 102px;
right: 941px;
top: 503px;
width: 265px;
}

#NEWHOTSPOT{
height: 102px;
width: 265px;
top: inherit;
left: 40%;
right: 13%;
}
</style>

</head>

<body bgcolor="#A3BF8F">
<div class="hotspotted">
    <img src="1260x875back.fw.jpg" width="100%" height="100%" class="bg" border="0">
    <a href="http://tiffinfranciscans.org/category/st-francis-calendar/" name="calendar" class="hotspot" id="calendar"></a>
    <a href="http://www.stfrancistiffin.org/" name="sfhome" class="hotspot" id="sfhome"></a>
    <a href="http://www.nba.com/" name="NEWHOTSPOT" class="hotspot" id="NEWHOTSPOT"></a>
</div>

Please help :(

Offline dkteddy

  • Trekkie
  • **
  • Posts: 13
Re: Hotspots and Resizing Images
« Reply #1 on: November 05, 2012, 07:45:22 AM »
Anyone? Not sure if I posted this in the right forum ...  :(

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6225
Re: Hotspots and Resizing Images
« Reply #2 on: November 05, 2012, 10:27:22 AM »
Is this particular to Dreamweaver? If so, you're probably in as good a place as any...

From the code you gave, are you sure this is a background image? It has an <img> tag, so I would say it's a foreground image. Anyway, I don't think true background images scale, while foreground images do (per width and height). Does the image aspect ratio matter to you? If you want to preserve it on window scaling, I think you'll have to go to a fixed (1260 x 875) size and accept scrolling. Your hotspots specify fixed (pixel) offsets over the "background" image, so naturally as the image rescales, the hotspots are going to be in different places as the underlying image changes. What happens if you specify left/right and top as percentages? I would think that the hotspots should then move in unison with the changing background. The problem then becomes that the hotspots are of fixed size and will probably eventually collide.

What if you merged your hotspot images into the "background" image and used transparent divs or images of percentage size for the links, or just use HTML's built-in image map capability? I haven't played with this kind of thing in ages and have forgotten most of it, but maybe it will give you some ideas.
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

Offline MrPhil

  • Senior Moderator
  • Berserker Poster
  • *****
  • Posts: 6225
Visit My Site

E-mail Me
  
-= From the ashes shall rise a sooty tern =-

 

Share |