Javascript Course

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.
Robot     Love     Angel

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Highlight Images on click

Last accessed pages

  1. PHP Unzipper - Extract Zip, Rar Archives (12462)
  2. Add Tag to Selected Text in textarea with JavaScript (2389)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (57483)
  4. Draw arrow markers between clicks coords in Canvas (2009)
  5. Countdown Timer with starting time added into a form (9439)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (522)
  2. PHP Unzipper - Extract Zip, Rar Archives (426)
  3. SHA256 Encrypt hash in JavaScript (403)
  4. Read Excel file data in PHP - PhpExcelReader (360)
  5. Create simple Website with PHP (335)