Highlight Images on click

The code presented below can be used to highlight images on page when the user clicks on them then, if the user clicks again on that image, the highlight style is removed.
- The script adds CSS style with JavaScript: "padding", "background", and "border" to the image clicked by the user, when the user clicks again on that image, the highlight effect is removed.

Code of the script:

<script>
// set image properties, for Highlight effect added when click
var imgProp = {
 'padding': '3px',
 'backgroundColor': '#eded01',
 'borderSize': '1ps',
 'borderStyle': 'dashed',
 'borderColor': '#0001fe'
};

// function to highlight IMGs on click - from: https://coursesweb.net/
function highlightImg() {
 // gets all <img> tags, and their number
 var allimgs = document.getElementsByTagName('img');
 var nrallimgs = allimgs.length;

 // traverses the <img> elements, and register onclick to each one
 // else, apply the properties defined in $imgProp
 for(i=0; i<nrallimgs; i++) {
 allimgs[i].onclick=function() {
 // if borderStyle is already applied, anulates the 'padding', 'background' and 'border' properties
 if(this.style.borderStyle == imgProp.borderStyle) {
 this.style.padding = 'auto';
 this.style.background = 'none';
 this.style.border = 'none';
 }
 else {
 this.style.padding = imgProp.padding;
 this.style.backgroundColor = imgProp.backgroundColor;
 this.style.borderSize = imgProp.borderSize;
 this.style.borderStyle = imgProp.borderStyle;
 this.style.borderColor = imgProp.borderColor;
 }
 }
 }
}

// calls the highlightImg() function to apply the effect
highlightImg();
</script>

- In the imgProp object you can define the highlight style: "padding", "background", and "border" properties.
- The effect is for all the <img> tags in the page; if you want the highlight effect to be applied only to the images added into a specified HTML element, replace this code:

var allimgs = document.getElementsByTagName('img');

With this line of code ('idelm' is the ID of the element in which the images are included).

var allimgs = document.getElementById('idelm').getElementsByTagName('img');

- The JavaScript script must be added at the end of the HTML document, before the ending </body> tag.

• Demo, click on these images.

<<-Recursive function to create .. -- Disable button and Enable ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Last accessed pages

Mysql SELECT JOIN tables on two different Databases ⁽⁴⁴⁹⁸⁾
jQuery UI draggable - Drag elements ^(11448)
Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ^(142520)
Using the Bone Tool ⁽⁴²⁵³⁾
Node.js Move and Copy Directory ^(20134)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽⁵²³⁾
The Mastery of Love ⁽⁶⁵⁾
CSS cursor property - Custom Cursors ⁽⁶²⁾
Read Excel file data in PHP - PhpExcelReader ⁽⁵⁹⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽⁴⁴⁾