We Keep Coding

Race Condition using onclick attribute

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. :)

Dynamically change image src using Jquery not working in IE and firefox

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.

HTML/CSS/Javascript, trying to get image to change on click

Quite a simple question, yet it has been bugging me all week!
Firstly, I do not expect someone to write me this huge piece of code, then me take it away and claim it for my own. Would prefer someone to actually help me write this :)
I am attempting to show a playlist on my website as a png image.
I have 2 playlists that must be shown.
The playlist will change on an image press.
I have 4 button images, 'CD1up', 'CD1down', 'CD2up' and 'CD2down'.
I would like to have these buttons changing what current playlist is being shown, but also showing the buttons correct state. For example, is playlist1 is being shown, then 'CD1up' must be shown, and 'CD2down' shown.
I would post my current code here, but I basically scrapped it all and decided to start from scratch since I'm terrible with web javascript.
All help is greatly appreciated!
I can basically fluent in HTML and CSS, but horrible at web javascript.

Some notes:
If you give each image an id attribute, you can use document.getElementById to get a reference to that element once the page is loaded.
Then you can set the src property on that element to a new URL to change the image.
Make sure your script tag is after the elements in the HTML (just before the closing </body> works) so that the elements exist when you want them.
You can add a click event handler to any element on the page. Most browsers support addEventListener but some older versions of IE still require you to use attachEvent to hook up the handler. So you see people with functions that look something like this:
function hookEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + eventName, handler);
}
else {
element["on" + eventName] = function(event) {
return handler.call(this, event || window.event);
};
}
}
So for example, if you have this img:
<img id="myImage" src="/path/to/img.png">
This cycles through four images on click:
<!-- This must be AFTER the `img` above in the HTML,
just before your closing /body tag is good -->
<script>
(function() {
var myImage = document.getElementById("myImage"),
images = [
"/path/to/img1.png",
"/path/to/img2.png",
"/path/to/img3.png",
"/path/to/img4.png"
],
index = -1;
hookEvent(myImage, "click", imageClick);
function imageClick() {
++index;
if (index >= images.length) {
index = 0;
}
myImage.src = images[index];
}
})();
</script>
You can get a lot of utility functionality and smooth over browser differences using a decent library like jQuery, YUI, Closure, or any of several others, although if all you want to do on the page is change the images sometimes and handle a click or two, that might be overkill.

using onmouseover to change text hyperlink into an image hyperlink?

Please bear with me I am brand new to learning javascript (self taught)! I am usually one to find answers on my own from just web browsing but so far I haven't found any resources explaining how to accomplish the following:
So, basically all I want to do is change this (HTML):
SPEAKERS
to an image by using javascript.
The image is kept in the same folder as the html and the js.
Here is as far as I know to go with the javascript:
function showImage()
{
picture = new Image(100,100);
picture.src = "icon2.png";
document.getElementById("speakers").innerHTML = picture.src;
}
function goBack()
{
document.getElementById("speakers").innerHTML="SPEAKERS";
}
For clarity, all I would like to do is change the text ("SPEAKERS") to an image using 'onmouseover' while using the same hyperlink in the process.
It seems like a very simple problem but I don't know enough to determine if what I want to do is even possible. If it's not possible that's fine, I would just like to know either way ;P. Thanks ahead of time!

If you're ok with using jquery, you could use .html() and .hover()
http://jsfiddle.net/u8fsU/

Try something like this to get you started (not a complete nor tested solution):
var showImage = function(){
var picture = document.createElement("img");
picture.src = "icon2.png";
picture.href = "link.html";
var speakers = document.getElementById("speakers");
speakers.parentNode.replaceChild(speakers, picture);
}
Please see https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference for a good reference to some of the available DOM properties and methods.

onmouseover fails in chrome when posting or leaving page

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.