dynamically applying image src is not working in FF and IE - javascript

Try the follwing code in w3schools in FF, IE and chrome. Observe the behavior.
In chrome the image is reloading. But in IE and FF it's not working.
<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="some captcha url";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
reload
</body>
</html>
Thanks,
Sravanthi.

Try Close the final Quote and add the ;, before the last }
function changeSrc()
{
document.getElementById("myImage").src="some captcha url";
}

This should do what you need. Don't forget to include the latest version of jQuery in your script:
$(function () {
//REFRESH CAPTHCA IMAGE
$("div#refresh").on("click", function()
{
var newSrc= "some captcha url";
$("#myImage").attr("src",newSrc);
});
});
<img id="myImage" src="compman.gif" width="107" height="98">
<div id="refresh"> Refresh </div>

Related

On Click Image Doesn't Work

I made a script with an image and a javascript function but it doesn't work. It should redirect to www.moseso.de when you click the image. What's wrong with it?
<html>
<head>
<title>Hallo</title>
</head>
<body>
<img src="test.jpg" onclick="func" />
<script>
function func() {
window.location="www.moseso.de"
}
</script>
</body>
</html>
try setting:
onclick="func();"
also close the statement:
window.location="www.moseso.de";
You can try this:
<img src="test.jpg" alt="" class="img.my_clickable_image" />
<script>
$(document).ready(function() {
$('my_clickable_image').click(function() {
window.location.href = www.moseco.de';
});
});
</script>

Load image in DIV from url obtained from a TEXT BOX

I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.

How to delay the load of an <a> tag in javascript/html

I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad

Show a Static image if browser not supporting 3D image

In my html page want to insert a 3d image if canvas is supported by the browser and a static image if it is not. The image should be inserted on page load dynamically.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hello Modernizr</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="modernizr.js"></script>
<script>
if (Modernizr.canvas)
{
$(document).ready(function()
{
$("p").show();
});
alert("This browser supports HTML5 canvas!");
}
else
{
$(document).ready(function()
{
$("p").hide();
});
}
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>eseardsa
</body>
</html>
You can just add the image in your else statement similar to the code below. Although you probably want to manipulate a div instead of a p.
} else {
$(document).ready(function(){
$('p').text('<img src="yourImg.png" />');
}
}
change the java script
to display image in all browser
<div class="cont_machines_3d">
<div class="cont_3d">
<iframe height="600" scrolling="auto" src="3d/3dimage.html" width="800">
</iframe>
</div>
</div>
to display image in ie
<div class="cont_machines_3d_ie"><img src="/3d/images/img.jpg" width="800" /></div>
</div>

Java Script not working on my website

The following script is not working when i upload it to my webpage. It works fine and loads the url if I try it on 'TryIt Editor' in w3school.com. I have changed the domain name in this example.
<!DOCTYPE html>
<html>
<body>
<script type='text/javascript'>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>
</body>
</html>
Are you sure it doesn't works? It's really strange, especially because js it's clientside
try to change alert the url, after it has been changed, with this code:
<script>
var x=1;
function changeLink()
{
x=x+1;
var y="http://example.com/basicone/image"+x+".html";
document.getElementById('iframe-a').src=y;
alert(document.getElementById('iframe-a').src);
}
</script>
<iframe id="iframe-a" seamless src="http://example.com/basicone/image1.html" height="450" width="1000" scrolling="no"></iframe>
<button id="button" onclick="changeLink()">Next</button>

Categories