Develop Reference

Toggling an html IMG element's class using JS (no Jquery)

I give up... All of your answers were just different ways of targeting the local element.
If you bothered to actually read what I was saying you would realise that it was not a problem with the code I already had, just that the code DID NOT work on IMG tags.
While faffing around trying to demonstrate my problem (and that none of your solutions did anything different to what was already happening) I found that I can achieve exactly what I want by applying a Grayscale filter to a DIV element placed over each image. The mouseover event then triggers an opacity change in the DIV element.
It is a little heavier that I wanted but it answered my ACTUAL question. The answer being:
Yes, there probably is a way to toggle class of IMG tags. But no, I am probably not going to find it here without causing arguments or being told i'm using "bad code". So yes, it IS easier and more efficient to target DIV elements.
By the way, page load times are about how large data packages are. Larger data packages (images, html/css/js documents, etc) take longer to download and so the page takes longer to load. The website I am trying to create proves this thesis, I have an almost complete and (almost) fully functional website with loads of 'clever' little effects all under 20mb, about 15mb of which is images. This website is clean and simple, is hosted on my Samsung Galaxy Tab 4 (using Papaya) and loads almost instantly.
THIS is what I meant by "I want this to be VERY lite". Thank you all for your attempts to help, it's just a shame that I couldn't get anyone to understand what was going on.

If you add onClick to image element you don't need to pass anything, you will receive MouseEvent which contains all information. You need target from event.
I suggest to not use onClick on element as it is not scalable, you have to add it to all elements. Better to add listener to wrapping/container element and then filter target by some attribute e.g data-something Please check fiddle
So you have wrapping element and you images:
<div class="images-container">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray thumb-color" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
</div>
and you attach listener to you wrapping element. It is best practice as you don't attach listeners to each element and same time you are able easily scale your solution
var imagesContainerEl = document.querySelector('.images-container');
imagesContainerEl.addEventListener('click', function(event) {
var element = event.target;
if (element.hasAttribute('data-toggleable')) {
element.classList.toggle('thumb-color');
}
});
The same code can be extended to support mouseover and mouseout. Check fiddle2. One function to rule them all and in the darkness bind them..
var imagesContainerEl = document.querySelector('.images-container');
imagesContainerEl.addEventListener('mouseover', onToggleImage);
imagesContainerEl.addEventListener('mouseout', onToggleImage);
function onToggleImage(event) {
var element = event.target;
if (element.hasAttribute('data-toggleable')) {
element.classList.toggle('thumb-color');
}
}
Also updated fiddle which shows how to make image grayscale/color

Is what you refer to in your question as
onClick="colorFunction(image1)"
an inline javascript event listener?
If so, try replacing it with:
onClick="colorFunction(this)"
and rewrite colorFunction() as:
function colorFunction(image) {
image.classList.toggle('thumb-color');
}

jQuery .attr Not Working Properly, Miss-Retrieving Links

This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.

Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.

images being replaced when I want the next image just added

I have a javascript function which animates images like a slide show. What I'd like is to just have the images being displayed one after another from left to right.
I can't seem to find where in the code the images is getting replaced.
var realoffset = d.offset % d.total;
$(this)
.html(d.titles[realoffset])
.attr('action','article:'+(realoffset+1))
.fadeIn(600);
$(this)
.siblings('img')
.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
.attr('action','article:'+(realoffset+1))
.fadeIn(600);

.attr('src',function(i,attr){
return attr.replace(
/.+(\/large\/[a-zA-Z\.-_]+)$/,
d.locations[realoffset]+'$1'
)
})
This code is replacing the src of the img tag. You're going to want to be inserting new img tags to show them side by side, not replacing the current tag's src.

Did you write that jQuery snippet yourself? I'm guessing not. Anyway, there are a lot of factors involved in creating a "slideshow" with JavaScript. It sounds like you just need some general knowledge about the subject.
First, let's get your vision straight. Based on your code, you seem to want to fade images into view as they are cycled in the slideshow. For that, study this example:
http://jsfiddle.net/Y6fnx/1/
Now, your code does stuff with d.titles; purely by inference I'm guessing that this displays the image and also a caption for the image? For that, study my updated fiddle:
http://jsfiddle.net/ESP9S/1/
There are countless ways to create a slideshow! You can implement auto-play by taking advantage of JavaScript's setTimeout. You can load your captions from somewhere else. You can get your images from a external script (like Barbara mentioned). You can slide your images instead of fading them by playing with jQuery animate. It never ends!

Get slideToggle() to reveal content directly above it, as opposed to below it?

Problem summary: Instead of doing what the code currently usually does - revealing content beneath the button - I need it to reveal content above it.
First of all I'm not versed in jQuery/Javascript in any sense, so if I'm asking for too much to be done on my behalf then please say so and hint toward the solution.
Now, onto the problem:
$('.drop_down_title').click(function() {
$(this).next('.toggle_panel').slideToggle('slow', function () { });
$(this).find('.arrow_drop_down').toggleClass('selected', function () { });
});
The code above is working fantastic to show content below a title (like having various 'related' blocks in the sidebar that you can hide/show).
However I've also planned to use the same mechanic for hiding portions of content that would be above the button, like so:
http://i.stack.imgur.com/B91DC.png
Where the buttons would be clicked to reveal more of the summary or bullet points.
I've tried tweaking the code to things that seem logical like:
$(this).previous('.toggle_panel')
In hope of it looking up the page for the relevant class, but still no dice.
Thank you for your time; any advice, help or solutions would be greatly appreciated.
Requested HTML (for the current working slide down):
<html>
<div class="slidebox">
<div class="drop_down_title">
<a class="arrow_drop_down">Button Click</a>
</div>
<div class="toggle_panel">
<p>This is some example content that should be hidden when the above button is clicked!</p>
</div>
</div>
</html>
I'm trying to get it so that the divs "drop_down_title" and "toggle_panel" are swapped. So that the content is being revealed above the button.

Perhaps .prev() is what you actually need. Not .previous. See JQuery Docs

Multiple Instances of a JavaScript Rollover - Stopped Functioning

So, I've been using this JavaScript Snippet through out a fairly large website for rollovers:
<img src="img/vendorbuttons/bn_off.gif" name=bn_off border=0>
Which has worked great, and effortlessly, until now - I have a couple pages that will use the same rollover images for Buy Buttons across the pages, they will be the same aside from a different link being implemented. -Once I began using that JS, with using the same images more then once, all of the JS rollovers stopped work and don't render the 'off state'.
Ultimately - apparently, I can't have multiple JS rollovers using the same images more then once with this code? Any suggestions?

Are you sure nothing was changed? Images or code?
Since there isn't any clue here in the html (because you say it worked earlier), I can only suggest the following:
href="http://www.barnesandnoble.com" , name="bn_off" and border="0" <- these attribute values are missing double-quotes in your code.
Also try adding id="bn_off" (You already have name="bn_off", keep that too).
EDIT:
I think I know why. Because you are copying and pasting this to use in multiple locations, you get multiple links with the SAME name bn_off, and that is why it stops working.
It could have been WAY more easier with jQuery and/or CSS but here's what you can do with what you have:
Add these two functions inside a script block in the HEAD section of your html:
function OnMouseOver(link)
{
if (document.images)
{
var imageElements = link.getElementsByTagName("img");
imageElements[0].src = 'img/vendorbuttons/bn_on.gif';
}
}
function OnMouseOut(link)
{
if (document.images)
{
var imageElements = link.getElementsByTagName("img");
imageElements[0].src = 'img/vendorbuttons/bn_off.gif';
}
}
Change your html for the links like this:
<a href="http://www.barnesandnoble.com" onMouseOver= "OnMouseOver(this);" onMouseOut= "OnMouseOut(this);">
<img src="img/vendorbuttons/bn_off.gif" name="bn_off" border="0">
</a>
Now you can copy and paste the links as much as you want, the javascript won't depend on the name.
If I was you, I would use jQuery and CSS to simplify things.
Hope this helps.

this is how to fix your existing script. However, Guganeshan's solution is much cleaner.
<img src="img/vendorbuttons/bn_off.gif" border=0>