Develop Reference

image switch with pure javascript

so i'm trying to do a mouseover with just javascript so that the image doesn't really show up for seo i set it up in html first to get the css right and am making everything appear with document.write so it can be generated with javascript (my js knowledge is way limited). so with html i am making things with
<img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src='img/brokenarrowwear-google-circle.png';" onmouseout="this.src='img/brokenarrowwear-googleplus.png';"/>
but since it uses "" and '' it doesn't really work. I tried doing it as
document.write(' <img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src=' + 'img/brokenarrowwear-google-circle.png' + ';" onmouseout="this.src=' + 'img/brokenarrowwear-googleplus.png' + ';"/> ')
but that didn't really work either. does anyone know how i can do pure javascript? I found
$("img.image-1").mouseenter(function () {
$(this).replaceWith($('<img src="~/Content/images/prosecutor_tile_b.jpg">'));
});
but I don't think it will work.

Maybe this can help:
<img id="mypic" src="img/brokenarrowwear-googleplus.png" onmouseover='pictureChange(true)' onmouseout='pictureChange(false)'>
The function pictureChange:
function pictureChange(change){
If(change==true){
document.getElementById("mypic").src="img/brokenarrowwear-googleplus.png";
}else{
document.getElementById("mypic").src="img/brokenarrowwear-google-circle.png";
}
}

Simple inline pure Javascript solution:
<script>
document.write("<img src=\"http://placehold.it/150x150?text=image1\" onmouseover=\"this.src='http://placehold.it/150x150?text=image2'\" onmouseout=\"this.src='http://placehold.it/150x150?text=image1'\" />");
</script>
The text says "image1" and on mouseover the text in the image will say "image2"

The problem is not the script. I see it in the script source, but I'm not seeing it in the rendered html, actually the whole img tag is missing. Meaning You have some type of rendering issue or another script removed it.
Let's see if it's related to the inline javascript and escaping with backslashes doesn't work: remove the onmouseover and onmouseout attributes from the google img, give it an id="googlelogo" and add the following script at the end of your body:
<script>
document.getElementById("googlelogo").onmouseover = function() {
this.src = "img/brokenarrowwear-google-circle.png";
}
document.getElementById("googlelogo") .onmouseout = function() {
this.src = "img/brokenarrowwear-googleplus.png";
}
</script>

Create an img element into <a> tag using javascript

I want to embed an image inside an tag after the image on tag loaded.
So the sequence goes like this...
<a id="anchorID">
<img onload="MyFunc(anchorID)>IMAGE1</img>
//..After image 1 loaded add
<img>IMAGE2</img>
</a>
<script>
function MyFunc(anchorID)
{
var anchorElement = document.getElementById(anchorID);
//I want to create an image tag inside the anchorElement
}
</script>
Thanks for the help.. T_T

Here's a solution, just add onload="addNextImage('#id_in_which_to_add_new_image', 'second_image_url')" to the image you want to load first. In the next example, ignore the width and style (I put them there to be able to test the functionality, making the image smaller so I don't need to scroll to see the behavior - I chose a huge image to make sure everything works as it should, and the border makes it appear sort of like a progress bar =)
<script>
function addNextImage(selector, url) {
var where = document.querySelector(selector);
if (where) {
var newImage = document.createElement('img');
newImage.src = url;
where.appendChild(newImage);
}
}
</script>
<a id="anchorID">
<img onload="addNextImage('#anchorID', 'http://animalia-life.com/data_images/wallpaper/tiger-wallpaper/tiger-wallpaper-01.jpg')" src="http://hubblesource.stsci.edu/events/iyafinale/support/documents/gal_cen-composite-9725x4862.png" width="400px" style="border: 1px solid black" />
</a>
This should work on most browsers today: IE8+ (as long as you use basic CSS2.1 selectors as the first argument), and pretty much everything else in use. (IE8+ because it depends on querySelector)

I think what you are looking for is
Javascript appendChild()
var node = document.createElement("img");//Create a <img> node
node.src="SomeImageURL";
firstImage.appendChild(node);
JQuery append()
$("#firstImageID").append("<img src="SomeImageURL"/>");
see links for more info
Javascript
jQuery

You can use the following to add an image to the anchor tag
function MyFunc(anchorID) {
var anchorElement = document.getElementById(anchorID);
if (anchorElement) {
//I want to create an image tag inside the anchorElement
var img = document.createElement("img");
img.setAttribute("src", "yourImagePath");
anchorElement.appendChild(img);
}
}
Hope that helps.

Swap Image Src JQuery Not Working?

...but for some reason it won't work. Beginner here, so if someone could explain what I'm doing wrong, I'd really appreciate it. xD
http://codepen.io/DylanEspey/pen/xgwJr An example Codepen I threw together really quick to try to illustrate my problem.
I hate that I've had to ask so many questions, but this is my first project where I've kind of had my own leeway, and I've been struggling to get it done before deadlines so I can impress people. xD That and college has made my schedule a mess, so I've been making really dumb mistakes. That, and I just started learning Javascript a few weeks ago...

The problem is that the overlay used for your fade effect is preventing you from clicking on the image which is underneath it. The solution is to, instead of listening for a click on the image, listen for it on the overlay, and adjust the references accordingly.
I have forked your codepen to reflect this: http://codepen.io/anon/pen/qlkob
JS:
$(document).ready(function() {
$('.thumbnails .overlay').click(function() {
var img = $(this).find('img')[0];
var thmb = img;
var src = img.src;
$('.project-img img').fadeOut(400,function(){
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
});

Try this:
$('.thumbnails img').click(function () {
var thmb = this;
var src = this.src;
$('.project-img img').fadeOut(400, function () {
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
Fiddle Demo

Gallery of Images not displaying properly with document.getElementbyId()

So I'm working on a website for my job's store, a sort of gallery of our products. I've gotten the main web page, cut out the fat, put in the meat, and have tested it numerous times along the way. Now I am having some troubles with the JQuery not working properly. I have provided direct links to the JQuery code, a copy of the website itself, and the source code below..
The general layout of the JQuery(or Javascript, I'm not exactly sure which) is:
window.onload = function() {
function displayImage() {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('Zero').onclick = displayImage;
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
// Etc etc
}
Here is a segment of the website (with some extra fluff removed):
<h1 class="Wrapper Main ClearFix">Image Gallery</h1>
<div id="Main" class="Wrapper Main ClearFix">
<div id="container11">
<img id="Main_IMG" src="img/100___06/IMG_0001.JPG" alt=""><br>
<p id="caption"></p>
</div>
<div id="gallary">
<img id="One" src="img/100___06/IMG_0020.JPG" alt="Headboard Pricing">
<img id="Two" src="http://images.craigslist.org/00P0P_84oo9H7byag_600x450.jpg" alt="Needle Point Upholstered Chair Price: $40">
<!-- etc etc -->
The program is simple: When a user clicks on an image (say in a table for example), that image will display to the left of the gallery with the alt tag being the product and price and such.
The problem: At image number 16 I needed to give it a... different-from-normal tag
(tag I wanted to use: sixteen.
Tag I used: F_sixteen)
The program then worked fine for a few more 'numbers' up until the 36's and 40 where the program refuses to respond properly.
This is a link to the website as of writing this question:Here
This is a link to the actual jquery code: Here
And for those on mobile, the link to the source code is: Here
I apologize for the size of this question, as well as if this seems complicated. Thank you for viewing this, as I appreciate any help.
EDIT: I am not sure if the web page will work in Safari. If it doesn't, I'll see what I can do to change it.

OK, I hate to suggest using jQuery to someone who bravely is not. But use it. You can cut out the 40 calls to document.getElementById and reduce the risk of typos. Just include jquery in your page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then you can use the following code:
window.onload = function() {
function displayImage(img) {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = img.src;
caption.innerHTML = img.alt;
}
$("#gallary img").click(function(){
displayImage(this);
});
}
I've kept the required changes in the above code to a minimum. To 'jquerify' it further you could write this equivalent code instead:
$(function(){
var mainImg = $('#Main_IMG');
var caption = $('#caption');
$("#gallary img").click(function(){
mainImg.attr('src', this.src);
caption.html(this.alt);
});
});

Loading the site produces javascript error: "Uncaught TypeError: Object # has no method 'getElementByID'"
Examining the javascript, some of your calls are to getElementById, and some to getElementByID. Javascript is case-sensitive, you have a typo.

How to embed JavaScript in PHP within div (in an include file)?

I'm trying to get an image to display in a div depending on the URL of the page. This div is in an include file that gets used for all pages of the website. What I want is if it's the homepage (with or without index.php), is for the div to show the image. What I've pieced together so far is:
<script type="text/javascript">
var d = location.href
if (d="website.com" || "website.com/index.php")
{
<img src="/images/DSLogo2.jpg" />;
}
</script>
I'm not sure if this is correct, or even the best way to go about it. Any help is very greatly appreciated, as I am still learning more and more each day.

Try:
<script type="text/javascript">
var d = window.location.href
if (d="website.com" || "website.com/index.php")
{
document.write('<img src="/images/DSLogo2.jpg" />');
}
</script>

Do not confuse = and == operator. The correct way how to code the condition is
if (d=="website.com" || d=="website.com/index.php")
Javascript is not a preprocessor, you can't usi it to create the code like in PHP. If you want to add element, you have to work with DOM:
<div id="target"></div>
<script>
var d = location.href;
var target = document.getElementById("target");
if (d=="website.com" || d=="website.com/index.php") {
target.innerHTML = '<img src="/images/DSLogo2.jpg"/>';
}
</script>

JavaScript doesn't work that way. You could use document.write with logic like that but something like this would be better:
if (your logic here) {
var image = document.getElementById('my_image');
image.src = 'some_image.jpg';
}
Notice that assumes you'll have a unique id on your image element. You'll want to put this logic in the document ready event or window on load.