We Keep Coding

HTML with Javascript - Apply grayscale to images in a table, then mouseover images to go back to colored version

I had a question about using the mouseover / mouseout event in javascript along with applying grayscale to a table. The question says that I must first making an image grid (table) all gray in html. Then I need to add javascript to the html so that when I mouse over the image, the image turns into a colored image, and when I mouse out from the image, the image reverts back into a gray image. The problem said no CSS is allowed, so only using javascript and html, if possible.
Thank you so much in advance for the help, I really appreciate it!
Here is some of my code below (the table images need to start from grayscale, then apply/remove the grayscale when using the mouseover event. So far the mouseover effect only works on the first image. And I also don't know how to apply a grayscale filter over the whole table first).
function image_grayscale() {
document.getElementById("image").style.filter = "grayscale(100%)";
}
function remove_grayscale() {
document.getElementById("image").style.filter = "grayscale(0%)";
}
<div class="table">
<table border="3" align=center width="600" height="200">
<tr style="width:1" ;style="height:10%" ; bgcolor="white">
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" style="grayscale" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
<td onmouseover="remove_grayscale()" onmouseout="image_grayscale()">
<img id="image" src="https://picsum.photos/id/1067/100/100" width="100" height="100" />
</td>
</tr>
</table>

An id attribute must be unique.
Don't clutter the HTML more than necessary. It should be really easy to read.
Use addEventListener instead of onmouseover.
Method names are usually written with kebabCase (see the new method I added).
Don't repeat code. Instead, refactor similar code into a new method.
let table = document.getElementById('greyscaleTable')
table.addEventListener('mouseover', remove_grayscale);
table.addEventListener('mouseout', image_grayscale);
function image_grayscale(event) {
let element = event.target;
changeGrayscale('100%', element);
}
function remove_grayscale(event) {
let element = event.target;
changeGrayscale('0%', element);
}
function changeGrayscale(amount, element) {
let isGrayscaleImage = element.classList.contains('grayscale');
if (isGrayscaleImage) {
element.style.filter = `grayscale(${amount})`;
}
}
#greyscaleTable img {
width: 100px;
height: 100px;
}
<div id="greyscaleTable" class="table">
<table border="3" align=center width="600" height="200">
<tr>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100"/>
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
<td>
<img class="grayscale" style="filter: grayscale(100%)" src="https://picsum.photos/id/1067/100/100" />
</td>
</tr>
</table>

I'd personally suggest the following:
// define the function as a constant, using Arrow syntax;
// here we take the Event Object ('evt', passed from the (later)
// use of EventTarget.addEventListener(). From the Event-Object
// we retrieve the element to which the function was bound
// (evt.currentTarget), and update its CSSStyleDeclaration
// for the filter() function.
// We use a template-literal string (delimited with back-ticks
// to interpolate the JavaScript into the string, using the
// ${JavaScript here} notation.
// Based on the event-type we return the arguments of either
// 0 or 1; if the evt.type is exactly 'mouseenter' 0 is
// returned from the conditional operator, otherwise 1 is
// returned:
const toggleGrayscale = (evt) => evt.currentTarget.style.filter = `grayscale( ${evt.type === 'mouseenter' ? 0 : 1} )`,
// here we retrieve a NodeList of all <img> elements within the document:
images = document.querySelectorAll('img');
// we iterate over the NodeList of images to set them to
// grayscale(), initially:
images.forEach(
(img) => img.style.filter = "grayscale(1)"
);
// we iterate again (as Array.prototype.forEach() has no
// return value; here we use EventTarget.addEventListener()
// to bind the toggleGrayscale function for both the
// 'mouseenter' and 'mouseleave' events:
images.forEach(
(img) => {
img.addEventListener('mouseenter', toggleGrayscale)
img.addEventListener('mouseleave', toggleGrayscale)
});
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
<div class="table">
<table>
<tr>
<td>
<!-- I removed the size/width attributes since they don't seem to be useful, use CSS;
also duplicate ids are invalid, an id must be unique within the document:-->
<img src="https://placeimg.com/200/200/animals">
</td>
<td>
<img src="https://placeimg.com/200/200/architecture">
</td>
<td>
<img src="https://placeimg.com/200/200/nature">
</td>
<td>
<img src="https://placeimg.com/200/200/people">
</td>
<td>
<img src="https://placeimg.com/200/200/tech">
</td>
</table>
References:
Arrow functions.
CSSStyleDeclaration.
EventTarget.addEventListener().
NodeList.prototype.forEach().

Changing the background image when clicking on the div?

I am creating a table with div's that already have a background image in them. The classes are "sw", "sl", "so", "sa", "sn", and "su". I made that you could click on the div's and to the right will show the information for that div.
However, I tried adding a hover element to these div's, which work when I do not add the onclick function. With the onclick function, there is no hover that changes the div into a different background image. The background image stays the same when I click on a certain div.
How can you make the background image change when you click on the div?
Here is my HTML code:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="sw" onclick="show(0)"></div></td>
<td><div class="sl" onclick="show(1)"></div></td>
<td id="info" rowspan="3" style="width:325px;"></td>
</tr>
<tr>
<td><div class="so" onclick="show(2)"></div></td>
<td><div class="sa" onclick="show(3)"></div></td>
</tr>
<tr>
<td><div class="sn" onclick="show(4)"></div></td>
<td><div class="su" onclick="show(5)"></div></td>
</tr>
</table>
And here is my JavaScript code:
function show(num) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'INFO HERE';
}
else if(num == 1) {
outputInfo += 'INFO HERE';
}
...
document.getElementById("info").innerHTML = outputInfo;
}
Oh, and by the way, my background images are used on the CSS portion and all of the classes above share the same image but they were assigned different positions.
Is there a way to show the images as separate backgrounds if another approach to clicking on a div?

Instead of using onclick, maybe try using something Tomm did. I probably encourage you to create a class for all of these id elements. Since you had a shared background image for the original background before the function is clicked, I added background-position. Here is what I did for the script by making a function that I put in the onload of the body (first portion is for backgrounds when clicked, second portion is for original background and will only show for those that are not clicked):
function onloadPage() {
// first portion
$('#sw').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
$('#sl').click(function() {
$(this).css("background-position", "0 0");
document.getElementById("info").innerHTML = 'INFO HERE';
});
...
// second portion
$('.classname').on('click', function(e) {
if(!$(e.target).closest('#sw').length) { $('#sw').css("background-position", '0 0'); }
if(!$(e.target).closest('#sl').length) { $('#sl').css("background-position", '0 0'); }
...
}
And then the HTML:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><div class="classname" id="sw" style="background-position:0 0;"></div></td>
<td><div class="classname" id="sl"></div></td>
<td id="classinfo" rowspan="3" style="width:325px;"></td>
</tr>
</table>
Obviously you will have to adjust your background-positions to the way you need it to look.

Well, your code should looks like:
document.getElementById("info").style.backgroundImage = "url('image.png')";
here I am assuming that info is the id of the div which you want to change background.

This snippet should do. I've linked a couple of random images so you can test it.
By clicking on the div, the info is displayed on the right and that div's background gets updated. By passing the 'this' keyword as argument of the show method you can avoid logics that depend on the div's id.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.sw{
background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}
.sl{
background-image: url("https://mdn.mozillademos.org/files/7693/catfront.png");
}
</style>
<script>
function show(num, t) {
var outputInfo = "";
if(num == 0) {
outputInfo += 'This is the information about the image now displayed in div0';
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
else if(num == 1) {
outputInfo += 'This is the information about the image now displayed in div1' ;
var newUrl='url("http://www.librosweb.es/website/css/images/logo.gif")';
t.style.backgroundImage= newUrl;
}
document.getElementById("info").innerHTML = outputInfo;
}
</script>
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td style="border: 1px solid red"><div class="sw" onclick="show(0, this)"></div></td>
<td style="border: 1px solid red"><div class="sl" onclick="show(1, this)"></div></td>
<td style="border: 1px solid red" id="info" rowspan="3" style="width:325px;"></td>
</tr>
</table>
</body>
</html>

You can make a simple onclick function in javascript/jQuery ( I use this code with jQuery 1.7.1 ) like the following:
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(urlhere)');
})
Where #changeMe is the div id
$('#changeMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://firefoxzeneize.altervista.org/FirefoxLogo.png)');
})
div{
width : 512px;
height : 512px;
background-image : url("https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20170911_Google_Chrome_logo_vector_download.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="changeMe"></div>

OnClick by PhantomJS

I'm trying to get webpage context by PhantomJS,
in my webpage, i have a table tag that has my main menu and each td tag containt my menu item like this :
<tr><td colspan="3" valign="middle" height="30" bgcolor="#a9ae9f">
<div id="TopMenuID"> <table border="1" width="100%" style="height: 100%;" cellpadding="10" cellspacing="0">
<tbody><tr><!-- Row 1 -->
<td><div onclick="ajaxPageChange("tm_home.txt","TopMenuID");ajaxPageChange("index_home.txt","ContentID"); ajaxPageChange("menu_home.txt","LeftMenuID");" style="cursor: pointer; color:#000000; text-align:center; text-decoration: underline;">Home</div></td><!-- Col 1 -->
setTimeout(function() {
console.log("");
console.log("### STEP 3: Click on page internal link (aka FRAGMENT)");
page.evaluate(function() {
var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
document.querySelector("div[onclick]").dispatchEvent(ev);
});
}, 10000);
I try to call OnClick by Phantomjs and get results, but i do not know how it possible.
is there any idea for this?
thanks.

extract latex equation block from html page with querySelectorAll

I try to extract latex equation formulas from a HTML page (generated with latex2html) in order to replace latex equations images by mathjax formulas.
First, I had the following idea, here's an example :
Input :
<div align="CENTER" class="mathdisplay"><a name="eq402"></a><!-- MATH
\begin{equation}
\text{d}\,v_{k}=\partial_{j}\,v_{k}\,\dfrac{\text{d}\,y^{j}}{\text{d}\,s}\,\text{d}\,s
\end{equation}
-->
<table class="equation" cellpadding="0" width="100%" align="CENTER">
<tr valign="MIDDLE">
<td nowrap align="CENTER"><span class="MATH">d<img width="150" height="65" align="MIDDLE" border="0" src="img1919.gif" alt="$\displaystyle \,v_{k}=\partial_{j}\,v_{k}\,\dfrac{\text{d}\,y^{j}}{\text{d}\,s}\,\text{d}\,s$"></span></td>
<td nowrap class="eqno" width="10" align="RIGHT">
(<span class="arabic">5</span>.<span class="arabic">65</span>)</td></tr>
</table></div>
By inserting the following javascript code at the bottom of the HTML page :
<script type="text/javascript">
function transform() {
[].forEach.call(document.querySelectorAll('table tr img'),function(img) {
var puretext = img.getAttribute('alt');
if(!puretext || puretext == 'up' || puretext == 'previous' || puretext == 'next' || puretext == 'contents') return;
puretext = puretext.replace(/..displaystyle /g,"$");
var text = document.createTextNode(puretext);
img.parentNode.insertBefore(text, img);
img.style.display = 'none';
});
}
transform();
</script>
I get the following rendering on my HTML page, i.e I have the mathjax formulae :
$\,v_{k}=\partial_{j}\,v_{k}\,\dfrac{\text{d}\,y^{j}}{\text{d}\,s}\,\text{d}\,s$
It could be enough but I noticed that sometimes, into the HTML page, I have for "alt" attribute an incomplete formulae, here is an example :
<div align="CENTER" class="mathdisplay"><a name="eq407"></a><!-- MATH
\begin{equation}
\text{d}\,(\mathbf{V}\,\cdot\,\mathbf{n})=\mathbf{V_{M}}(M')\,\cdot\,\mathbf{n}-\mathbf{V}(M)\,\cdot\,\mathbf{n}=[\mathbf{V_{M}}(M')-\mathbf{V}(M)]\,\cdot\,\mathbf{n}=\text{d}\,\mathbf{V}\,\cdot\,\mathbf{n}
\end{equation}
-->
<table class="equation" cellpadding="0" width="100%" align="CENTER">
<tr valign="MIDDLE">
<td nowrap align="CENTER"><span class="MATH">d<img width="538" height="38" align="MIDDLE" border="0" src="img1929.gif" alt="$\displaystyle \,(\mathbf{V}\,\cdot\,\mathbf{n})=\mathbf{V_{M}}(M')\,\cdot\,\mat...
...V}(M)\,\cdot\,\mathbf{n}=[\mathbf{V_{M}}(M')-\mathbf{V}(M)]\,\cdot\,\mathbf{n}=$">d<img width="56" height="34" align="MIDDLE" border="0" src="img1930.gif" alt="$\displaystyle \,\mathbf{V}\,\cdot\,\mathbf{n}$"></span></td>
<td nowrap class="eqno" width="10" align="RIGHT">
(<span class="arabic">5</span>.<span class="arabic">70</span>)</td></tr>
</table></div>
As you can see, I have for "alt" attribute of <img :
$\displaystyle \,(\mathbf{V}\,\cdot\,\mathbf{n})=\mathbf{V_{M}}(M')\,\cdot\,\mat...
...V}(M)\,\cdot\,\mathbf{n}=[\mathbf{V_{M}}(M')-\mathbf{V}(M)]\,\cdot\,\mathbf{n}=$
The entire latex equation has not been generated by latex2html (see ... characters)
So I can't always deal with the img alt attribute and I would like to use the \begin{equation} ... \end{equation} block which is into HTML comments tag ( <!-- ... --> )
How can I get this comments block with querySelectorAll ? does it exist for example a document.querySelectorAll('div.mathdisplay a comments'),function(comments) { or something like this which could allow to extract this block of comments ?
If I could get this text block, I would save it into a variable and insert it, as I did with my first idea, before the img tag, like this :
var text = document.createTextNode(puretext);
img.parentNode.insertBefore(text, img);
img.style.display = 'none';
Any help would be nice

You can use a TreeWalker which natively supports practical node filtering strategies such as NodeFilter.SHOW_COMMENT.
var walker = document.createTreeWalker(
document.documentElement,
NodeFilter.SHOW_COMMENT
),
frag = document.createDocumentFragment(),
li, node;
while (node = walker.nextNode()) {
li = document.createElement('li');
li.textContent = node.textContent;
frag.appendChild(li);
}
document.getElementById('comment-list').appendChild(frag);
<!-- This is a comment -->
<div>
<!-- This is another comment -->
</div>
<ul id="comment-list">
</ul>

Adding a Skip Button to FastForward a .fadeIn / .fadeOut?

Just to clarify, when you load my site I have a bit of text that fades in (quote), and then fades out. Afterwards a new bit of text (my brand name) fades in.
Since I want people to have enough time to read the first text (the quote) the fade in and fade out are a bit long, however I don't want people to get impatient after visiting the site for the 5th time and having to wait every time.
Therefore I was thinking of a "skip-like" button or text (IE: SKIP) so that they can fastforward to where the brand name fades in.
Any help would be appreciated!!! Here's an example of what I currently have!!
http://jsfiddle.net/K6SpB/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<center>
<div id="mytext" align="center">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="200">
<center>
<font size="4px" id="quote" color="black">THIS IS A QUOTE.</font>
<br>
<font size="12px" id="brandname" color="black">BRAND NAME.</font>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
JAVASCRIPT
$(document).ready(function() {
$('#quote').hide().delay(1000).fadeIn(5000).delay(3000).fadeOut(2000);
$('#brandname').hide().delay(11500).fadeIn(2000);
});​
CSS
<style type="text/css">
#quote, #brandname {
position:relative;
display: none;
float:center;
}
#mytext {
}
</style>​

You probably want jQuery .stop() (http://api.jquery.com/stop/)
So, if you add a Skip link:
Skip
The code would look like this:
$('#skip').click(function(e) {
e.preventDefault();
$('#quote, #brandname').stop(true, true);
});
The first "true" tells jQuery to remove any pending animations from the animation queue, the second "true" tells it to skip straight to the end of the animation.