Enlarge Only 1 Div at a Time
To enlarge only 1 div at a time, try this:
Enlarge Only 1 Div at a Time
Note that s1, s2, s3, and s4 were used for both height and width. There's no reason you cannot use two separate variables for each div, a height variable and a width variable. Also note that the changewidth(w) function gets a parameter passed into the w variable when the function call is triggered by a click event onClick="changewidth('s1') and passes one of the 4 id values ('s1', 's2', 's3', or 's4') into this function so the getElementById("s1") method can access the div to change.
<HTML><HEAD>
<SCRIPT language="javascript">
<!--
var w = "s1";
var s1 = 100
var s2 = 100
var s3 = 100
var s4 = 100
function changewidth(w){
e=document.getElementById("s1");s1=100; if (w=='s1'){s1=200}
e.style.width = s1 + 'px';
e.style.height = s1 + 'px';
e=document.getElementById("s2");s2=100; if (w=='s2'){s2=200}
e.style.width = s2 + 'px';
e.style.height = s2 + 'px';
e=document.getElementById("s3");s3=100; if (w=='s3'){s3=200}
e.style.width = s3 + 'px';
e.style.height = s3 + 'px';
e=document.getElementById("s4");s4=100; if (w=='s4'){s4=200}
e.style.width = s4 + 'px';
e.style.height = s4 + 'px';
}
function wipe(){window.status= " ";} //erase status bar or give it a desired message here (between quotes)
// -->
</SCRIPT>
</HEAD>
<BODY>
<div id="s1" style="position:absolute; top:50px; left:50px; width:100px; height:100px; background-color:red; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s2" style="position:absolute; top:50px; left:550px; width:100px; height:100px; background-color:blue; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s3" style="position:absolute; top:300px; left:50px; width:100px; height:100px; background-color:yellow; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div id="s4" style="position:absolute; top:300px; left:550px; width:100px; height:100px; background-color:green; text-align:center;"><br><br><br><b>div box</b></div><BR>
<div style="position:absolute; left:50px; top:30px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s1');">Change size.</a></div>
<div style="position:absolute; left:550px; top:30px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s2');">Change size.</a></div>
<div style="position:absolute; left:50px; top:280px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s3');">Change size.</a></div>
<div style="position:absolute; left:550px; top:280px;"><a href="javascript:void(0)" onMouseOver="wipe();return true;" onClick="changewidth('s4');">Change size.</a></div>
</BODY>
</HTML>