Adjust the color when hovering with the mouse

Question

Adjust the color when hovering with the mouse

I want the border color to change to black instead of #FF00FF when hovering over an image. Here's my current JavaScript code:

javascript:for(i=0;i<document.getElementsByTagName('img').length;i++)  
     {
     var imgTag=document.getElementsByTagName('img')[i];   
     imgTag.style.border='5px solid #FF00FF';
     imgTag.title=''; 
     imgTag.onclick=function()
          { 
         return !window.open('http://www.example.com/#/'+this.src);
          }
      }
    void(0)

Any suggestions on how I can achieve this? Thank you. -Frank

javascript

Answer 1

Answer №1

To create a dynamic effect on images, you must attach event listeners for the mouseover and mouseout events in order to alter the border color of the image:

const images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseover', function() {
        this.style.borderColor = '#000';
    });
    images[i].addEventListener('mouseout', function() {
        this.style.borderColor = '#f0f';
    });
}

Take a look at an example here: http://jsfiddle.net/bNk4Y/

Answer 2

To create a dynamic effect on images, you must attach event listeners for the mouseover and mouseout events in order to alter the border color of the image:

const images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseover', function() {
        this.style.borderColor = '#000';
    });
    images[i].addEventListener('mouseout', function() {
        this.style.borderColor = '#f0f';
    });
}

Take a look at an example here: http://jsfiddle.net/bNk4Y/

Answer 3

Answer №2

Is there a bug in the code you're using? If I understand your question correctly, this solution should work: HTML:

<img src="" >
<img src="">
...

JS:

var imgs = document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++)
{
    imgs[i].onmouseover = function() {this.style.border="1px red solid";};   
}

Keep in mind that achieving the same effect with CSS is preferred for better practice - especially if users have JavaScript disabled.

img:hover {
border: 1px red solid;
}

Answer 4

Is there a bug in the code you're using? If I understand your question correctly, this solution should work: HTML:

<img src="" >
<img src="">
...

JS:

var imgs = document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++)
{
    imgs[i].onmouseover = function() {this.style.border="1px red solid";};   
}

Keep in mind that achieving the same effect with CSS is preferred for better practice - especially if users have JavaScript disabled.

img:hover {
border: 1px red solid;
}

Adjust the color when hovering with the mouse

Answer №1

Answer №2

Similar questions

How can I resolve the error message "Uncaught TypeError: Cannot use 'in' operator to search for 'length' in" to successfully display my data?

What is the best way to utilize moment.js for adding days while excluding weekends?

Switch between selecting every group of 3 items and every group of 4 items

Is there a way to access the initial item in a JavaScript array?

No data being displayed or returned from API when using async await

Execute function upon initial user interaction (click for desktop users / tap for mobile users) with the Document Object Model (DOM)

Node.js is executing the CRON process twice

What is the best way to include two class names within a single div using Next.js?

What is the best way to integrate nano.uuid into a series of promises that are fetching data from the database?

What is the correct way to register and utilize props in a newly created Vue custom element?

Disregard the Field File when utilizing jQuery validation

transform an array to an array consisting of objects

Vue: The enigmatic world of ghost properties?

How to Boost SEO with AngularJS by Customizing Meta Descriptions for Every Partial

boosting the maximum number of requests allowed

Guide to inserting a Link or "a" tag into the dropdown menu choices in React

Extracting IDs, classes, and elements from a DOM node and converting it into a string format

Angular 4 Observables: Triggered Twice Due to Successive Subscribers

Other options for positioning background in SVG or using CSS within SVG could include center center alignment settings

What exactly is the purpose of editing a host file?