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.src;
img_elems.onmouseover="this.style.borderColor='red'";
img_elems.onmouseout="this.style.borderColor='white'";

}
</script>

 

[web.dev]

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.src;
img_elems.onmouseover="this.style.borderColor='red'";
img_elems.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!

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.src;
img_elems.onmouseover="this.style.borderColor='red'";
img_elems.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.