I am trying to set source for Img tag using Javascript at button click. The problem which i m facing is that the I cannot see the Image in IE 6 but it works in FireFox. I browsed and tried few solutions like load the image in page load(Document load) itself or set a timer, but nothing works consistently. This problem also not consistent so unable to find the exact solution. the code goes here-
<li> <a id="lnk1" runat="server">
<img class="each_idea_icon" alt="" runat="server" id="imgAs" idea="images" />
</a>
</li>
//on button client click
var imgAs = $('#<%=imgAs.ClientID %>');
imgAs.attr("src", "../../Common/Images/EN/ABC.png");
Can somebody tell me wat could be the issue. It works perfectly in IE. I have removed ">" or "<" so code can be visible.
by default in server side i set the image src.
I too had the same problem and the below code fixed it:
var imgAs = $('#<%=imgAs.ClientID %>');
var imgParent = img.parentNode;
imgParent.innerHTML = "<img src='/_layouts/images/minus.gif' id='" + img.id + "' alt='" + img.alt + "'></img>";
I assigned the HTML string to innerHTML of its parent element.
Hope this helps!
Try using
imgAs.setAttribute ( "src" , "../../Common/Images/EN/ABC.png" );
See
element.setAttribute
Have you tried setting it first to a blank/clear gif or image file? Sometimes it has a hard time setting the img src, if it did not have an image initially.
I beleve i know what is your problem , for some reason when u use
<img ... />
insted of
<img ..> </img>
in some cases it does not work
Try an image that is not a png, ie6 and png's never played nicely. You need some ie specific code to get them to work properly.
Related
I want to call or execute javascript function when user click on image. I have javascript file with many functions and one of them is ShowKeybord(). So i want to execute this function ShowKeybord() when user clicks on image.
I tried with HTML parameter onclick: <img src = "' + content + '" alt = "Heads" onclick = "ShowKeyboard()" height="170" width="170"/> but its not working.
Here is my code of key functions that are related to my problem.
I tried with header.addEventListener('click', ShowKeyboard) and work properly but the keyboard is displayed when you click anywhere in the header of the web page. I would however like to make the keyboard appear only when a user clicks on the image.
What am I doing wrong and what should change depending on my code?
Thank you very much for your help.
You can also try to encapsulate your img with a div with the attribute onclick="ShowKeyboard()"
Wich gives something like this
<div onclick = "ShowKeyboard()">
<img src = "' + content + '" alt ="Heads" height="170" width="170"/>
</div>
It's better to enclose your image inside a div tag. As suggested by #Lucas Duval.
This should definitely work if not please give your div an "ID" or "class" and try to handle this with JQuery.
Thanks!
in the head tag put
<script src="yourjavascriptfilepath"></script>
and should work.
or maybe try onclick="ShowKeyboard()" rather than onclick = "ShowKeyboard()"
I think that has to do something with it.
I have a html snippet being returned through ajax. The snippet is an <img> tag.
<img src="image.jpg" />
I need to extract the value of the src attribute without loading the image initially. The reason for this is the src attribute contains a partial path that I need to manipulate in my app to load the image properly.
I have the following code currently extracting the src attribute:
var src = $(value).attr('src');
However, this causes the image to load, resulting in a 404. I would like to avoid this unnecessary request.
How can I extract the value of the src attribute without causing the browser to load the image?
I solved this by changing the name of the src attribute before loading it into jquery.
value = value.replace('src', 'data-src');
var src = $(value).attr('data-src');
Doing this allows me to extract the value without causing the browser to attempt to load the images.
Your best bet is probably to output a data tag on the image. You can then manipulate this using jQuery and then use it to write the final image path.
So you'd do something like this in your HTML:
<img data-img-src="abc.jpg" class="my-image" />
Then in your jQuery:
var path = $('.my-image').data('img-src');
console.log(path); // Do something here, then write the new path with:
$('.my-image).attr('src', new_path);
EDIT: Sorry I just re-read the bit where it's coming via AJAX. In that case, you can probably use the data callback of your ajax request to strip the src from the image.
$.ajax('someURL.html', function(data){
var html = data.replace(/\ssrc/g, ' data-src'),
img = $(html),
src = 'some/path/' + img.data('src');
img.attr('src', src);
$('#container').append(img);
});
If you just have the string , like <img src="image.jpg" /> why dont you go for regex?
Something like: /[\"\'][a-z0-9A-Z\.]*/.
PS:My regex skills are poor,so you could manipulate it accordingly.
Use
var string = '<img src="image.png">';
var matches = string.match(/src\=("|')(.*?)\1/);
console.log(matches[2]);
You can simply remove the attribute after accessing it.
This will not load the invalid image, as you can confirm in your console:
var s= $('<img src="invalidURL.jpg">'),
src= s.attr('src');
s.removeAttr('src');
console.log(src);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove removeAttr(), and it will attempt to load the image.
I'm having a problem getting the condition in this if statement to work, i've tried getElementById & src.indexOf but I am still very new to this. I am trying to replace the blank/ball image with the x/pikachu image only if the blank image is currently showing, so if there was one of the other images there it wouldn't replace it. It doesn't seem to recognize the condition I have in there as true, any idea why?
i've also tried:document.getElementById(bn).src=blank & document.images[bn].src==blank & document.pokemon.bn.src==blank
looking for a way to verify if the current source of the image is the var blank.
thank you
var x = "pikachu.jpg";
var o = "Meowth.jpg";
var blank = "ball.jpg";
function b1Move(imageName){
temp2=imageName;
if(document.pokemon[temp2].src==blank)
document.pokemon[temp2].src=x;
cMove();
}
and the html for the images looks like this:
<a href="javascript:b1Move('b1')"><img src="ball.jpg" height=150 width=150 name=b1
id =b1 > </a>
The src property gives the fully resolved URL. You probably want to use the src attribute, which stays the same:
if( document.pokemon[temp2].getAttribute("src") == blank)
document.pokemon[temp2].setAttribute("src",x);
you should try
if(document.pokemon[temp2].src.indexOf(blank) != -1)
since src is the full url.. then you can check it it contains your image name
So, I'm using this lovely image swap fellow:
jQuery Image Swap Gallery
You can see a demo of it in action on my site here: http://hannahnelsonteutsch.com/v2/art-piece.php
The problem is, with the #main_image img
<div id="main_image" class="grid_7">
<img class="wide" src="zImages/arrows-2.jpg" />
</div>
note the class="wide". there are two classes that need to be applied dynamically to the images, once they're "swapped": "wide" and "tall", based on whether we're using an image that is in portrait or landscape.
The nice thing, which I have a hunch that a superior coder could make use of, is that the thumbnails for each image already have the correct class assigned to them:
<img class="tall" src="zImages/arrows-1.jpg" />
<img class="wide" src="zImages/arrows-2.jpg" />
<img class="wide" src="zImages/arrows-3.jpg" />
<img class="tall" src="zImages/arrows-4.jpg" />
<img class="tall" src="zImages/arrows-5.jpg" />
Here is the jQuery that is generating the image-swap:
$(document).ready(function() {
// Image swap on hover
$("#details img").hover(function(){
$('#main_image img').attr('src',$(this).attr('src').replace());
// This is my failed attempt to assign
// the correct class to the #main_img img:
$('#main_image img').attr('class',$('#details img').attr('class').replace(this));
});
// Image preload
var imgSwap = [];
$("#details img").each(function(){
imgUrl = this.src.replace();
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
Note two things:
The original tutorial has this line of code:
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
which i've replaced with this:
$('#main_image img').attr('src',$(this).attr('src').replace());
the key being the .replace('thumb/', '') vs .replace().
We're using CSS to shrink the images which significantly speeds up image load times upon hover. i.e. the images have already been loaded because we're using the same image for the thumbs and main image.
my own attempt to answer this question has not worked
$('#main_image img').attr('class',$('#details img').attr('class').replace(this));
So, that's where I'm at. Anyone have any ideas to solve this ?
Thanks so much for your time.
Cheers,
Jon
You need to use the $(this) selector so jquery knows which image you are hovering over. Also you should probably use mouseenter instead of hover as you only need to verify the mouse position once. Finally, got rid of replace() in your function as that wasn't doing anything. By using attr and changing the src or class you are replacing the value automatically. Here's a draft I set up of your page: http://jsfiddle.net/AjBDg/2/
Using $('#main_image img').attr('class',$(this).attr('class')); should be enough.
See: http://jsfiddle.net/DpvFX/
I'm new at javascript and while there are many more complex solutions, I don't understand them and hope I don't have to at this point.
I have a main picture...
<img src="main-picture.jpg" name="Mainpic" id="image">
...and I want to be able to change this picture when I click on one of two thumbnails.
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
My javascript code I thought would be super easy. I'm currently using...
function FirstPic(){
document.Mainpic.src = document.pic1.src
return
}
function SecPic(){
document.Mainpic.src = document.pic2.src
return
}
Now the variable is changing however it's not staying changed. When the thumbnail is clicked on, the replacement picture flashes on the screen and then it returns to the original main-picture.jpg.
How do I make the change permanent until a different thumbnail is clicked?
Thanks!
I think it's flipping back because your page is reloading.
You need to return false from your onclick= if you don't want the href= value to activate after your onclick.
Also, you can set href="#" just in case. # goes nowhere (doesn't ever reload the page)
I think your page is refreshing by your click, change your links as :
<img src="replacement1.jpg" name="pic1">
<img src="replacement2.jpg" name="pic2">
Why not do something like this (haven't checked the syntax completly, so it could be faulty.
function FirstPic()
{
var pic1 = document.getElementById("pic1");
if (pic1 == typeof('undefined')) return;
pic1.src = "newpicname.jpg";
}
Make sure you give the tags an ID attribute called pic1 and pic2 (instead of a name attribute) and give the image itself an 'onclick' attribute...
<img onclick='FirstPic()' id='pic1' src='image1.jpg' />