I just want to bring image whenever i press css button but image is not coming. what can be wrong in this?
<html>
<head>
<script >
function create() {
var x = document.createElement("IMG");
x.setAttribute("src", "C:\Users\jai guru umesh\Desktop\webops\sha\fronthead images\rover0.png");
document.body.appendChild(x);
};
</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/>
</body>
</html>
Your error is in setAttribute function, you can't use this kind of path in web browsers as it works on client's pc and this would mean you could access their storage, which would be huge privacy concern.
You should use images locally from your file, either in same file as this html file, or in a subfolder, e.g. .../img (where ... is folder which contains html file). Then you can use relative path:
x.setAttribute("src", "img/rover0.png"); // this should work on any system
You can use / for windows paths too, but if you want to use \, make sure to use \\.
But if you insist on absolute file path, use this:
x.setAttribute("src", "file:///C:\\Users\\jai guru umesh\\Desktop\\webops\\sha\\fronthead images\\rover0.png");
Note the use of file:/// and \\ (using / instead \\ should work as well)
You could load the image with the page and hide it until a user clicks on it.
<html>
<head>
<script >
function showImage(image) {
image.style.display = "inline";
};
</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/>
<img src="../fronthead images/rover0.png" style="display:none;" onclick="showImage(this)" />
</body>
</html>
Also I changed your path to a relative path since browsers will not allow access to your HD.
Use relative path (absolute if you have a link):
x.setAttribute("src", "../image.png");
In surplus, I suggest you to pay attention to the directory names (e.g fronthead images) it's better not use special characters and blank spaces (so "fronthead images", it's better in thi form "frontheadImages", or "fronthead_images")
Related
Code on webpageThe button doesn't workSo, I am fairly new to JavaScript and have been looking at tutorials for the language. I downloaded the Atom IDE and began following a video and used the same code as the video to make a web page with a button that reveals a message when clicked. However when I click the button nothing happens, and when I hit inspect element.
It gives me the following error: Failed to load resource: net::ERR_FILE_NOT_FOUND
It appears as though the HTML file is not working with the .js file. However they are in the same directory.
Here's the updated code (still the same error):
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Perhaps, it is the file directory. When you declared <script src="js/script.js"></script>, that means that your script.js file, must be located in a subfolder called "js".
If you want your to be within your file, then you can do
<DOCTYPE! html>
<html>
<head>
</head>
<body>
<button onclick="revealMessage()">Click me!</button>
<p id="hiddenMessage" style="display:none">Filosofem</p>
</body>
<script>
function revealMessage() {
document.getElementById("hiddenMessage").style.display = 'block';
}
</script>
</html>
Finally, you should try resaving the code through atom, and make sure your code is the right version of your code.
By using an external stylesheet you need to make sure your CSS file is saved as said above but with <script scr="filename.js">/script> I still haven't found a way other than having your code internal which is completely fine unless you're making a world wide website then it would be easy to hack.
I've looked all over the place and here is the fullest extent of what I found:
<!DOCTYPE html>
<html>
<body>
<input name="PickedFile" type="file" accept=".swf">
<object width="550" height="400">
<param name="movie" value="PickedFile">
<script type="text/javascript" src="/path/to/swfobject.js"></script>
<script type="text/javascript">
function loadSWF(url) {
swfobject.embedSWF(url, "flashcontent", "550", "400", "7");
}
</script>
<p><a href="PickedFile" onclick="loadSWF(PickedFile); return false;">
Click here to load the SWF!
</a></p>
<div id="flashcontent"></div>
</object>
</body>
</html>
I'd prefer it to be in html so it can be downloaded for offline use
#AHBagheri, You can display a SWF loaded from outside the server, I just verified using Chrome. I was very surprised it worked.
#Ben, you have multiple flaws in your code. There are a number of reasons why your code wasn't working; the SWFObject tutorial you based your SWF loading code on (from LearnSWFObject) was not written with a file input in mind.
Here is updated code that I verified in Chrome (macOS). Be sure to point the SWFObject <script> to your copy of SWFObject.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Local SWF Test</title>
</head>
<body>
<div>
<input id="PickedFile" type="file" accept="application/x-shockwave-flash"/><br/>
<button id="btn_load">Load the SWF!</button>
</div>
<div id="flashcontent"></div>
<script src="swfobject.js"></script>
<script>
var loadSWF = function (){
var file = document.querySelector("#PickedFile");
if(file && file.files[0]){
swfobject.embedSWF(file.files[0].name, "flashcontent", "550", "400", "7");
} else {
alert("You need to pick a file first.");
}
};
document.querySelector("#btn_load").addEventListener("click", loadSWF);
</script>
</body>
</html>
The primary problems with your code:
You placed everything inside an <object> element. Not only is this incorrect, the <object> element was not needed at all -- this is not how SWFObject works. I removed the <object> and related <param> nodes.
The "accept" attribute for the input needs to specify the MIME type, not the file extension. I changed it to application/x-shockwave-flash.
The "PickedFile" input had a name but no ID. I removed the name attribute and added the ID attribute as this is the common practice when using JavaScript to find an element (in this case document.querySelector). See the examples at https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
When you're using a file input, the value of the input is an array of files, and each item in the array is actually an object containing details about the file, including name and file path. Since you are only expecting one file in the file input, you need to grab the first array item (files.file[0]), which you can then use to access the file's name (files.file[0].name).
I have written a function in javascript to create XML. I am getting an output through a popped-up window. I want to save this display as a document. How I can save it ? I'm using "alert(xml)" to display the output. i just want to save this display as a document. Please someone help me.
<head>
<script language="javascript" type="text/javascript">
function make_xml()
{main code
alert(xml);
}
//-->
</script>
</head>
<body>
<div class="title"> <h4>Create XML Report</h4></div>
<div class="box">
Schema name<input type="text" id="name"><br /><br />
Dimensions:<br />
<input type="checkbox" name="dimensions" id="categories">categories<br />
<button type="button" class="btb" onclick="make_xml()">XML erstellen</button>
</div>
</body>
</html>
Thank you.
Mirish
You can try creating a data uri and asking the browser to open it in a new window. Using a type of application/octet-stream should force the download but if you are ok with it opening in a new window, go ahead and use text/xml or application/xml. You can read up on data uris if you aren't familiar but try the following:
var xml = '<whatever>you did to get the xml</whatever>';
var uriContent = 'data:application/octet-stream,' + encodeURIComponent(xml);
var newWindow = window.open(uriContent, 'downloadXmlWindow');
There are limitations with the sizes in some browsers and there may be reason to base64 encode (again read up on data uris), but hopefully this gets you headed in the right direction.
I am trying to change the src of an image using javascript. The image and the javascript function are in different html pages.
The javascript function is given below
<html>
<head>
<script type="text/javascript">
function changeImage(newSrc)
{
document.getElementById(dp).src = newSrc;
}
</script>
<title>Socialize-Home</title>
</head>
<body>
<img id="img1" src = "home images\student1.JPG" onclick="changeImage(this.src)"></img>
</div>
</body>
</html>
The image of another page is given below
<img id="dp" src="home images\unknown user.JPG" alt="Your browser doent support this
image !" height="25%" width="15%"/>
If you're using AJAX, it puts the second page into the first. There is therefore no need to do anything special. The AJAX'd in content is inside the page and so can be accessed how you would normally access elements.
Therefore your idea should work. However, you have a slight syntax error:
document.getElementById(dp).src = newSrc;
should be:
document.getElementById('dp').src = newSrc;
dp is a string, you haven't defined a variable called dp.
On a side note, the alt tag for an image isn't really anything to do with your browser "not supporting" images. The alt text is displayed if the image is missing or if the user is visually impaired and is using a screen reader.
You need to have some reference to the other window, for instance you can have the window set opener.childwindow = self in the window with the target image. Or whatever you have to do.
Then it's just referenceToOtherWindow.document.getElementById('dp').src = newSrc;
So I've been working recently on a script to obfuscate client-side code for protecting intellectual property without interfering with the appearance or interactivity of the resulting page. The process is as follows:
HTTP request comes in, .htaccess redirects (.*) to parse_request.php
parse_request.php creates a "phpURLParser" class whose class variables are essentially copies of the $_SERVER variables
phpURLParser looks at the requested path, and sometimes the host, referer, or other server-side information to determine how to react. There are several possible responses
a. The requested object was a .js or .css file. Pass the file to the YUI Compressor and send the output
b. The requested object is an image or application. Pass the file with no change
c. The requested object contains HTML. Replace every ASCII character with its 2-digit hexadecimal equivalent and send the following javascript:
<script type="text/javascript">
var x="~lots of hex~";
var y="";
for(i=0; i<x.length; i+=2){
y += unescape('%'+x.substr(i,2));
}
document.write(y);
</script>
So the website is replaced by a lot of hex and a small javascript to return the hex to its original form. I have an example of this setup at examples.chikachu.com/colorbox/example1 (I didn't code ColorBox, it's a free jQuery tool that I chose to use since it allowed me to test several different javascript features and make sure they all worked)
Now for the problem:
As it turns out, this works 99% of the time. But AJAX makes it angry. Clicking one of the AJAX examples (under "Other Content Types") will look like it redirects you to a new page. Looking in the address bar or viewing the page source will prove that you're still on the same page, however. Using the Inspect Element tool in Chrome (or Firebug in Firefox) will reveal that the contents of the webpage were entirely replaced by the contents of the AJAX request.
If I modify parse_request.php slightly to allow the file requested by the AJAX to be passed through unharmed, everything works. No problem. So for some reason my script which replaces the string of hex with its meaningful HTML counterpart is overwriting the entire website instead of nicely inserting itself within the confines of a <div> object.
Essentially here's the expected non-obfuscated HTML:
<html>
<head>
...
</head>
<body>
<div id="colorbox">
<INSERT AJAX HERE>
</div>
...
</body>
</html>
With only the AJAX obfuscated, I expect the following:
<html>
<head>
...
</head>
<body>
<div id="colorbox">
<script type="text/javascript">
var x="asdfasdfasdfasdf";
var y="";
for(i=0; i<x.length; i+=2){
y += unescape('%'+x.substr(i,2));
}
document.write(y);
</script>
</div>
...
</body>
</html>
I expect that the document.write() line here will write y at the location of the javascript (within the <div>). If I'm mistaken and that's not how document.write() works, I still expect it to write y at the end of the document. Instead, the entire document is replaced by y. Why is this, and what's my solution?
Answer to your last question:
Calling
document.write('my_precious_html_code');
will append or override text on page depending when it was called (before or after onLoad event). You shouldn't use it any script. Read more about it here: http://javascript.crockford.com/script.html
General answer:
Obfuscating HTML code doesn't make any sense. Just like protecting images by disabling right mouse button in late '90. It took me less then 3 sec to "crack" your obfuscated code and get beautifully formatted HTML. Also your site is rendered in quirks mode which is probably something you don't want.
Try something like this:
<html>
<head>
...
</head>
<body>
<div id="colorbox">
<div id="MYAJAXCONTENT">
</div>
<INSERT AJAX HERE>
</div>
...
</body>
</html>
<html>
<head>
...
</head>
<body>
<div id="colorbox">
<script type="text/javascript">
var x="asdfasdfasdfasdf";
var y="";
for(i=0; i<x.length; i+=2){
y += unescape('%'+x.substr(i,2));
}
document.getElementById('MYAJAXCONTENT').innerHTML = y;
// for the jQuery psychos out there
// $('#MYAJAXCONTENT').html(y);
</script>
</div>
...
</body>
</html>