Changing the background of the image on click - javascript

I have an image for which I need to change the background onclick. I used following javascript and html to do the thing. For simplicity I first preferred red background and for the reference image is with transparent background.
Code is:
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="img-thing.png"></iframe>
<p>Click the button to change the background color of the picture contained in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myframe");
var y = (x.contentWindow || x.contentDocument);
y.body.style.backgroundColor="red";
}
</script>
</body>
</html>
I know there might be something wrong to use iframe here so i tried :
<div id="myframe"><img src="img-thing.png"></div>
instead of the iframe. If I remove the src field from the iframe tag it works fine. But when I insert image and click try now it does not work. Please help.

Why you use an iframe ?
Use an img tag in a div and update the background color of the div
<!DOCTYPE html>
<html>
<body>
<div id="myframe"><img src="http://img1.wikia.nocookie.net/__cb20110821045825/meme/images/3/3d/LOLGuy.png" /> </div>
<p>Click the button to change the background color of the picture contained in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction(){
var myframe = document.getElementById('myframe');
myframe.style.backgroundColor = "red";
}
</script>
</body>
</html>
http://jsfiddle.net/TZXU3/1/

<iframe id="myframe" src="img-thing.png"></iframe>
A png file is an image file. It has no body tag. So it will not work. Instead, try putting a HTML link (eg. something.html) in the src attribute. Hope that helps.
If you want to change the background color of an image, use the img tag, not iframe. Then you can directly access the img element and change its background color, like document.getElementById("someimg").style.backgroundColor = "red";

If you want to change different color on clicking the button, then try this, it may help you
function changePic(picColor) {
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnbtnYellow ")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}

Related

Cannot read property 'value' of null at index.html:15 in color

<html>
<head>
<title>Website</title>
</head>
<style>
#square{
width: 50;
height: 50;
background-color: red;
}
</style>
<body id="body">
<script>
var picker = document.getElementById("square")
var color = document.getElementById("colorBox").value
function onClick(){
document.getElementById("body").style.backgroundColor = color
}
</script>
<input type="color" id="colorBox"/><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
</body>
It produces the error which is the title.
There is no issues with layout. Just the 15 lines.
Look, I don't know what to put here.
It's because your element with ID colorBox is defined after the script. This means that when the script runs, it cannot find the element. If you move the script tag below your element definition, your code will run properly.
Note, I think another issue with your code is that you compute the value of color before your onClick function, so it will always set the background color to black when you click the button. If you move the color definition to inside of the function, it will be recomputed every time you click the button, giving what I believe is the desired result:
<html>
<head>
<title>Website</title>
</head>
<style>
#square {
width: 50;
height: 50;
background-color: red;
}
</style>
<body id="body">
<input type="color" id="colorBox" /><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
<script>
var picker = document.getElementById("square")
function onClick() {
var color = document.getElementById("colorBox").value
document.getElementById("body").style.backgroundColor = color
}
</script>
</body>
Your script is scanning the document for your colorbox element before it has encountered that HTML. Move the script to just before the closing body to only run it after all the HTML has been parsed.
And while this will solve your most immediate problem, you'll find that there are still other problems, so see my second example for that solution.
<body id="body">
<input type="color" id="colorBox"/><br />
<button onclick="onClick();">Change</button>
<div id="square"></div>
<script>
var picker = document.getElementById("square")
var color = document.getElementById("colorBox").value
function onClick(){
document.getElementById("body").style.backgroundColor = color
}
</script>
</body>
Now, with that fixed, there are several other items that need attention:
Nothing is allowed to go after the closing head tag and before the
opening body tag. The style element should go inside of the
head.
In CSS, most of the time you must place a unit of measurement after
an amount, so your height and width of 50 won't work unless you add
something like px, %, em, etc.
Don't set your variables equal to properties of elements. Set
variables to the elements themselves. Your code gets the value of
the input before the user has selected a color, you need to set
the color after they've chosen. By only getting the element reference
up front, you can then easily get the current value of that element
at just the time you need it.
There is no need to give body an id so that you can reference it
later. A document will only ever have one body and it is accessible
via document.body.
Don't use HTML event attributes (like onclick) to set up your
events. Instead, do your event handling separately, in JavaScript.
Don't use self-terminating XHTML syntax. It buys you nothing and
opens the door to bugs.
Lastly, get your element references just once, not inside of your
event handler because every time that function runs, it will scan the
document again for the same element it already found earlier.
So here's your code again, with these tips applied:
<!doctype html>
<html>
<head>
<title>Website</title>
<style>
#square{
width: 50px; /* In CSS, you must also put a unit next to an amount */
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<input type="color" id="colorBox"><br>
<button>Change</button>
<div id="square"></div>
<script>
// Get your element references, don't get references to element properties
var body = document.body;
var picker = document.getElementById("square");
var color = document.getElementById("colorBox");
// Set up your event handlers in JavaScript, not HTML
document.querySelector("button").addEventListener("click", onClick);
function onClick(){
// Set the color of the body to the current value of the input
body.style.backgroundColor = color.value;
}
</script>
</body>
</html>

How do I change background color of one frame with another frame?

I know frames are deprecated, but I need to use them for this.
I have 3 frames; upperframe, lowerrightframe, and lowerleftframe.
All frames link to another html file.
What should I put in the html file for lowerrightframe to change the background color of the lowerleftframe?
As in, the user presses a button in the lower right frame and it changes the color of the lower left frame.
Here's what I have so far (with the JS)
function changeBGColor (newColor)
{
document.getElementById("lowerleftframe").style.bgColor=newColor;
}
and this is button.
<button type="button" onclick="changeBGColor('white')">Change Color</button>
Okay so with lots of caveats here is a solution.
Remember all html files should be in the same domain.
The site/files should be served on some kind of web server like localhost (at least in chrome).
Files from different domains or from file:// will throw cross-origin restriction error for security reasons.
The top, frameset page... index.html:
<html>
<frameset cols="50%, 50%">
<frame src="left.html" name="leftF"></frame>
<frame src="right.html" name="rightF"></frame>
</frameset>
</html>
The html for right frame... right.html
<html>
<head></head>
<body>
<h1>Righty</h1>
</body>
</html>
The html and javascript for the left frame that changes the color of right frame... left.html
<html>
<head>
<script>
function changeColor() {
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Lefty</h1>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
The actual code to change the color of another frame from one frame is:
var f = parent.frames["rightF"];
f.document.body.style.backgroundColor = "red";
Where "rightF" is the name of right frame. and parent is the frameset. We are going one step up to parent then accessing frame with given name and then changing it's body.style.

Changing iframe src if page doesn't load

I've been using the code below to change an image src if the path is invalid. I'd like to do the same thing with iFrame srcs but can't get it to work. Any help appreciated.
<!DOCTYPE html>
<html>
<body>
<p>This example assigns an "onerror" event to an img element with an
incorrect src path, then changes the path to a default one that works.</p>
<img name="image" onerror="changeUrl()" src="http://www.xyziiijj.jpg">
<script>
function changeUrl() {
var site = "http://www.cw-testing.co.uk/SportsTickets-
testing/images/marker.png";
document.getElementsByName('image')[0].src = site;
}
</script>
</body>
</html>

Change image on iframe with JQuery

I need to change an image with jQuery when I click on image of my webpage I need that the page show me a prompt, alert... or similar where I put the new path of the new image.
Anyone have any idea?
I show my code where I change paragraphs and headers with Jquery, I need similar but for images.
$("#probando").contents().find("#cabecera1").click(function () {
var nuevoTexto = prompt("Introduzca el nuevo contenido");
$("#probando").contents().find("#cabecera1").text(nuevoTexto);
});
The image that needs changed is in an frame.
<iframe id="probando" src="prueba2.html" scrolling="auto" height="700" width="750" marginheight="0" marginwidth="0" name="probando"></iframe>
Something I don't understand :
You have to click on an image which is in a frame, and when you do, a prompt appears to write a new path for the image. When the prompts submitted, the image changes of src, is that it ?
In that case, you can directly write the code on the frame's included page.
$().ready(function() {
$('#imageId').click(function() {
var newPath = prompt('Please enter new path for image :');
$(this).attr('src',newPath);
});
});
If it's not the case, please explain what's the structure and what is where =)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<title>iframehide</title>
<script type="text/javascript">
$(function() {
var f = $('#foo')
f.load(function() {
f.contents().find('div').hide();
})
})
</script>
</head>
<body>
<iframe id="foo" src="iframehide-frame.html" /></iframe>
</body>
</html>

Pass div to javascript function and change its style

I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div.
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. It also doesn't work in my compiler (Coda 2).
Is this even the right way of going about this? Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>
</body>
</html>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/
You need to use document.getElementById to get the element from the id
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes)
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section.
(select no-wrap in Head) at left side Framework and Extension option
Js Fiddle Demo
Change the script placement combo to no wrap - in <head> (second combo box on the left panel)
myDiv is an unknown identifier.
Use document.getElementById() in order to refer to your div:
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/
<script>
function changeBackgroundColor(asdf) {
asdf.style.backgroundColor = "#fff000";
}
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>
Inline styles and inline click events? boo.
<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>
<script>
document.getElementById('clickMe').onclick = function(){
document.getElementById('myDiv').style.backgroundColor = '#fff000';
}
</script>
You mast do so:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
</body>
</html>

Categories