I have onmouseover and onmouseout attributes on pictures on page. When submitting onmouseover and onmouseout cause images to fail (returns image source not found icon)
<input type="image" src="../../Content/Resources/save.png" onmouseover="mouseOverForImage('save', '../../Content/Resources/save_mouse_over.png')"
onmouseout = "mouseOverForImage('save', '../../Content/Resources/save.png')" id="save"
title = "Save" />
And Javascript:
function mouseOverForImage(imgId, imgSrcs) {
document.getElementById(imgId).src = imgSrcs;
}
I've made a page on jsfiddle to test your issue (note that you need to run the page in order to see the images with relative paths, that's a jsfiddle issue happening in all browsers).
Hover the [+] image button (it will turn into [?]) and click it. While the page is being loaded you can mouseover/out/over/out/over... as many times as you want and it will work: the image will change and no 404 will occur.
I am using Chrome 20.
This leads me to the following questions:
What's your Chrome version and can you reproduce the issue in Safari? I recall Webkit had a bug that displayed images quite randomly...
Have you posted the code exactly? Are you 100% sure that there's no missing quote, or "0" instead of "o", or some issue with letter case?
When you submit the form, does your page's (or iframe's) URL change at the same time? If so - your relative paths won't work anymore and you'll get your 404. Can you test it by setting a full path to the image's src? Maybe also log the current url?
Can some other code (onsubmit event?) interfere with your form? Can you post more code or create a jsfiddle that reproduces your issue?
Do we/I understand your problem correctly? :)
Thanks.
You can try something like this
function mouseOverForImage(imgId, imgSrcs) {
var image = new Image();
image.src = imgSrcs;
image.onload = function() {
document.getElementById(imgId).src = imgSrcs;
};
}
In place of using mouseover and mouseout events try using mouseenter and mouseleave. It usually works in these types of problem.
Related
I am trying to call the below 1x1 pixel (sact.atdmt.com) when a link is clicked on. It's actually just returns a 1x1 image but is used to ping our servers and essentially count a click in this instance.
test
The above code only works in IE. I can't figure out why it doesn't work in Chrome or Firefox. I think there is some kind of race condition where the href is being resolved before the onclick function has a change to execute but it's only present in these browsers.
Are there any fixes for this?
Thanks,
Fix the syntax error and add return false;
<a
href="http://www.google.com/"
onclick="javascript:img1=new Image(); img1.src='http://sact.atdmt.com/action/adofat_ImageTest27_1'; img1.height='1'; img1.width='1'; return false;"
>test</a>
BTW if you're not displaying the image then you don't need to set height/width of the image
Ejay's answer works just fine, but I feel obligated to mention that I usually stay away from onclick=. This is because screen readers won't reliably register onclicks as an actual click event.
So if you are interested... here is the safe way of doing this.
The JS
function imageClickHandler(){
var img1;
var img1=new Image();
img1.src='http://sact.atdmt.com/action/adofat_ImageTest27_1';
img1.height='1';
img1.width='1';
}//end function
document.getElementByID("TheExampleLink").addEventListener("click",imageClickHandler,false);
The HTML
test
I hope this helps, and you consider not using onclick. :)
I´am trying to get an simple imagebutton to work in Phonegap. I wanna swap image when clicked and forward to location after a short time.
So what i have tried:
function highl(Bildname,BildURL,Link) {
document.images[Bildname].src = BildURL;
window.setTimeout(forward,1000);
function forward() {
window.location = Link;
}
}
in HTML just links like:
<img name="level01" src="level1.png" border="0">
Works well in my Moz, but not in Webkit/phonegap (swap doesen´t work forward is well).
Can anybody help?
edit: also doesen´t work in chrome...
Webkit doesn't support DOM attribute mutation (see issue 8191) marked won't fix.
There might be a link with your issue.
As a workaround, I think you should simply remove the content of the DOM node, and create a new image node instead.
Edit: with code
You need to identify the container.
Also, I set href, so that I javascrpt is disabled, the link can still be followed.
If javascript is enabled, return false tells the browser not to follow the link.
<a href="test.html" onClick="return highl(this, 'level1h.png', 'test.html');">
javascript. I have inlined forward because it was very short, but you don't need to.
function highl(el, imgURL, link) {
var img = new Image();
img.src = imgUrl;
// remove current image. TODO ensure firstChild is not null?
el.removeChild(el.firstChild);
// place new image
el.append(img);
setTimeout(function() {window.location=link;}, 1000);
return false;
}
I am implementing a captcha for a email. when click on linkEmail button email modal will open.
there i have to set captcha image generated by a handler (CaptchaGenerator.ashx) on click of linkEmail button click. Here is the code for that.
$(".linkEmail").click(function () {
//Load captcha image
$('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx');
$('#emailModal').modal();
});
Above code is working fine in crome but not working in IE and firefox.
Although i have tried followings there is no luck.
HTML:
<p id="captchacontainerp" class="captchacontainer"></p>
-------------------------------------------------------------
$('#captchacontainerp').prepend($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>"));
-------------------------------------------------------------
var img = $('<img id="imCaptcha" class="imgCaptcha">');
img.attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx');
$('#captchacontainerp').empty();
img.appendTo('#captchacontainerp');
---------------------------------------------------------------
$('#captchacontainerp').empty();
$('#captchacontainerp').append($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>"));
IE caching all GET request, so add a timestamp to your request URL e.g :
$(".linkEmail").click(function () {
//Load captcha image
$('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx?'+new Date().getTime());
$('#emailModal').modal();
});
Have you tried setting the src attribute to '' before changing it again?
Also, what are the caching settings you are using (both locally, and on the server)
If you specify any inline style attribute, Height or Width like,
<img src="themes/images/01.png" height="100" width="100" />
<img src="themes/images/01.png" style="height:100px; width=100px;" />
then first remove it and try again.
Even if you externally specify style using style tag,
#imageId{
height : 100px;
width : 100px;
}
then also first remove it and try.
After you remove the style attribute from the images, it will display image.
Height attribute is may work with IE but width attribute not working.
If the above solution doesn't work, then :
Sometime PNG files are not displaying as well. So try to use their JPG image.
I had the same problem when trying to call re captcha button.
After some searching, now function works fine in almost all the famous browsers(chrome,Firefox,IE,Edge,...):
function recaptcha(theUrl) {
$.get(theUrl, function(data, status){});
document.getElementById("captcha-img").src = "";
setTimeout(function(){
document.getElementById("captcha-img").src = "captcha?"+new Date().getTime();
}, 0);
}
'theUrl' is used to render new captcha image and can be ignored in your case. The most important point is generating new URL which forces FF and IE to rerender the image.
I have a DIV with in image inside of it. There is a spot right before the image that does not fire the onclick function when clicked. The rest, including the image and the DIV fire the function when clicked. I have tried attaching the function to the image itself in addition to the DIV and this does not fix the problem. Anyone know what to do?
//this give all the divs the function
var ButtonNumber = document.querySelectorAll(".ButtonStyle");
for (var i = 0; i < ButtonNumber.length; i++) {
ButtonNumber[i].onmouseover = ChangeCursor;
ButtonNumber[i].onclick = ButtonsAddTogether;
ButtonNumber[i].onselectstart = function() {return false;}
}
This is the HTML
<div id="55" class="ButtonStyle"><img alt="1" class="Center" src="Buttons/7.png"></div>
Try setting the image and the div to have the same height. That or use an inline element rather than a block element such as an anchor tag
I have placed your code within jsfiddle: http://jsfiddle.net/BUwFP/1/
Please look at it and tell me if it works for you. I have just:
defined functions that were not defined (probably you just skipped them showing your code),
added borders to image and the div that contains it,
and everything looks fine - clicking the box etc. fires events. Do similar thing and check whether your box really is placed where you click or somehow it has been moved (probably by CSS styles or JS code). You probably already know, that you may use Firebug in Firefox, Developer Tools in Chrome or anything similar.
I have the following code I am using for a photo gallery. In Internet Explorer 7 & 8 the gallery stops working. The image fades out after several clicks and the new image does not fade in. After this occurrence happens (about 6 or so clicks) the gallery does not function at all. All other browsers work flawlessly. I have also used this code in several other pages with no problems.
$("#list-image-carousel").find('a').click(function(e) {
e.preventDefault();
var src = $(this).attr("href");
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").attr("src", src).load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
})
})
});
Any ideas are greatly appreciated. Thanks in advance!
Here's one possibility: it looks like you're establishing the "load" handler on your temporary image element after you're initializing the "src". That's a problem in IE - reverse the order of those things and see if that helps.
$("#main-img").find('img').fadeOut(400,
function() {
$("<img/>").load(function() {
$("#main-img").find('img').attr("src", this.src).fadeIn(400);
}).attr("src", src);
})
If the image is in the cache, then when you assign the "src" attribute IE will immediately ready the element. If there's no "load" handler defined at that point, it won't queue up the event at all.
Also, just as a note, the construct
$('#main-img').find("img")
could be written:
$('#main-img img')
Doing it like that is a little shorter, but in truth it may or may not actually be faster. Probably would be, I think.