How to get clicked image as background of div? I new to javascript. I tried using onclick but the code did not work.I hope may be due to programming mistakes.
<div id="canvas"></div>
<div id="containerA">
<div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change();"/></div>
function change(){
document.getElementById("image").style.backgroundImage = this('src');
};
change your code to this -
<div id="canvas"></div>
<div id="containerA">
<div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change(this);"/></div> // passed this to the parameter
function change(obj){
document.getElementById("canvas").style.backgroundImage = obj.src; // here
};
You declared a function, but you didn't ask it to run. Try this or the code snippet below. Also, you can separate codes in order to control well.
function changeImg() {
document.getElementById("canvas").style.background = "url('//stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg')"
}
document.getElementById("canvas").onclick = changeImg;
#canvas { /* just for test, you can change by yourself */
width: 325px;
height: 325px;
background: red;
}
<div id="canvas"></div>
And here on JSBin is another version if you'd like to change the background between two images, or more. Below are some references for you to know more about function used in example.
W3C School - style change, W3C School - onclick event
MDN - style change, MDN - onclick event
Pass this to the onclick function like this
<div id="canvas"></div>
<div id="containerA">
<div id="one" ><img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="image" onclick="change(this);"/></div>
</div>
And this is what you do in the Javascript function
function change(img){
var urlString = 'url(' + img.src + ')';
document.getElementById("canvas").style.backgroundImage =urlString;
};
And this should definitely work!
1.you didnt added Jquery
2. On click of image you are calling "change" method but you have to correct the method name.
In below image check the red rectangles for errors-
function changeImage(imgObj){
bgImage = imgObj.src;
$("#updateDiv").css('background-image','url('+bgImage+')');
}
http://plnkr.co/edit/RL7T0a?p=preview
I would suggest to use jQuery in your project. With jQuery something like this could work:
var imageSource = "";
$("#img").click(function(){
imageSource = $(this).attr("src");
$('#canvas').css("background-image", "url("+imageSource+")");
});
Related
I'm trying to make a simple page that lets me input a name and a photo pops up figured javascript would accomplish that but i'm a javascript newbie and need some help :( here is my code:
<img id="myImg"
src="https:placeholderlink"
width='500'
alt='Not Loaded' onmouseOver="this.width=550" onmouseOut="this.width=500" />
CBName: <input type="text" id="CBName" name="CBNameBox">
<button onclick="myFunction()">Submit</button>
<script>
function CBNameChanger() {
var Source = document.getElementById("CBName").value;
var itemName;
{
document.write(itemName);
}
function myFunction() {
document.getElementById("myImg").src = "https:placeholderlink" + itemName ;
}
}
</script>
as you see i need to code the take my input and add it to the end of the img url
i was trying to make my image enlarge when you hover the mouse over also that works when an img is present but i cant get an image to load and dont know what im doing wrong lol this is hack an slash code i pieced together from google searches
any help at all would be appreciated!
You almost got it, only you had to do is to join both functions and remove the weird document.write between braces.
function CBNameChanger() {
var Source = document.getElementById("CBName").value;
document.getElementById("myImg").src = "http://lorempixel.com/" + Source;
}
#myImg {
width: 50px;
height: 50px;
}
<img id="myImg" src="http://lorempixel.com/" width='500' alt="Not Loaded" onmouseOver="this.width=550" onmouseOut="this.width=500" />
<br> CBName: <input type="text" id="CBName" name="CBNameBox" value="50/50/">
<button onclick="CBNameChanger()">Submit</button>
In the following codepen I'm trying to change the image of an image with id="chrome" using JavaScript but it does not appear to be doing anything. What am I doing wrong and how do I fix. Thank you in advanced.
The first image has an id of chrome and when clicked I'm trying to change the image.
https://codepen.io/centem/pen/NgKEmG
Here is the js I'm using.
function changeImage() {
if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png")
{
document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png";
}
else
{
document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
}
}
Basically, for the first row that has an chrome icon I would like to change it to an x image upon click.
Change <img onclick()="changeImage()"> to <img onclick="changeImage()">
First off, change the <img onclick()="changeImage()" to <img onclick="changeImage()". That doesn't solve your problem if you want to do it for multiple users, as each one of the chrome images needs it's own ID for the function to work on more than one logo.
You had a typo. When defining an inline onclick you have written:
<div onclick()="changeImage()"></div>
It should be:
<div onclick="changeImage()"></div>
See snippet below:
function changeImage() {
if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png")
{
document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png";
}
else
{
document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
}
}
img {
height: 25px;
padding-right: 4px;
}
li {
margin: 4px;
clear: both;
}
li:nth-child(odd) {
background: #f0f0f5;
}
<ul class="list-unstyled">
<li>Username<span class="pull-right">
<img onclick="changeImage()" id ="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img id="firefox" src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
<img id="ie" src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>
</ul>
Instead of onclick()="changeImage()";.... Use onclick="changeImage()".....Remove "()" bracket in onclick function
You have a syntax error in your HTML code. onclick is not a function, it is an HTML attribute, so you don't call it like a function by adding parentheses to it.
You only to that to the value of the onclick attribute, which is JavaScript syntax.
The correct code is:
<img onclick="changeImage()">
Here is a working version of your code pen: https://codepen.io/pahund/pen/XgWVQx
I'm new to this but I'm sure this is an easy one. I'm trying to setup multiple animated image buttons on my website. I setup two test buttons, but only the second one is working. Both of them works fine by themselves but when I add them together only one works. What am I missing? Thanks in advance.
HTML:
<html>
<head>
<title>Default</title><script type="text/javascript" src="script.js"></script>
</head>
<body>
<div align="center"><br>
<img style="border: 0px solid ; width: 60px; height:60px;" alt="" src="clickA1.png" id="button1" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()">
</div>
<br />
<div align="center"><br>
<img style="border: 0px solid ; width: 60px; height: 60px;" alt="" src="clickB1.png" id="button2" onmouseover="rollover()" onmouseout="rollout()" onmousedown="down()" onmouseup="rollover()">
</div>
<br />
</body></html>
Javascript:
<script>
function rollover () {
document.getElementById ("button1") .src = "clickA2.png"
}
function rollover () {
document.getElementById ("button2") .src = "clickB2.png"
}
function rollout () {
document.getElementById ("button1") .src = "clickA1.png"
}
function rollout () {
document.getElementById ("button2") .src = "clickB1.png"
}
function down () {
document.getElementById ("button1") .src = "clickA3.png"
}
function down () {
document.getElementById ("button2") .src = "clickB3.png"
}
</script>
You functions are over riding each other. Define a different name for the functions of button2
for example:
function rollover () {
document.getElementById ("button1") .src = "clickA2.png"
}
function rollover2 () {
document.getElementById ("button2") .src = "clickB2.png"
}
You have used multiple functions with the same name. In these cases functions written later overwrites the previous ones in the same scope.
A possible way is to include arguments inside your function calls
<button ... onmousedown="down('button1')" ...></button>
<button ... onmousedown="down('button2')" ...></button>
and handle them inside your function.
function down (button) {
document.getElementById (button) .src = "clickB3.png"
}
Or you can also detect which button was pressed from mousedown event.
You are writing two functions with the same name but different body. The 2nd one replaces the 1st implementation.
I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed
This is very frustrating as it seems so simple yet is not working.
In my body I have
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<inputtype="button" value="Start" onClick="splash();" />
</div>`
And in my head, within script tags I have
function splash() {
var divSplash = document.getElementById("splashscreen");
divSplash.style.display = "none";
}
Surely when Start button is clicked, the splash() function should be called and the display of my splashscreen div be chanted to none?
The problem here is that the you write language="text/javascript", if you use instead language="javascript" it works.
I recommend you remove the language property and use type="text/javascript" instead. If you're using HTML5, you can omit the type property.
<script type="text/javascript">
function startGame() {
var divSplash = document.getElementById("splash");
divSplash.style.display = "none";
}
</script>
Also, the language property is now obsolete.
Using the exact code that you show here, I get the error 'divSplash is null.' This is to be expected -- your div is named "spashscreen" but your JS function is looking for a div named "splashscreen." (You're missing an 'l').
When I fix the typo, it works.
You're not using the same id :)
spashscreen != splashscreen
Here is the answer in a jsfiddle
HTML:
<div id ="splashscreen" style="display:block">
<h3>title</h3>
<p>text</p>
<button onclick="splash()">Start</button>
</div>
Javascript:
function splash() {
var divSplash = document.getElementById('splashscreen');
divSplash.style.display = "none";
}