i did this code following my lecturer's code. When you click the button an image is supposed to come with a text. Also the when the mouse hovers over the button they change color (This part works fine).
The text also appears. But the image doesn't. In the lecturer's code it works fine. Can someone help me ? :)
<html>
<head>
<link rel="stylesheet" href="java.css">
<script language="JavaScript" type="text/javascript">
function haha() {
let i = document.getElementById("img");
let url = "haha.jpg";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my haha face";
}
function happy() {
let i = document.getElementById("img");
let url = "happy.png";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my happy face";
}
function angry() {
let i = document.getElementById("img");
let url = "angry.jpg";
i.style.backgroundImage = `url(${url})`;
document.getElementById("facetext").innerHTML = "This is my angry face";
}
function changebg(color) {
color.style.backgroundColor = "blue";
}
function defaultbg(color) {
color.style.backgroundColor = "white";
}
</script>
</head>
<body>
<script></script>
<div class="inner">
<button onclick="haha()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)"> Happy Face</button> <br><br>
<button onclick="angry()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)">Angry Face</button><br><br>
<button onclick="happy()" id="btn" onmouseover="changebg(this)" onmouseout="defaultbg(this)"> Haha Face </button><br><br>
<div id="img"></div>
<p id="facetext"></p>
</div>
<script src="java.js"></script>
</body>
</html>
Your code looks like it works fine, if the images are indeed in the same directory as the HTML page.
However, if the div #img does not have any styling, its height is 0px. You might just need to set a height for it:
#img { height: 200px; }
Related
I have this simple code to save html as image:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/canvas2image.js"></script>
<script>
$('#save').click(function () {
var elem = $('#element').get(0);
var leba = "600";
var ting = "400";
var type = "bmp";
var name = "temp"
html2canvas(elem).then(function (canvas) {
var cWidth = canvas.width;
var cHeight = canvas.height;
var img = Canvas2Image.convertToImage(canvas, cWidth, cHeight);
$('#preview').after(img);
Canvas2Image.saveAsImage(canvas, leba, ting, type, name);
})
})
</script>
<div id="element"
style="width: 600px; height: 450px; background-color: aquamarine; margin: 30px auto; text-align: center">
<h1>Screenshot</h1>
<input type="text" style="background-color: aliceblue; border: 1px solid #aaaaaa; color: #333333">
</div>
<div style="text-align: center">
<button id="save">Salva</button>
<p id="preview"></p>
</div>
</body>
</html>
I want to have a preview of the screenshot and save it on click, but when I click nothing happens.
The three files containing the three scripts are correctly loaded, I'm using visual studio code and the links are correct, but despite the attempts, I can't get the image.
I also tried to put the js links directly, but without success, I moved the scripts directly into the HTML tag (I know it's useless), but my page doesn't give any results.
For saving the canvas as image you can go through the below change. I dont think so, that you need a library to save the file.
html2canvas(document.querySelector("#element")).then(function (canvas) {
var dataURL = canvas.toDataURL("image/jpeg", 1.0);
var a = document.createElement('a');
a.href = dataURL;
a.download = 'untitled.jpeg';
document.body.appendChild(a);
a.click();
})
And for the complete reference you can visit the CodePen link added below
https://codepen.io/mukeshmohan/pen/ymvQjV
And its recommended to wrap your code inside a document ready.
$( document ).ready(function() {
// your script goes here
});
which will make the jquery to wait till the dom rendering completes, that allows a safe and clean event handling.
You need to wrap your code in a
$( document ).ready()
block
Take a look here
Greetings fellow Stackoverflowers. I am trying to have text, images, and colors change with a single click of a button using JavaScript. Is there any efficient way to do this? Here is My example Website. I am trying to have the Edward Snowden's image, description, and list change with a single button then revert to the original when clicked again! Thanks for the help!
It is actually rather simple to do this. Here is an example of what to do and how:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>
<script>
function change() {
document.getElementById("image").src = "image2.jpg";
document.getElementById("text").innerHTML = "new text";
}
</script>
</body>
</html>
You declare elements with IDs and make a button with an onclick event. When the button is clicked, it will run the change() function, which will change image's src to image2.jpg and text's text to new text.
If you want it to change back, you could try something like this:
<!DOCTYPE html>
<html>
<body>
<img id="image" src="image1.gif">
<p id="text">Old text</p>
<button onclick="change()">Click Me</button>
<script>
var element1;
var element2;
function change() {
element1 = document.getElementById("image")
element2 = document.getElementById("text")
if ( element1.src == "image2.jpg" ) {
element1.src = "image1.gif"
element2.innerHTML = "Old text"
} else {
element1.src = "image2.jpg"
element2.innerHTML = "new text"
}
}
</script>
</body>
</html>
This method is for Jquery.
$(document).on('click', '.btn-color1', function(){
$(this).addClass('btn-color2');
$('.container').addClass('changecolor2');
});
$(document).on('click', '.btn-color2', function(){
$(this).removeClass('btn-color1');
$('.container').removeClass('changecolor2');
$('.container').addClass('changecolor3');
});
<style>
.btn-color1{
color: #fff;
background-color: red;
padding: 10px;
}
.btn-color2{
color: #fff;
background-color: blue;
padding: 10px;
}
.changecolor2{
background-color: blue;
}
</style>
How to execute a javaScript url when a visitor clicks inside div
Like this example :
<html>
<head>
<meta charset="UTF-8">
<style>
.youtube .play,.youtube img{cursor:pointer;position:absolute}
.youtube{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}
.youtube embed,.youtube iframe,.youtube object{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}
.youtube img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}
.youtube img:hover{-webkit-filter:brightness(75%)}
.youtube .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;background:url(//i.imgur.com/TxzC70f.png) no-repeat}
</style>
</head>
<body>
<div class="youtube" data-id="YQHsXMglC9A"></div>
</body>
<script>
/* Light YouTube Embeds by #labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("script");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
</html>
Like this picture
image
.
Html code + javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" >Click here</div>
</body>
</html>
Javascript :
<script type="text/javascript">
document.write("Hello World!");
</script>
Or :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
How do I run javaScript url when a visitor clicks inside div ?
Something liked this would do it...
function clickMe() {
alert("You clicked me!")
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="clickMe()" >Click here</a></div>
</body>
</html>
First of all, instead of trying to run a script, you should try to run a function.
For example
function test(){
document.write("Hello World!")
}
function test2(){
document.getElementById("output").innerHTML = "Hello World!"
}
<div onclick="test()">
<p> Click me </p>
</div>
<div onclick="test2()">
<p> Click me (won't remove screen) </p>
</div>
<div id="output">
</div>
Clicking on the first div will call the test() function. This function will however overwrite everything on the screen, that's not what you want.
The second method doesn't do that, instead it sets the content of the third div to "Hello World!"
I believe you want to run a JavaScript function when your div gets clicked. You just need to add an onclick() event to your <div> tag and declare that function. So your div would be something like this:
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="writeFunction();">Click here</div>
And the function, with the same name as you declared on your onclick:
<script type="text/javascript">
function writeFunction(){
document.write("Hello World!");
}
</script>
As you have used document.write and i have kept that, it does not show the result that you have illustrated in your picture and your div is vanishing. In order to do as you have imagined, you have to add a <p> element which is initally blank:
<p id='text'></p>
and then ask your function to set its text, like this:
document.getElementById('text').innerHTML = "Hello World!";
You can learn more here: https://www.w3schools.com/jsref/event_onclick.asp
This topic has been covered a few times but there is no clear solution using Javascript. All responses were quite nebulous. Please help me out as there hasn't been a straightforward answer anywhere that I could find on any site.
I am trying to execute a function when any click occurs within an iframe window. Specifically, a click on a hyperlink on page displayed within the iframe. However just being able to have any click within an iframe trigger a function is enough for me.
I have a function Show() that I would like to run when an iframe is clicked. So basically a link is automatically hidden and when the first link is clicked it is shown. When the "click to hide" link that shows up is clicked, the "click to hide" link is hidden. I want the "click to hide" link to show up when someone clicks within the iframe. I need it to run the function every time a click occurs within the iframe. Thanks.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<iframe src="http://www.google.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
click to show below link
<div id="my_div" class="hidden">
<a href="http://www.google.com" target="hello" onclick = "Hide();" >click me to hide</a>
</div>
</center>
</body>
</html>
If there is some kind of domain issue please explain and please, if you have time and are able, explain what the issue is and how to fix such a problem. Edits to this code are welcome for the sake of coming up with a solution that achieves the goal that I outlined.
You guys are great.
UPDATE
I have implemented apaul34208's response which technically works, but I am having three problems.
1) How can this take up the full width of the window (I tried adding 100% to the width value under #cover)
2) When the div covers all of the iframe, the webpage within the iframe is not clickable
3) The div is not transparent.
If someone can edit the below code and have the div take up all of the width while being transparent with the iframe's webpage being entirely clickable - I would be very appreciative and happy.
<html>
<head>
<title>Show / Hide Link</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://stackoverflow.com" height=549 width=100% frameborder=0 name = "hello"></iframe>
links
<div id="my_div" class="hidden">
<a href="http://stackoverflow.com" target="hello" onclick = "Hide();" ><-</a>
</div>
</center>
</body>
</html>
I would strongly advise against doing this for any reason, this is usually referred to as "Clickjacking", and it is an extremely bad practice.
So... Please don't ever do this.
But for educational purposes... You can cover an iframe with another positioned element and capture the click on that element:
var visible_link = true;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
.visible {
visibility: visible
}
.hidden {
visibility: hidden
}
#cover {
position: absolute;
background: rgba(0, 0, 0, 0.5); /* added for example */
height: 150px;
width: 300px;
}
<div id="cover" onclick="Show();"></div>
<iframe id="iframe" src="http://stackoverflow.com"></iframe>
<div id="my_div" class="hidden">
click me to hide
</div>
Once again. Don't ever do this.
I found a solution. It's not perfect but I figured out that I don't really need to it to detect every iframe click and this is good enough. I originally wanted to make a back button appear if a link within the page that is within the iframe was clicked (which would return the user to the main page within the iframe where they started). Obviously they may click randomly and not hit a hyperlink and the back link would pop up for no reason (while they are still on the main page). That's fine I guess but if someone knows of a better solution let me know. Most people would just hit a link to begin with as the page only has hyperlink interaction I presume.
I hope my working code below helps people who are exploring this topic in the future.
Code:
<html>
<head>
<title>StackOverflow Example</title>
<style>
.visible {visibility: visible}
.hidden {visibility: hidden}
}
</style>
<script type="text/javascript">
var visible_link = true;
var inIframe = false;
function Hide() {
document.getElementById("my_div").className = "hidden";
document.getElementById("my_button").value = "SHOW";
}
function Show() {
document.getElementById("my_div").className = "visible";
document.getElementById("my_button").value = "HIDE";
}
function checkClick() {
if (document.activeElement
&& document.activeElement === document.getElementById("hello")) {
if (inIframe == false) {
Show();
inIframe = true;
}
} else
inIframe = false;
}
setInterval(checkClick, 200);
</script>
</head>
<body>
<center>
<div id="cover" onclick="Show();"></div>
<iframe src="http://w3schools.com" height=549 width=100% frameborder=0 name = "hello" id = "hello" style =""></iframe>
click to show link
<div id="my_div" class="hidden">
<a href="http://w3schools.com" target="hello" onclick = "Hide();" >click to hide</a>
</div>
</center>
</body>
</html>
What I am looking to achieve is that when an image is clicked, the content is shown and the image changes to another image, and when this is clicked again the image reverts back and the content becomes hidden
Currently I have this in script tags
<script language="javascript" type="text/javascript">
function setVis(id, vis) {
document.getElementById(id).style.display = vis;
}
function swapImage() {
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
return(false);
}
}
</script>
and this in the main html page
<h4><img id="image" name="image" src="images/img.png" width="10" height="10" border="0" onclick="swapImage();"/> Content</h4>
This doesn't work it shows the content but it won't hide it again, and the images do not change.
I would appreciate any help that can be offered thanks
This code should do the toggle for you.
<head>
<script language="javascript" type="text/javascript">
var imageNo = 2;
function swapImage() {
image = document.getElementById('image')
switch (imageNo) {
case 1:
image.src = "images/img.png"
imageNo = 2
document.getElementById('content').style.display = 'none'
return(false);
case 2:
image.src = "images/img1.png"
imageNo = 1
document.getElementById('content').style.display = 'block'
return(false);
}
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>
i think it may be easier (imho because i hate working in javascript) to use jquery, using jquery you can have a look at the toggle function which gives you this functionality very easy. I believe it has less of a learning curve than neat javascript. If you need any help let me know.
Jquery Toggle
Here is similar solution like dev_musings but with a few less lines of code (for more about Alternate image with javascript onclick follow the link):
<script language="javascript" type="text/javascript">
function swapImage() {
var image = document.getElementById('image');
if (image.src == "images/img.png")
{
image.src = "images/img1.png";
document.getElementById('content').style.display = 'none';
}
else
{
image.src = "images/img.png";
document.getElementById('content').style.display = 'block';
}
return(false);
}
</script>
</head>
<body>
<h4><img id="image" name="image" src="images/img.png" border="0" onclick="swapImage();"/></h4>
<div id="content" style="display:none">This content toggles</span>
</body>