I would like to have an image appear when a button is clicked. I think that I have gotten everything in the code right, but I need help with the image link.
I would like to take the image from a website. What is the code that I add to this code to make it do this?
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src =";
}
<img src = "" id = "img"/> <input type="button" value="Click for image!" onclick="pic1()"/>
Try this:
function pic1()
{
//set this to the url of whatever image you want to appear
var imageUrl = "https://www.google.com/images/srpr/logo11w.png";
document.getElementById("img").setAttribute("src",imageUrl);
}
<img src="" id="img"/>
<input type="button" value="Click for image!" onclick="pic1()"/>
Related
<html>
<body>
<button onclick="document.getElementById('myImage').src='hagthrowingball.gif'">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
</body>
</html>
I need the image src onclick to show the image hagthrowingball.gif, but then go back to foresthag.gif without pressing the button again.
I think this should solve your problem by automaticly setting back old src after some time;
<button onclick="replaceFunc();">Throw Fire ball</button>
<img id="myImage" src="foresthag.gif" style="width:100px">
<script>
function replaceFunc (){
const el = document.getElementById("myImage");
const oldSrc = el.src;
el.src = 'hagthrowingball.gif';
setTimeout(()=>el.src=oldSrc, 1000);
}
</script>
</body>
</html>
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>
This question already has answers here:
Javascript show element on click
(3 answers)
Closed 9 years ago.
So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"
I want to be able to display Picture1 after clicking the button "Show Picture 1".
I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed).
What is the code I should write to allow this to happen?
My code so far for displaying picture 1:
<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
</script>
<center>
<img id="Picture1" src=Picture1.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Picture1">
</center>
Thanks
/// if ur looking to toggle image try this simple code////
<script type = "text/javascript">
function pic1()
{
document.getElementById("img").src = "picture 1 source";
}
function pic2()
{
document.getElementById("img").src ="picture 2 source";
} </script>
<img src = "" id = "img"/> <input type="button" value="Show Picture
1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
onclick="pic2()"/>
U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>
You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.
You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};
Updated fiddle to demonstrate.
I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.
Can someone show me whats wrong with this:
<html>
<script type = "text/javascript">
function colourGreen()
{
document.getElementById("button1").style.bgColor = 0xFFFF00;
}
</script>
<body>
<form action="">
<div id = "button1">
<input type="button" value="Colour">
</div id>
<div id = "button2">
<input type="button" value="Price up" onclick = "colourGreen()">
</div id>
<div id = "button3">
<input type="button" value="Price down">
</div id>
</form>
</body>
</html>
document.getElementById("button1").style.backgroundColor = '#FFFF00';
Try:
document.getElementById("button1").style.backgroundColor = '#00ff00';
It is backgroundColor not bgColor
You can create a css rule and change the className of the button to link to that rule.
<style type="text/css">
.buttonColor{
background-color: green;
}
</style>
<script type ="text/javascript">
function colourGreen() {
document.getElementById("button1").className = "buttonColor";
}
</script>
That way if you for some reason decide to change the color or the background you will not have to change it on every page. You will be able to change that one css file.
I'd try
.style.backgroundColor = 0xFFFF00;
I assume your divs are only as big as your buttons and are therefore hidden by the buttons themselves. Change the colour on you button itself instead of the div?
A neater and more reliable way to to edit css of items is using jquery selectors. $("#button1").css("background-color","#ff0000");
Be sure to include the jquery .js file before trying this or you'll get an object expected error.