reposition the image according to the div size

thava · March 19th, 2012, 09:02 AM

Dear all,

I need help for the below task.

There is one div element with the attribute width=900 and height=540, on that div has multiple images with positioned like right , left, bottom and top.

When i change the div width=1600 and height=900 dynamically automatically those image also to be positioned it accordingly.

Sample code:
==========
<div class="myclass" id="mydiv" style="width: 960px; height: 540px;">
<img alt="bird" src="bird-s.png" style="left: -62px; top: 85px; z-index: 11; position: absolute;">
<img alt="king" src="king-s.png" style="left: 356px; top: 432px; z-index: 12; position: absolute;">
<img alt="phone" src="phone-s.png" style="left: 866px; top: 196px; z-index: 13; position: absolute;">
<img alt="india" src="india-s.png" style="left: 420px; top: -54px; z-index: 14; position: absolute;">
</div>

Thanks in advance,

Thanks,
Thava

disel2010 · March 22nd, 2012, 06:30 AM

Hi,

I have no clue yet how you are going to programmatically resize your div... , but the way to go is to use separate css classes.

Your html could look like this:

Code:

 
<div class="Size1" id="mydiv" >
   <img class="topleft" alt="bird" src="bird-s.png" >
   <img class="topright" alt="king" src="king-s.png" >
   <img class="bottomleft" alt="phone" src="phone-s.png" >
   <img class="bottomright" alt="india" src="india-s.png" >
</div>

Your css could look like this:

Code:

 
Size1 {
	border: solid 1px red;
	width: 960px;
	height: 540px;
}

.Size1 img {
	border: solid 1px red
}
.Size1 img.topleft {
	left: -62px;
	top: 85px;
	z-index: 11;
	position: absolute;
}
.Size1 img.topright {
	left: 356px;
	top: 432px;
	z-index: 12;
	position: absolute;
}
.Size1 img.bottomleft {
	left: 866px;
	top: 196px;
	z-index: 13;
	position: absolute;
}
.Size1 img.bottomright {
	left: 420px;
	top: -54px;
	z-index: 14;
	position: absolute;
}

.Size2	 {
	border: solid 1px green;
	width: 960px;
	height: 540px;
}
.Size2 img.topleft {
	left: 0px;
	top: 10px;
	z-index: 11;
	position: absolute;
}
.Size2 img.topright {
	left: 500px;
	top: 10px;
	z-index: 12;
	position: absolute;
}
.Size2 img.bottomleft {
	left: 0px;
	top: 500px;
	z-index: 13;
	position: absolute;
}
.Size2 img.bottomright {
	left: 500px;
	top: 500px;
	z-index: 14;
	position: absolute;
}

And your javascript could look like this:

Code:

 
function ResizeThem(){
 	if (document.getElementById("mydiv").className == "Size1")
	 	document.getElementById("mydiv").className = "Size2";
	else
		document.getElementById("mydiv").className = "Size1";
 }

I hope this helps, success !