Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > onMouseOver & arrays - using style to modify border

Reply
Thread Tools

onMouseOver & arrays - using style to modify border

 
 
bundaism@gmail.com
Guest
Posts: n/a
 
      08-22-2006
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>

 
Reply With Quote
 
 
 
 
web.dev
Guest
Posts: n/a
 
      08-22-2006

http://www.velocityreviews.com/forums/(E-Mail Removed) 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.

 
Reply With Quote
 
 
 
 
bundaism@gmail.com
Guest
Posts: n/a
 
      08-23-2006
THanks it works!
web.dev wrote:
> (E-Mail Removed) 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
border-color: #003366; border-width: 2px; =?UTF-8?B?TWFydGluIFDDtnBwaW5n?= HTML 64 07-30-2006 04:01 PM
Drop Down List Border Width vs Text Box Border Width Coder ASP .Net 1 06-24-2006 01:27 PM
row bottom border in inner table not matching up with row border in outer table phl HTML 1 06-08-2006 03:43 PM
Datagrid Border showing when I say no border tshad ASP .Net 0 01-31-2005 05:40 PM
Newbie: How to use onMouseOver to change image border? deko Javascript 1 07-29-2004 01:30 AM



Advertisments