I have this image in my html page:
<img src="/images/deactivate.png" onclick="act_deact(this);"/>
and in my javascript code i have this:
function act_deact(image) {
image.src = (image.src=="/images/activate.png" ) ? "/images/deactivate.png" : "/images/activate.png";
}
and when i click on the image that initially deactivated it activate but in the second click it doesn't desactivate !
is there any probleme with my code ?
from JS amateur :)
This is because when you set it to(or it changes to) /images/activate.png on first click, the src attribute is no longer just /images/activate.png but it gets prefixed with the server-address.
You can check it here: http://jsfiddle.net/hGcqq/
Or on your own server, use a console.log or an alert if you prefer.
#hjpotter92 already explained the reason it doesn't work.
One way to make it work is to check if src ends with /images/activate.png:
var activateURL = '/images/activate.png';
if (img.src.substring(img.src.length - activateURL.length) !== activateURL) {
image.src = '/images/activate.png';
} else {
image.src = '/images/deactivate.png';
}
The image.src contains the canonical path, even if initialised with a relative path. You can either use the full path in the condition like
function act_deact(image) {
image.src = (image.src=="FULL-PATH-OF-IMAGE" ) ? "/images/deactivate.png" : "images/activate.png";
}
(to get the full path one may use alert(image.src);)
or, if all your images have unique names
function act_deact(image) {
image.src = image.src.match(/activate.png$/) ? "/images/deactivate.png" : "images/activate.png";
}
The first thing is brackets which should be like this:
image.src = (image.src=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png")
Also try image.getAttribute("src") and image.setAttribute("src") instead of image.src.
Please try this code:
function act_deact(image) {
image.setAttribute("src", (image.getAttribute("src")=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png"))
}
Edit: other answers tell you about the issue of absolute and relative urls, so getAttribute will fix that issue. I do not recommend to use RegExp or substrings here.
To make it work with relative url you can simply save current url like this:
var newsrc = "/images/deactivate.png";
function act_deact(image) {
if ( newsrc == "/images/deactivate.png" ) {
image.src = "/images/activate.png";
newsrc = "/images/activate.png";
}
else {
image.src = "/images/deactivate.png";
newsrc = "/images/deactivate.png";
}
}
and then call it
<img src="/images/deactivate.png" onclick="act_deact(this);"/>
I found the solution myself :p and i have tried #fardjad proposition that is looking for string in the url and make conditions
i share the solution :)
function act_deact(image) {
if(image.src.indexOf('deactivate') != -1)
image.src="/images/activate.png";
else
image.src="/images/deactivate.png";
}
#hjpotter92: the solution with check condition on image.alt works to:
html:
<img alt="deactivate" src="/images/deactivate.png" onClick="act_deact(this);" />
the Js function :
function act_deact(image) {
if (image.alt=="activate") {
image.src = "/images/deactivate.png";
image.alt = "deactivate" }
else {
image.src = "/images/activate.png";
image.alt = "activate"
}
}
thanks for your responses :)
Related
I have an image button and I would like to do that if I click to the img button it is changed, then if I click again to the button it change back to the default image.
I have this script but it doesnt change back. Anybody can help me?
<script>
function VOR2(img)
{
if(img.src.match(/blank/))
{
img.src = "VOR.gif";
}
else
{
img.src = "VOR2.gif";
}
}
</script>
<img src="VOR.gif" id="VOR2" onclick=VOR2
The reason that your code is currently not working is because img.src.match(/blank/) looks if the image source has the text "blank" (the forward slashes make it a regex). However neither images you have provided include the text "blank", so it simply does nothing, and isn't the best use case anyways.
The best practice for this would be toggling a class with classList to your image to help identify which "state" it is in, such as the below:
<script>
function VOR2(img) {
isChanged = img.classList.contains('changed-image');
img.src = isChanged ? 'VOR.gif' : 'VOR2.gif';
img.classList.toggle('changed-image');
}
</script>
<img src="VOR.gif" id="VOR2" onclick=VOR2>
I would also suggest moving the script into a different file.
You could do it this way :
JS :
function VOR2(img) {
if (img.src == "VOR2.gif") {
img.src = "VOR.gif";
} else {
img.src = "VOR2.gif";
}
console.log(img.src);
}
HTML :
<img src="VOR.gif" id="VOR2" onclick="VOR2(this)" />
I am a programming fool,
All I need is to be able to toggle two images, one which acts as the 'up state' of a button and then 'onclick' the second image appears and remains until it is clicked again whereby it is replaced by the the 'upstate image'.
Please don't mock me for this pitifull attempt which fails miserably. Here is my code.
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change()"/>
Thank you in anticipation.
Check this demo.
function change(image) {
if (image.src.indexOf("imgd1.svg") > -1){
image.src ="imgd1over.svg";
}
else{
image.src ="imgd1.svg";
}
}
In the fiddle case the image.src wasn't just the image's name, but the full url: http://fiddle.jshell.net/_display/imgd1.svg. So I have used indexOf() to check if the image's source constains the string you want.
Besides, I have changed the way change() function references to the image:
<img src ="imgd1.svg" name ="pic" id = "test" onclick ="change(this)"/>
Using change(this) will set the own image as the first parameter of the event, so you don't need to get it in the window object or event with getElementById or whatever.
function change() {
var image = document.getElementById("test");
if (image.src.indexOf("imgd1.svg") > -1 ){
image.src = "imgd1over.svg";
}
else if(image.src.indexOf("imgd1over.svg") > -1 ){
image.src = "imgd1.svg";
}
}
Here is the working code:
<img src ="imgd1.svg" name="pic" onclick="change();"/>
<script>
function change() {
if (window.document.pic.src == "imgd1.svg"){
window.document.pic.src ="imgd1over.svg";
}
else if(window.document.pic.src == "imgd1over.svg"){
window.document.pic.src ="imgd1.svg";
}
}
<script>
See the full demo:
http://jsfiddle.net/jswsze5q/
Try this:
<script>
function change() {
var img1 = "imgd1.svg",
img2 = "imgd1over.svg";
var imgElement = document.getElementById('test');
imgElement.src = (imgElement.src === img1)? img2 : img1;
}
</script>
<img src="imgd1.svg" id="test" onclick="change();"/>
Example: jsfiddle
Try using Jquery
var flag = 0;
function change(){
if(flag){
$("#img").attr("src","img1.png");
flag = 0;
}
else{
$("#img").attr("src","img2.png");
flag = 1;
}
}
Simplest toggle option
where variable flag acts as flag which detects which image is active
img is the id of image control.
Code to include Jquery from google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I have been trying to use javascript to change the image on a webpage I have made. so far my code dosn't do anything at all when I click on the original image. this is my first experiment with JS in a html doc so i could be something simple about how i have to use it.
<h1>heading name</h1>
<div>
<img alt="alt text"title='hover over text'id='chango'src="images/rsz_josh.jpg"onclick="changeImage()"/>
<script language="javascript">
var changeImage = function(){
img1="images/rsz_josh.jpg";
img2="images/rsz_josh2.jpg";
img3="images/rsz_josh3.jpg";
switch(document.getElementById('chango').src){
case img1:
document.getElementById("chango").src=img2;
break;
case img2:
document.getElementById("chango").src=img3;
break;
default:
document.getElementById("chango").src=img1;
break;
};
};
</script>
</div>
The reason is that document.getElementById('chango').src returns an absolute URL to the image, not a relative one. Thus none of your case statements match.
An idea for fixing that is to split the URL at the slashes and just compare the filename without any path.
EDIT: A slightly easier way would be to use JavaScript's indexOf to see if the URL contains the string. This assumes none of the image names are substrings of other image names.
var changeImage = function(){
img1 = "rsz_josh.jpg";
img2 = "rsz_josh2.jpg";
img3 = "rsz_josh3.jpg";
console.log(document.getElementById('chango').src);
imgUrl = document.getElementById('chango').src
if (imgUrl.indexOf(img1) != -1) {
document.getElementById("chango").src = 'images/' + img2;
}
else if (imgUrl.indexOf(img2) != -1) {
document.getElementById("chango").src = 'images/' + img3;
}
else {
document.getElementById("chango").src = 'images/' + img1;
}
Any One Know Tell me the suggestion to do this. How can i check if the anchor href attribute contain image path or some other path.
For Example:
<img src="image.jpg"/>
<img src="image.jpg"/>
See the above example shows href attribute contain different path like first one is the image and second one is the some other site link. I still confuse with that how can i check if the href path contain the image path or some other path using jquery or javascript.
Any suggestion would be great.
For example (you may need to include other pic formats if needed):
$("a").each(function(i, el) {
var href_value = el.href;
if (/\.(jpg|png|gif)$/.test(href_value)) {
console.log(href_value + " is a pic");
} else {
console.log(href_value + " is not a pic");
}
});
Jquery:
$(document).ready( function() {
var checkhref = $('a').attr('href');
var image_check = checkhref.substr(checkhref.length - 4)
http_tag = "http";
image = [".png",".jpg",".bmp"]
if(checkhref.search("http_tag") >= 0){
alert('Http!');
//Do something
}
if($.inArray(image_check, image) > -1){
alert('Image!');
//Do something
}
});
you may check if image exists or not, without jQuery
Fiddle
var imagesrc = 'http://domain.com/image.jpg';
function checkImage(src) {
var img = new Image();
img.onload = function() {
document.getElementById("iddiv").innerHTML = src +" exists";
};
img.onerror = function() {
document.getElementById("iddiv").innerHTML = src +"does not exists";
};
img.src = src; // fires off loading of image
return src;
}
checkImage(imagesrc);
not sure if this is possible keeping the code simple, but im trying to make it so that i have an image, when you clicked it, it goes to a new image. then when you click that image, it goes back to the original image.
my code is:
function save_data()
{
if ( document.images.save.src == "saved.png") document.images.save.src="save.png";
if (document.images.save.src == "save.png") document.images.save.src="saved.png";
}
<img id="save" onclick="save_data()" src="save.png">
It can be simplified.
Using
<img id="save" onclick="save_data(this)" src="save.png">`
You can do
function save_data(img)
{
img.src = /saved/i.test(img.src) ? 'save.png' : 'saved.png';
}
If this doesn't work, it may have to do with the fact that saved.png is not in the path the html is in. So try it with a full URL:
function save_data(img)
{
var imgpath = 'http://yoursite.com/imgpath/';
img.src = imgpath + (/saved/i.test(img.src) ? 'save.png' : 'saved.png');
}
A note: it may be better to assign the click handler unobtrusively (see also this SO question)
if ( document.images.save.src == "saved.png") - this won't work, because .src returns the full path to the image, not just the filename. For example, http://site.com/path/images/saved.png.
Try matching substrings instead.
function save_data()
{
if ( document.images.save.src.indexOf("saved.png") != -1) document.images.save.src="save.png";
if (document.images.save.src.indexOf("save.png") != -1) document.images.save.src="saved.png";
}