When the user clicks on a picture on my site. Now the jQuery should get the id of the clicked image and change the image to another image:
Here's my jquery:
function changeCircle() {
// div "holen" var object =
// var object = document.getElementById("Kuchen");
// var id = obj;
// object.src="img/icon-check.png";
// $("#GarantienFrage1").attr('src', "img/icon-check.png");
$("id").attr('src', "img/icon-check.png");
// $(this.id).attr('src', "img/icon-check.png");
}
Here's my HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Kuchen">
<img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle();" />
</div>
How can I get the image to change when I click on it?
perhaps you need to know who is this
in your case is not being the <img> tag
therefore, I've put a target param to your function
function changeCircle(target) {
console.log('this is: ' + this);
console.log('BEFORE: ' + $(target).attr('src'));
$(target).attr('src', 'img/icon-check.png');
console.log('AFTER: ' + $(target).attr('src'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Kuchen">
<img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle(this);" />
</div>
Your selector is not targeting the image, its targeting the first <id> element on your DOM.
Change this:
$("id").attr('src', "img/icon-check.png");
to this:
$("img.maus_pointer").attr("src", "img/icon-check.png");
This selects that <img> element who's class is maus_pointer and changed the value of its src attribute.
Also, make sure that your new image source is relatively accessible from the page's location as you're not using an absolute path to target the new image.
Related
I want to create a image viewer where you click next and previous to change the image.
So far the buttons next and previous changes the image. However when I click next then previous, the image doesn't go to the previous image instead it goes to the starting image.
My guess is to create a variable var = newImage and use that variable on function change2() and create a new varirable var= newImage2 and use that on function change().
is that possible?
<!DOCTYPE html>
<html>
<head>
<title>JS ChangeImage</title>
</head>
<body>
<h1 align="center">Change Image</h1>
<br>
<div class= "container" align="center">
<button onclick="change2()">Previous</button>
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg">
<button onclick="change()">Next</button>
</div>
</body>
<script>
var img=0;
var imgArr = ["html5.png","css3.png","javascript.png"]
function change() {
var image = document.getElementById('changeimg');
console.log("current image =>", imgArr[img])
document.getElementById('changeimg').src =imgArr[img];
if (img== 2) img = 0;
else
img++;
}
function change2() {
var c1=
document.getElementById('changeimg').src =imgArr[img];
console.log("current image =>", imgArr[img])
if (img== 0) img = 2;
else
img--;
}
First, I noticed that you are changing the img variable after assigning the image to the element. I think you should switch the order. The way it is now, when you click Next, the number advances, but the picture is associated with the previous number. If you then click Previous, the number will reduce, but the image will appear to advance.
I've made some other changes for simplicity here:
HTML:
<h1 align="center">Change Image</h1>
<br>
<div class= "container" align="center">
<button onclick="change(event)" name='1'>Previous</button>
<img src="html5.png" style="width: 500px" id="changeimg">
<button onclick="change(event)" name='2'>Next</button>
</div>
JS:
var currentImg = 0;
const imgArr = ["html5.png","css3.png","javascript.png"]
const change=(event)=>{
if(event.target.name==='1'){
currentImg>0?currentImg--:currentImg=2;
} else if(event.target.name==='2'){
currentImg<imgArr.length-1?currentImg++:currentImg=0;
}
console.log(currentImg);
document.getElementById('changeimg').src = imgArr[currentImg];
}
Please note the use of the 'name' attribute of the for use in the logic of the change function. This allows me to use only one function for both buttons. I hope this helps.
<div class="editable" contenteditable="true"></div>
<textarea name="markdown" class="markdown" /></textarea>//display none
new MediumEditor('.editable', {
extensions: {
markdown: new MeMarkdown(function (md) {
document.querySelector(".markdown").textContent = md;
}),
img: new imgButton()
}
$('.editable').append("<img src='abc' />");
I have a div use medium-editor & medium-editor markdown
when user type inside of .editable, textarea will sync.
I also have a button click, it will append an image into .editable
my problem is markdown only update when .editable keypress
so if I append text, textarea wont sync, unless I press any key inside of .editable again
anyone know how to tell markdown to update after append image
try this
function updateTextArea(index,editable){
var textarea = editable.parentNode.querySelector('textarea[medium-editor-textarea-id="' + editable.getAttribute('medium-editor-textarea-id') + '"]');
if (textarea) {
textarea.value = editable.innerHTML.trim();
}
}
$('.editable').append("<img src='abc' />");
$('.editable').each(updateTextArea);
The updateTextArea function will update a text area corresponds to editable area.
Here is the code I tried
var editor = new MediumEditor('.editable', {
buttonLabels: 'fontawesome'
});
function updateTextArea(index,editable){
var textarea = editable.parentNode.querySelector('textarea[medium-editor-textarea-id="' + editable.getAttribute('medium-editor-textarea-id') + '"]');
if (textarea) {
textarea.value = editable.innerHTML.trim();
}
}
$("#addImage").click(function(){
$('.editable').append("<img src='abc' />");
$('.editable').each(updateTextArea);
});
$('.editable').change(updateTextArea);
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/themes/tim.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/>
<link href="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/css/medium-editor.min.css" rel="stylesheet"/>
<script src="http://yabwe.github.io/medium-editor/bower_components/medium-editor/dist/js/medium-editor.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<h1>Medium Editor</h1>
<textarea class="editable medium-editor-textarea" name="markdown" id="markdown"><p>Textarea is now supported</p></textarea>
<input type="button" id="addImage" value="Add Image">
<input type="button" value="Alert textarea content" onclick="alert(document.getElementById('markdown').value)">
</div>
If you use the setContent() method of the editor (documentation here), this will allow you to add content and the editor will detect the change and fire all the proper events. This should include notifying the markdown extension that the content has changed and that should update the markdown.
So, instead of this:
$('.editable').append('<img src="abc" />');
Try this:
editor.setContent(editor.getContent() + '<img src="abc" />');
This also leverages the getContent() method (documentation here).
NOTE: These examples assume you're only using a single editor element for MediumEditor. If you are passing multiple elements into a single instance of MediumEditor, you may need to specify a value for the index parameter to both setContent() and getContent()
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+")");
});
I am new in JS,please help me.I have 4 images with the same class name and a hidden div which is displayed when one of 4 images is clicked. How i can add to my div the image which one is clicked? I do not want to write a function for every image.Is it possible with my code?
<img onClick="show()"class="img" src="css/images1/img1.png">
<img onClick="show()"class="img" src="css/images1/img2.png">
<img onClick="show()"class="img" src="css/images1/img3.png">
<img onClick="show()"class="img" src="css/images1/img4.png">
<div class="gallery"></div>
<script>
function show(){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML='<img src=css/images1/img1.jpg>';
};
</script>
Pass in the "src" of the element that was clicked:
function show(src){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML = '<img src="' + src + '">';
}
Then for your html <img/> tags pass in their src to show:
<img onClick="show(this.src)"class="img" src="css/images1/img1.png">
Edit: if you must select "gallery" by className, use getElementsByClassName as you originally had.
Here is a little challenge: I'm trying to replace all three <img ...> tags in the code below completely by another tag named <object ...>. I Tried with jQuery .replaceWith() but didn't get it.
$( document ).ready(function() {
$("div.gallery_content > div > ul > li:firstchild > img").replaceWith( "<object>...</object>" );
});
I can't change any of the classes or add any ID or class names. And I can't change the code in any way. I can just add some Javascript / jQuery in an .js file that is already attached.
What makes things even more difficult is the fact, that I have to add the Javascript to every page on the website, but the replacement should only take place on a subpage called «spots» (e.g. .com/cms/anything/spots).
This is the code:
<div class="gallery_content">
<div id="navkeys" style="visibility: hidden;"></div>
<div>
<ul style="width: 2281px; margin-left: 0px;">
<li style="margin-left: 0px;">
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
<li>
<img src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;">
<div class="gallery_details">
Some Text
</div>
</li>
</ul>
</div>
</div>
Has anyone got a clue?
Once a dom element is created, the tag is immutable.
You would have to remove the image element and replace it with an object. So you would need to get all of the information you need and then add an object element.
So you could do something like this:
$("div.gallery_content > div > ul > li:firstchild > img").each(function() {
var src = $(this).attr('src');
var width = $(this).attr('width');
.
.
.
etc...
$(this).remove();
$('<object>...</object>').prependTo('li') //or whatever your selector is to prepend.
});
The other users have given the code for the replacement, but forgot to explain how the code must act to execute only in the target page
var targetPath = "com/cms/anything/spots";
$(window).load(function(){
currentPath = window.location.pathname;
//Checks if the current page coincides with the target page
if(currentPath.indexOf(targetPath)+targetPath.length === currentPath.length){
functionThatReplaces();
}
});
With this, the script will check if the page is the correct before executing the code.
You can create a new object element, with all the attributes of the old one and then replace the img tag.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/z9u5dxgu/2/
$(document).ready(function () {
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
});
If it were not an img you would also copy the innerHTML using .html().
The end result of the JSFiddle looks like:
<li style="margin-left: 0px;">
<object src="XYZ" width="760" height="505" alt="XYZ" style="visibility: visible;"></object>
<div class="gallery_details">Some Text</div>
</li>
The other minor detail you mentioned was matching a specific page only (difficult to test in a JSFiddle):
$(document).ready(function () {
if (window.location.href.indexOf("/cms/anything/spots") > 0){
$("div.gallery_content > div > ul > li > img").each(function () {
// create a new object
var $object = $('<object>');
$object.html($(this).html());
// copy all the attributes
var attributes = $(this).prop("attributes");
// loop through attributes and apply them to object
$.each(attributes, function () {
$object.attr(this.name, this.value);
});
$(this).replaceWith($object);
});
}
});