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 type="text/javascript">
// 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.
Robot     Love     Angel

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Highlight Images on click

Last accessed pages

  1. AJAX with POST and PHP (11915)
  2. SHA256 Encrypt hash in JavaScript (5787)
  3. Register and show online users and visitors (22779)
  4. innerHTML and outerHTML to Get and Replace HTML content (17554)
  5. Node.js Move and Copy file (3517)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (447)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)