Hotspots and Resizing Images

abirhasan — Sat, 03 Nov 2012 09:00:43 GMT

hi,

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

<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>

Thanks

topic Hotspots and Resizing Images in Archive

Hotspots and Resizing Images