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. :)
Related
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;
}
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.
I'm using the code below for dragging an image (#StndSoln1). It works perfectly in Chrome and all, but not in Firefox. Here startDrag() is the function which i attached to the mousedown event listener. Could anybody please help me.
function initialFunction(){
document.getElementById("StndSoln1").addEventListener('mousedown',startDrag,false);
document.getElementById("StndSoln1").addEventListener('mousemove',drag,false);
document.getElementById("StndSoln1").addEventListener('mouseup',stopDrag,false);
}
function startDrag()
{
if (!moveFlag){
currentTraget=document.getElementById("StndSoln1");
offsetX=currentTraget.offsetLeft;
offsetY=currentTraget.offsetTop;
ImgPlaced=false;
moveFlag=true;
x=window.event.clientX;
y=window.event.clientY;
event.preventDefault();
}
}
// Fn for drag the current target object...
function drag(){
if (moveFlag && !ImgPlaced){
currentTraget.style.left=(offsetX+window.event.clientX-x)+"px";
currentTraget.style.top=(offsetY+window.event.clientY-y)+"px";
}
}
I actually had a similar problem, so I can try to help even without the code you're using.
See, the Firefox developers had this bright idea of making it so that, when you drag an image, you can "move" it around and possibly drop it in an Explorer window to quickly and easily download it, or to the tab bar to open the image in a new tab. The obvious downside of this is that it results in a default behaviour that other browsers don't have.
The simple solution is to make sure that all your events are properly cancelling the default action (event.preventDefault, return false, that kind of thing). Should that fail too, then you should use a <div> element with a background-image instead of an <img> element.
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.
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.