So, now I just type in this. Initially, I was going for the iframe target but I had the target on the picture already. What I wanna do is when I click on the image, the description will come out on the second td iframe. How do I link the function to the iframe( the 1st 1)
<script>
function myFunction(){
var resultBox = document.getElementById("scarf1");
if(resultBox == "scarf1.jpg"){ // <= you can put your condition here
resultBox.innerHTML="A soft brushed cashmere scarf featuring the iconic check. The scarf is made in Scotland at a mill with a long heritage in producing cashmere.To create a subtle lustre and soft texture, the cashmere is washed in spring water, then woven on traditional looms and brushed with natural teasels.Measuring 168 x 30cm/66.1 x 11.8in, the design is hand-finished with fringing.";
}</script>
<table>
<tr>
<td width="190px" height="190px">
<img alt="HERITAGE CHECK CASHMERE SCARF" onclick="myFunction()" id="scarf1"height="100" src="scarf1.jpg" width="100" onmouseover="bigImg(this)" onmouseout="normalImg(this)"/>
</td>
<td>
<iframe src="Burberry_product_women_accessories_frame2.html" target="frame1" name="frame1" scrolling="no">
</iframe></td>
<td rowspan="4">
<iframe height="750" width="480" target="frame" name="frame" scrolling="no" float="right" src="Burberry_product_women_accessories_frame.html">
</iframe>
</td>
</tr>
<tr>
<td width="190px" height="190px">
<img alt="HERITAGE CASHMERE SCARF" height="100" src="scarf2.jpg" width="100" onmouseover="bigImg2(this)" onmouseout="normalImg2(this)" />
</td>
<td>HERITAGE CASHMERE SCARF</td>
</tr>
<tr>
<td width="190px" height="190px">
<img alt="HAYMARKET CHECK CONTINENTAL WALLET" height="100" src="wwallet.jpg" width="100" onmouseover="bigImg3(this)" onmouseout="normalImg3(this)"/>
</td>
<td>HAYMARKET CHECK CONTINENTAL WALLET</td>
</tr>
<tr>
<td width="190px" height="190px">
<img alt="CHECK FOLDING UMBRELLA" height="100" src="wumbrella.jpg" width="100" onmouseover="bigImg4(this)" onmouseout="normalImg4(this)"/>
</td>
<td>CHECK FOLDING UMBRELLA</td>
</tr>
</table>
function myFunction(){
var resultBox = document.getElementById("demo");
if(textA){ // <= you can put your condition here
resultBox.innerHTML=textA;
}else{
resultBox.innerHTML=textB;
}
// OR you can use ternary operator
// resultBox.innerHTML = (textA) ? textA : textB;
}
Updated
It's hard to know what are you trying to do, however it seems your want put html when particular image is found..
HTML
<img alt="HERITAGE CHECK CASHMERE SCARF" onclick="myFunction('scarf1.jpg')"
JS
function myFunction(imgVal){
var resultBox = document.getElementById("resultBox");
// here is the id of result element instead ---^--- of resultBox
if(imgVal == "scarf1.jpg"){ // <= you can put your condition here
resultBox.innerHTML="A soft brushed cashmere....... ";
}
}
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(text) {
document.getElementById("demo").innerHTML = text;
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction(/* What you need to check */ ? 'Text 1' : 'Text 2')">Click me</button>
<p id="demo"></p>
</body>
</html>
Here you go:
JS:
function myFunction()
{
i=true; // i is true
if (i) // Check if i is true.
{
document.getElementById("demo").innerHTML="i is true"; // Event to do if i is true
}
else // else if i is not the condition above (true)
{
document.getElementById("demo").innerHTML="i is false";
/*
*Event to do if i is not the condition above
*/
}
}
here is something that you can test:
Not the best code, but you can copy paste this into the w3schools editor and you should be able to see it in action.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
if(document.getElementById("demo").innerHTML == "Hello World") {
document.getElementById("demo").innerHTML="Click Me";
} else {
document.getElementById("demo").innerHTML="Hello World";
}
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Related
So I'm on a project which requires me to use table, and forbids me to use any div tag.
I want to make a slider in one row of my table.
I want the image to change with a click on other image in the second row.
I've managed to do that using this code:
function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}
And the html:
<HTML>
<HEAD>
<TITLE>
Home -- RTR
</TITLE>
<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" />
<SCRIPT src="../script.js"></SCRIPT>
</HEAD>
<BODY>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');">
<img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');">
</td>
</tr>
</table>
</BODY>
</HTML>
But that code doesn't have any transition.
I've tried using jquery:
$("#imgthumb1").click(function() {
$("#imgblockjs").fadeOut(1000, function changeImage(a) {
document.getElementById("imgblockjs").src=a;
}).fadeIn(1000);
return false;
});
I'm actually very new to jquery and haven't learn all the basics, I got the above jquery code on the internet and modified it a bit, thinking it would work. But it doesn't.
Can someone fix it? Or maybe use a different code? Basically I want the attribute src to be changed instead of having images on top of another. But if it's not possible, I'm open to any suggestion.
Also if possible I planned to make the picture change every 5 seconds automatically, using transition. But my first question is the priority
Thanks in advance
You can change that images dynamically using JQuery
I have added the classes to the images so that I can access them using class
Main Image: added class "fullimage"
small Images: added class "changeimage"
$('.changeimage').click(function(){
//getting the current clicked image source
var clickedItemImage=$(this).attr('src');
//setting the src of your main image
$(".fullimage").attr('src',clickedItemImage);
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<table border="0" width="100%" height="10px" cellspacing="0">
<tr>
<td colspan="4" >
<img id="imgblockjs" class="fullimage" src="../img/singa.jpg" width="100%" height="300px" />
</td>
</tr>
<tr>
<td colspan="4" id="imgchanger">
<img class="changeimage" src="../img/singa.jpg" id="imgthumb">
<img class="changeimage" src="../img/gajah.jpg" id="imgthumb">
</td>
</tr>
</table>
I hope it helps :)
$("img").on("click", function(){
$("#imgblockjs").fadeOut(1000, function() {
$("#imgblockjs").attr("src",this.src);
}.bind(this)).fadeIn(1000);
});
If an image is clicked, change the #imgblockjs.src to this images src...
I have adapted this lightbox code for a project I am working that involves image maps. Here is what it looks like in my project, I have this for each area element so that clicking on each one will open a different lightbox:
<body>
<center><img src="Slides/Slide2.jpg" style="width:100%; height:auto;" alt="" USEMAP="#Map"></center>
<map name="Map" id="Map">
<div id="grayBG" class="grayBox" style="display:none;"></div>
<div id="LightBox1" class="box_content" style="display:none;">
<table cellpadding="3" cellspacing="0" border="0">
<tr align="left" style="height: 100%; width: 100%;">
<td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">
<div>X</div>
<object type="text/html" data="Content/2-1.html" style="height: 400px; width: 600px;"></object>
</div>
<area alt="" title="" href="#" shape="poly" coords="145,365,540,365,540,430,144,430" onclick="displayHideBox('1'); return false;"/></td>
</tr>
</table>
</div>
</map>
The Javascript code I am using is the same as from the website linked above, I'll put it here for convenience:
<script type="text/javascript" language="javascript">
/* Superior Web Systems */
function displayHideBox(boxNumber)
{
if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
document.getElementById("LightBox"+boxNumber).style.display="block";
document.getElementById("grayBG").style.display="block";
} else {
document.getElementById("LightBox"+boxNumber).style.display="none";
document.getElementById("grayBG").style.display="none";
}
}
</script>
I am currently only able to exit out of the lightbox by clicking on the "X" in the corner of the box. I want to be able to exit it by clicking anywhere outside of the box or by hitting the esc key.
if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
document.getElementById("LightBox"+boxNumber).style.display="block";
document.getElementById("grayBG").style.display="block";
} else {
var currentLightbox = document.getElementById('LightBox' + boxNumber);
if (!currentLightbox.is(e.target) // if the target of the click isn't the container...
&& currentLightbox.has(e.target).length === 0) // ... nor a descendant of the container
|| e.keyCode == 27 // if the user presses esc
{
document.getElementById("LightBox"+boxNumber).style.display="none";
document.getElementById("grayBG").style.display="none";
}
}
This part should go in the section with the else statement. Let me know if it helps :)
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>
I have a JSfiddle for an example
http://jsfiddle.net/pAQTn/8/
What i want is my div to be adjacent to the images and i want the text to appear on click of the image
Another thing i would like is for the text to contain which image no i clicked from 1-4
THIS IS MY HTML
<table border="1">
<tr>
<td>
<img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100" />
</td>
<td>
<img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
</td>
</tr>
<tr>
<td>
<img onlick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
</td>
<td>
<img onclick="imgclick()" src="http://a1.mzstatic.com/us/r1000/095/Purple/v4/f3/ac/2f/f3ac2f01-fa54-2dd6-09fc-5cee611d42db/mzl.cakizdof.100x100-75.jpg" alt="Pulpit rock" width="100" height="100">
</td>
</tr>
</table>
<div id="txtarea">
</div>
This is my CSS
img:hover{
border:1px solid #0000ff;
width:120px;
height:120px;
}
This is my JavaScript
function imgclick() {
txtarea.innerhtml="You clicked the baby no :";
}
jsFiddle
Try this:
function imgclick(e) {
src = (e.parentNode.parentNode.rowIndex * 2) + e.parentNode.cellIndex + 1;
txtarea = document.getElementById('txtarea');
txtarea.innerHTML = "You clicked the baby no :" + src;
}
I am not sure what you want to display on the text no. On my example I put onclick = "imgclick(this)" wich will connect the function with the image you click in.
In the example you get the img nr from the table position.
Note also: on your html the 3rd picture has onlick, it should be onclick
just put number inside: onclick="imgclick(1)", onclick="imgclick(2)", etc. And add parameter to your function
function imgclick(num) {
alert("hey");
txtarea.innerHTML="You clicked the baby no "+num;
}
I have 2 IP Cameras that have a internal server page (i.e. http:\192.168.1.10\video.html). This page receives jpeg images from the camera and auto-refreshes (loads) using javascript.
Source code from the video.html
<html>
<head>
<title>ipCam - JPEG Video</title>
<style type='text/css'>
html,body
{
background-color:white;
color:black;
font-family:arial;
font-size:12pt;
}
a,a:visited,a:active
{
color:grey;
text-decoration:none;
}
a:hover
{
text-decoration: underline;
}
h1
{
background-color:black;
color:white;
padding:5px;
}
h2
{
background-color:lightgrey;
padding:5px;
}
</style>
<script type='text/javascript'>
function loadImage()
{
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}
</script>
</head>
<body>
<img id='the_img' src='image.jpg' onload='loadImage()' onerror='loadImage()'>
<br><br>
<a href='.'>Home</a>
</body>
What I would like to do is build a custom site that has both live feeds in it. I would prefer not to use <iframe>. I would rather use Javascript or something of the sort.
I have a basic understanding of HTML but very little Javascript experience. I can obviously look at the code a get a good idea of what is going on, but this has stumped me!
Any help would be appreciated!
I would guess that you could create a new HTML page (just copy the video.html from one of the cameras) on a local webserver and modify the script to include the ID of the img element you are updating and the IP address of the camera you are grabbing the feed from...something like this (which is set to automatically update the images every 4 seconds) -- (disclaimer: air code, not tested)
Thanks #A.M.K. for fixing some stupid mistakes in my code:
<script type='text/javascript'>
function loadImage(imgID, address)
{
var now=new Date();
document.getElementById(imgID).src='http://' + address + '/image.jpg?'+now.getTime();
}
setInterval(function() {
loadImage("the_img_1", "192.168.0.1");
loadImage("the_img_2", "192.168.0.2");
}, 4000); //Interval to refresh at, in milliseconds
</script>
Then just setup another img tag to receive the image:
<body>
<img id='the_img_1' src='http://192.168.0.1/image.jpg'>
<br><br>
<img id='the_img_2' src='http://192.168.0.2/image.jpg'>
<a href='.'>Home</a>
</body>
Note that you have two img elements now, each with a unique id which is fed to the function along with the IP address of the camera.
That may not work exactly in your situation, but that should give you an idea of how to accomplish it...
// JS 9 CAM...
//LAN.JS add http : // if you need
var URL11='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL12='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL13='IP:Port/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=XXXXX&pwd=XXXXX';
var URL14='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL15='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL16='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL17='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL18='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var URL19='IP:Port/snapshot.cgi?&user=XXXXX&pwd=XXXXX';
var L=window.location.search;
L=L.substring(1,5);
if(L=="")L=1;
NewImage=new Image();
var I=new Date().getTime();
var imgW=320*L;
function kamera1011(){document.getElementById("imgDisplay11").src=URL11+'&'+I++;};
function kamera1012(){document.getElementById("imgDisplay12").src=URL12+'&'+I++;};
function kamera1013(){document.getElementById("imgDisplay13").src=URL13+'&'+I++;};
function kamera1014(){document.getElementById("imgDisplay14").src=URL14+'&'+I++;};
function kamera1015(){document.getElementById("imgDisplay15").src=URL15+'&'+I++;};
function kamera1016(){document.getElementById("imgDisplay16").src=URL16+'&'+I++;};
function kamera1017(){document.getElementById("imgDisplay17").src=URL17+'&'+I++;};
function kamera1018(){document.getElementById("imgDisplay18").src=URL18+'&'+I++;};
function kamera1019(){document.getElementById("imgDisplay19").src=URL19+'&'+I++;};
function kamera1020(){document.getElementById("imgDisplay20").src=URL20+'&'+I++;};
function kamera1021(){document.getElementById("imgDisplay21").src=URL21+'&'+I++;};
function kamera1022(){document.getElementById("imgDisplay22").src=URL22+'&'+I++;}
<! HTML-index.htm >
<html>
<script language="JavaScript" src="js/lan.js"></script>
<body onload="kamera1011(); kamera1012(); kamera1013(); kamera1014(); kamera1015(); kamera1016(); kamera1017(); kamera1018(); kamera1019();>
<table border="1" width="100%" cellspacing="1" cellpadding="1">
<tr>
<td width="100%" align="center">
</td>
<td>
<a href="index.htm">
Updates Cams...
</a>
</td>
</tr>
<tr>
<td>
<! Cam 1 >
<img id="imgDisplay11" border="1" width="412" height="318" onload=setTimeout("kamera1011()",10) onerror=setTimeout("kamera1011()",100)>
</td>
<td>
<! Cam 2 >
<img id="imgDisplay12" border="1" width="412" height="318" onload=setTimeout("kamera1012()",10) onerror=setTimeout("kamera1012()",100)>
</td>
<td>
<img id="imgDisplay13" border="1" width="412" height="318" onload=setTimeout("kamera1013()",10) onerror=setTimeout("kamera1013()",100)>
</td>
</tr>
<tr>
<td>
<img id="imgDisplay14" border="1" width="412" height="318" onload=setTimeout("kamera1014()",10) onerror=setTimeout("kamera1014()",100)>
</td>
<td>
<! Cam 5 >
<img id="imgDisplay15" border="1" width="412" height="318" onload=setTimeout("kamera1015()",10) onerror=setTimeout("kamera1015()",100)>
</td>
<td>
<! Cam 6 >
<img id="imgDisplay16" border="1" width="412" height="318" onload=setTimeout("kamera1016()",10) onerror=setTimeout("kamera1016()",100)>
</td>
</tr>
<tr>
<td>
<! Cam 9 >
<img id="imgDisplay17" border="1" width="412" height="318" onload=setTimeout("kamera1017()",10) onerror=setTimeout("kamera1017()",100)>
</td>
<td>
<! Cam 8 >
<img id="imgDisplay18" border="1" width="412" height="318" onload=setTimeout("kamera1018()",10) onerror=setTimeout("kamera1018()",100)>
</td>
<td>
<! Cam 9 >
<img id="imgDisplay19" border="1" width="412" height="318" onload=setTimeout("kamera1019()",10) onerror=setTimeout("kamera1019()",100)>
</td>
</tr>
</table></html>
Just put the following javascript in your page, changing the interval parameter to your like:
<script type='text/javascript'>
var interval = 5; //Interval in seconds, to retrieve images
setInterval(function loadImage() {
var now=new Date();
document.getElementById('the_img').src='image.jpg?'+now.getTime();
}, interval * 1000);
</script>
and in the html just insert the image wherever you want, like this:
<img id='the_img' src='image.jpg'>