Simple Alternative to document.write - javascript

I'm teaching myself JavaScript and I'm a little bit stuck. Here's what I'm trying to do: I have an image, and once that image is clicked it disappears and is replaced by two other images. My code works, but it replaces everything on the page instead of just swapping out the images. I think that I have to use innerHTML somehow, but when I tried that, none of the images showed up. My code is below-I'd greatly appreciate any insights or explanations-thank you!
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.write(puppy);
}
var dog = '<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';
document.write(dog);
</script>
</body>

Write out the dog div as normal html and then replace it's contents:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
document.getElementById("dog").innerHTML = puppy;
}
var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><img src="images/dog.jpg" onclick="showImage();"></div>
</body>

Look into document.createElement() or the whole jQuery library.

for an image swap you can just get the image (give the image you create an Id first) and then say:
document.getElementById("PetImg").src("images/puppy2.jpg");
To follow with what you're doing you could also take change puppy to do something like:
document.getElementById("dog").appendChild(puppy);

Inner HTML works like this:
<body>
<h1>JavaScript Image Test</h1>
<script type="text/javascript">
function showImage(){
var div = document.getElementById('images');
div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
}
</script>
<div id='images'>
<img src="images/puppy.jpg">
<img src="images/puppy2.jpg">
</div>
</body>
Although there may be better ways of switching the images, if your learning Javascript stay away from jQuery as the other comments may have said its a good idea to learn these fundamentals first.

You could use jQuery... This will replace dog.jpg with puppy.jpg when the link is clicked.
<script type="text/javascript">
function showImage(){
$('#dog').attr('src', 'images/puppy.jpg');
}
</script>
<img id="dog" src="images/dog.jpg" />

You may consider picking up a Javascript framework, jQuery is popular and makes this task relatively easy. Instead of replacing all of the HTML, you can update the src attribute on the image. Something like:
$('#some_div img').attr('src', 'images/some_image.jpg');
Alternatively you can replace the html as well:
$('#some_div').html('<img src="images/some_image.jpg" />');

Related

Javascript. OnClick Image src +1

This is my code:
<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>
So when I click on the "next.png" image, both pictures change to the pictures in the new folder. This works perfect. But what I want is, when I click on the "next.png" image, the src code automatic change. So when I click it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>
When i click again it looks like:
<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>
So the folder allways move +1. From 2 to 3. From 3 to 4...
I hope you know what I mean and help me :)
And sorry for my bad english.
You can change it with basic DOM methods in Javascript. Firstly I should point out 'name' is a depreciated attribute, HTML 5 uses the 'id' attribute instead.
Anyway firstly we need to add some labels to the img's so we can find them in JS
<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>
I just used your existing name attributes. Figured that was why you'd included them anyway! Then we add a JS function to attach to the on click listener.
<script>
var pictureID = 1;
function moveToNextImage(){
pictureID++;
var string = 'img/.../'+pictureID;
document.getElementById('changer1').src = string + '/before.jpg';
document.getElementById('changer2').src = string + '/after.jpg;
}
</script>
This script keeps a counter for the folder value and uses that to generate a new source string to replace the old one with. The function adds 1 to the counter then changes the src attribute on the 2 elements to the new one.
Your next button should look like this to use the function instead.
<img src="img/next.png" onclick="moveToNextImage()"/>
Okey so my problem now is I have this script allready installed for those 2 images
So my full script is this:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
<div id="container">
<div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
<div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>
I hope you know what my problem is...
When I remove the "container" ID from the div, the script from Raj works perfekt. But not my time comparison script, you find in the 1 link.
<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>
<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
var i = 2;
$("#test").click(function(){
var srcbefore='img/.../'+i+'/before.jpg';
var srcAfter="img/.../"+i+"/after.jpg";
$("#changer1").attr("src",srcbefore);
$("#changer2").attr("src",srcAfter);
console.log(srcbefore+"::"+srcAfter);
i++;
});
});
</script>
</html>
hope this solves your problem..
FYI -
Dont couple your JS code in HTML. Make it seperate.
Use Class or ID instead of name.

Append jQuery code into iframe does not work

I encounter a very strange problem!
I wrote the following code:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<textarea id="code">
<div id="hello">Hello world!</div>
<script type="text/javascript">
$(function(){
$("#hello").css({"border":"solid 3px red"});
alert($("#hello").size());
});
</script>
</textarea>
<iframe src="iframe.html"></iframe>
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
$(this).contents().find("body").append($("#code").val());
});
});
</script>
The "iframe.html" file contains only a call to the jQuery library.
The result is that "Hello world!" is displayed in the iframe but without red border! It seems that $("#hello") does not work. In fact, if I do alert($("#hello").size()), I get "0".
Do you have any idea?
Thanks!
Edit: Add "alert".
$(this).contents().find("body").append($("#code").val());
Only gets the current value so probably it wont copy over any css value that is linked to it.
http://api.jquery.com/val/
What I suggest is testing it in 1 file first to see what it does so remove the iframe part for now and check the .size() on 1 file. that way you know how the .val and .size() behave on your #hello.
Try this as the script under the :
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
var scriptx = $("#code").val();
$(this).contents().find("body")[0].innerHTML = scriptx;
});
});
</script>
});
</script>
I think the html format is wrong. You are putting the div inside the text area and inside any text area if you put some html elements then those are simply taken as some text and that html elements are not going to render in browser.
So you can put the the div element out side the text area.
<textarea id="code"></textarea>
<div id="hello">Hello world!</div>
I hope this will work.. :)

HTML tag <object> does not work after being moved in DOM using appendChild

In the following example the flash in my HTML would not show after moving it's parent element in DOM. I use appendChild on enclosing div of my object element to move it somewhere else in the DOM hierarchy, but after the move is complete the containing flash would not show.
I get this error in IE 10 and firefox, in Chrome there seems to be no problem.
This error happened in much larger project, but I managed to distill it to the following little example.
<html>
<head>
<script>
window.onload = function() {
var copy = document.getElementById("s");
document.getElementById("newparent").appendChild(copy); //if I comment out this line, example works
}
</script>
</head>
<body>
<div id="newparent"> <!-- here will the object be appended -->
</div>
<div id="s">
<object width="50%" height="50%" data="http://www.w3schools.com/tags/helloworld.swf">SWF Not shown</object>
</div>
</body>
</html>
If I comment out the second line of my onload function, the flash shows properly (but it is not moved around). I am not able to google anything. Perhaps I am not able to describe my problem, I am pretty new to HTML. Thanks in advice.
OK, so thanks to you guys, I had an idea of what to look for and I stumbled upon this article.
The problem I have seems to be that for some ?security? reasons the flash would not load after being moved. I devised this dirty workaround, simply I force browser to parse and recalculate the object tag. Is it so? I hope I understand well what am I doing.
<html>
<head>
<script>
window.onload = function() {
var copy = document.getElementById("s");
document.getElementById("newparent").appendChild(copy);
copy.innerHTML = copy.innerHTML; //dirty workaround
}
</script>
</head>
<body>
<div id="newparent"> <!-- here will the object be appended -->
</div>
<div id="s">
<object width="50%" height="50%" data="http://www.w3schools.com/tags/helloworld.swf">SWF Not shown</object>
</div>
</body>
</html>

How to import images/change them on button click? JavaScript

I am trying to import images from a folder on my server strictly using JavaScript so that I can switch it out with a new image on button click. I know how to import photos using HTML, but is there a way to do it through JavaScript? What is the best way to do this? Any help, guidance or examples would be greatly appreciated.
You can embed an image within a dom element on your page. Here is a really simple example html file which does this assuming the myimage.jpg file is in the same directory. Check out w3schools for more info on javascript.
<html>
<head>
<script type="text/javascript">
function btnClick()
{
spanElement = document.getElementById("imgContainer");
spanElement.innerHTML = '<img src="myimage.jpg" />';
}
</script>
</head>
<body>
<button onclick="btnClick()">Show Image</button>
<span id="imgContainer"></span>
</body>
</html>

What function to use to show 2 images when you pass your mouse over it?

I'm trying to make my header looks like this: http://wareztuga.ws/index.php and i was wondering how they managed to do that when we pass over the home bottum it flashes.
I know we need to have two images for that result but i need the funcion.
There are many approaches to implementing an image rollover. Here's a very basic approach:
<html>
<head>
<title>rollover demo</title>
<script type="text/javascript">
function swap(element, image) {
element.src = image;
}
</script>
</head>
<body>
<img src="home_normal.png" onmouseover="swap(this, 'home_rollover.png');" onmouseout="swap(this, 'home_normal.png');"/>
<img src="about_normal.png" onmouseover="swap(this, 'about_rollover.png');" onmouseout="swap(this, 'about_normal.png');"/>
</body>
</html>
A more preferable method would be to use jQuery or some other library that keeps the HTML free of JavaScript code. You'll find many, many different ways to do it if you Google "javascript image rollover" or "jquery image rollover".
this is not related to PHP. you just change the image-src ... there are many code-examples for that out there. here is one.

Categories

Resources