We Keep Coding

How to get innerHTML when clicking an <a> and inserting that innerHTML on another HTML page?

I have an image gallery, each gallery item has the picture, a title, and description. I want to be able to click on any of these gallery items and have a "detail" page load and fill in dynamically the image, title, and description. How can I do this?
I tried getting each of the values inside the divs with.innerHTML, but how do I "send" these values to the other HTML page?
You can see exactly what I want here:
http://madebymorro.com/web_majosecastano/nieve.html
This is the image gallery, only 1 item is active, the first one under "2008".
You can see that when you click on it, a detail page opens:
http://madebymorro.com/web_majosecastano/detalle.html
This is what I want to achieve, but not having to create a detail page manually for each one of the image gallery items. I want the detail page to fill in with the info coming from the galley HTML page.
Thanks!!!

Convert your pages into php and create only one detail page when you click on any gallery item pass the id or title of that gallery in tag and access that id using url query parameter or any other method
<div class="row">
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=1">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=2">
<img src="random-img.jpg"></img>
</a>
</div>
<div class="col-md-4">
<div class="gellery-block">
<a href="detail-page.php?id=3">
<img src="random-img.jpg"></img>
</a>
</div>
</div>
and in detail-page.php access id using query paremeter and then access result using id and print in detail page
To access id using query parameter add code in detail page like this
<?php $galleryId= $_GET['id']; ?>
here you will get gallery id

Removing an image and showing this removed image in the deleted section

I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".

I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.

Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.

follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful

Change the image path in Moodle for a specific page

In my case i want to change the href image icons when the user comes to contact us page. But those images are loaded from header file and i want to change the image path when it comes to contact us page.
<div class="header_nav_buttons" style="width: 25%;">
<div id="first_img" style="float: left;margin-right: 3px;">
<a href="cth/support.php"><img src="cth/theme/boxxie/pix/tech_support.png"/><a>
</div>
<div id="second_img">
<a href="cth/contact.php">
<img id="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
</div>
</div>
And i tried this Jquery codes.
$('#contact_blue_icon').each(function(){
//Change the src of each img
$(this).attr('src','cth/theme/boxxie/pix/blue_contact.png');
});
Any helps would be appreciated.

'contact_blue_icon' is an Id. It is an unique element
Try with full image path
$('#contact_blue_icon').attr('src','http://image_path');

Since id is unique, you need to use class instead for your images:
<img class="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
So you need class="contact_blue_icon" not id="contact_blue_icon"

How to swap between two images with one separate hyperlink ONLY

Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.

As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.

Get src of image in button

I have a button with an image on it. How can I get the src of that image on the button in JavaScript?
This is the HTML:
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4" onClick="check(this.id)">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80/>
</button>

I am really not sure what you are trying to do but...
To get the src of the image in the button tag do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.src)">
</button>
to get an id of that img element do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.id)">
</button>
and a basic click handler will look like this for both
<script>
function getImgId(id){
alert(id)
}
</script>

You're really close, just move the onclick from the a element to the img element.
You probably want to remove the a element entirely, as it's invalid HTML (button elements can't contain any interactive content elements).
Also, unless you're writing XHTML (and you almost certanly aren't), there shouldn't be a / before the > at the end of your img tag. (It's harmless and allowed, it's just pointless.)