onMouseOver & arrays - using style to modify border

[bundaism]

The code below is meant to go through all images on the page, and add a
red border on the mouseover, and a white border on the mouseout. It's
not working and I've spend too many hours on this - please help!

Thanks... code below....

<img src="someImage.jpg">

<script type="text/javascript">
var img_elems = document.getElementsByTagName("img");

for (var i=0;i<img_elems.length;++i)
{
var img_src = img_elems[i].src;
img_elems[i].onmouseover="this.style.borderColor='red'";
img_elems[i].onmouseout="this.style.borderColor='white'";

}
</script>

[web.dev]

bu******@gmail.com wrote:

The code below is meant to go through all images on the page, and add a
red border on the mouseover, and a white border on the mouseout. It's
not working and I've spend too many hours on this - please help!

Thanks... code below....

<img src="someImage.jpg">

<script type="text/javascript">
var img_elems = document.getElementsByTagName("img");

for (var i=0;i<img_elems.length;++i)
{
var img_src = img_elems[i].src;
img_elems[i].onmouseover="this.style.borderColor='red'";
img_elems[i].onmouseout="this.style.borderColor='white'";

}
</script>

Try the following:

<script type = "text/javascript">
function setup()
{
var len = document.images.length;

for(var i = 0; i < len; ++i)
{
assignEvent(i);
}

}

function assignEvent(index)
{
document.images[index].onmouseout = mOut;
document.images[index].onmouseover = mOver;
}

function mOut()
{
this.style.border = "1px solid white";
}

function mOver()
{
this.style.border = "1px solid red";
}

window.onload = setup;
</script>

For border color to work, you'll need border width. That's the reason
for using border instead of assigning all of those separate css values.

[bundaism]

THanks it works!
web.dev wrote:

bu******@gmail.com wrote:

The code below is meant to go through all images on the page, and add a
red border on the mouseover, and a white border on the mouseout. It's
not working and I've spend too many hours on this - please help!

Thanks... code below....

<img src="someImage.jpg">

<script type="text/javascript">
var img_elems = document.getElementsByTagName("img");

for (var i=0;i<img_elems.length;++i)
{
var img_src = img_elems[i].src;
img_elems[i].onmouseover="this.style.borderColor='red'";
img_elems[i].onmouseout="this.style.borderColor='white'";

}
</script>

Try the following:

<script type = "text/javascript">
function setup()
{
var len = document.images.length;

for(var i = 0; i < len; ++i)
{
assignEvent(i);
}

}

function assignEvent(index)
{
document.images[index].onmouseout = mOut;
document.images[index].onmouseover = mOver;
}

function mOut()
{
this.style.border = "1px solid white";
}

function mOver()
{
this.style.border = "1px solid red";
}

window.onload = setup;
</script>

For border color to work, you'll need border width. That's the reason
for using border instead of assigning all of those separate css values.