I have some modals where there are some images. I also have a download button, that should download just the shown (the only visible) image in the modal.
I tried to make that the href link of the download button is equal to the visible image href, but it it doesn't seem to work...
Here you can see the full page code, but the part that interests me is this one:
<div id="myModal_12" class="modal">
<div class="modal-content">
<div class="Slide mySlides_12">
<div class="numbertext">1 / 3</div>
<img src="uploads/IMG_4946.JPG43879.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">2 / 3</div>
<img src="uploads/IMG_4949.JPG21730.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">3 / 3</div>
<img src="uploads/IMG_4950.JPG72501.jpg" class="little_image" style="width:50%;">
</div>
<!-- Next/previous controls -->
<div class="input-group-btn">
<a onclick="downloadFunction(this)">Download this image</a>
</div>
<span class="close cursor" onclick="closeModal(12)">
<img src="/images/close.png">
</span>
<a class="prev" style=" display: block; " onclick="plusSlides(-1, 12)">❮</a>
<a class="next" style=" display: block; " onclick="plusSlides(1, 12)">❯</a>
</div>
</div>
</div>
<script>
function downloadFunction(linkElement) {
var little_image = document.getElementsByClassName("little_image"); // Get all the images with that class
var right_image = $(little_image).not(":hidden"); // Get just the visible image
var src = right_image.src;
linkElement.href = src; // Set the link href on the visible image src
}
</script>
The JavaScript function return an "undefined" value...
Any help is very appreciated
To get the src attribute of an element you should use the attr(<attribute>) method. Given what you are trying to do, this logic could be reduced to:
linkElement.href = $('.little_image:visible').attr('src');
As Taplar has said you can use:
linkElement.href = $(".little_image:visible").attr("src");
However, there is an issue. The jQuery function returns an array and if you added another element that fits this criteria before this element that could cause an issue. Since attr returns for the first element of that array it may not work for the proper element you wanted it to. To fix this you could write this:
linkElement.href = $(".little_image:visible")[1].getAttribute("src"); // [1] the second element
If you want to get an attribute of element you should use attr function. In your problem you need to call like this;
linkElement.href = right_image.attr('src');
In addition, if you want to set an attribute then use .attr(attribute, value) like this:
right_image.attr("src", "https://www.example.com/")
Related
Here my script :
function changeImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG"){
document.getElementByClass("img-big-wrap").src = targetElement.getAttribute("src");
document.getElementById("mainimageLink").href = 'link'+targetElement.getAttribute("data-link")+'.html';
}
}
Inspired of this Answer : Javascript Gallery - Main Image href change
My HTML :
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="<?php echo $data[0][gallery][0][photo];?>">
<img class="img-big-wrap" src="<?php echo $data[0][gallery][0][photo];?>" alt="">
</div>
<div class="img-small-wrap" onclick="changeImage(event)">
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][1][thumb];?>" data-link="1"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][2][thumb];?>" data-link="2"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][3][thumb];?>" data-link="3"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][4][thumb];?>" data-link="4"> </div>
</div>
</div>
The code is actualy just open me the link of the main image only
I want to change the main image with the thumbnails when I click On, I dont know if what i'm doing is the good solution
Working Plunk: http://plnkr.co/edit/pjpHBUD4yPihqr7lJKAD?p=preview
<div class="gallery-wrap">
<div>
<a id="mainimagelink" href="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg">
<img class="img-big-wrap" src="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg?>" alt="">
</a>
<hr/>
</div>
<div class="img-small-wrap" ">
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://s5.favim.com/610/52/Favim.com-winter-nature-small-canon-eos-7d-474348.jpg " data-link="1 "> </div>
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfAMUZQLGObfUBSLgnPj5b5C7Ww2DNMtKbwkuTbglK-p1La17BnA " data-link="2 "> </div>
</div>
</div>
A couple of things you've missed.
The HTML DOM was not well constructed. The tag with id mainimagelink was left unclosed, leading to opening of the main image everytime you clicked on any image.
Not sure of your use case but I believe you were trying to create a thumbnail gallery with a preview. Added Image URLs and CSS to simulate the API response.
'img-big-wrap' class was used for the image container and the actual Image itself, which would lead to errors when you try to locate your element with js.
document.getElementByClass is not the right name for the method. I believe you were going for 'document.getElementsByClassName' which returns an array as multiple elements can have the same className.
Refer to querySelector (most useful of them all):
https://www.w3schools.com/jsref/met_document_queryselector.asp
All the best!
First of all, you have used the same class more than once and tried to access it img-big-wrap.
There is also no accessor called getElementByClass instead use
getElementsByClassName which is an array since you can have multiple divs with the same class.
Typo here "mainimageLink" which you called your div with id="mainimagelink", case matters.
I have moved onclick into JS using addEventListener which saves me passing parameters from the div.
Add an id into your thumbnail parent div myImgDiv and used it to hook an Event Listener to it.
Here is what the code looks like (Not many changes were made):
let smallImgDiv = document.getElementById('myImgDiv');
smallImgDiv.addEventListener('click', (e) => {
let targetElement = e.target || e.srcElement;
let tagName = targetElement.tagName;
if(tagName === "IMG") {
document.getElementById('bigImage').src = targetElement.getAttribute("src");
document.getElementById("mainimagelink").href = 'link' + targetElement.getAttribute("data-link") + '.html';
}
});
.img-small-wrap img{
width: 150px;
height: 150px;
}
.img-big-wrap {
height: 200px;
}
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="#">
<img id="bigImage" class="img-big-wrap" src="http://via.placeholder.com/300.png" alt="">
</a>
</div>
<div id="myImgDiv" class="img-small-wrap">
<div class="item-gallery"> <img src="https://getuikit.com/v2/docs/images/placeholder_200x100.svg" data-link="1"> </div>
<div class="item-gallery"> <img src="https://cdn.dribbble.com/users/312581/screenshots/1676038/female-placeholder_1x.png" data-link="2"> </div>
<div class="item-gallery"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1134418-200.png" data-link="3"> </div>
<div class="item-gallery"> <img src="https://source.sierrawireless.com/~/media/developer%20zone/icons/sw_dz_icons_placeholder.ashx?h=240&la=en&w=240" data-link="4"> </div>
</div>
Hey I have made a function that fills an empty container of a slideshow with images, with each image being contained in it's own div.
My webpage has an undetermined amount of modal images which , when clicked, open a slideshow album of images. I got this working for 1 image then realized that to have it work for an undetermined amount of slideshows of undetermined size I should make a function that fills the slideshow div. I planned to have each modal image to have a data attribute of "1,2,3...etc" and have a bunch an array with multiple objects each named similarly "1,2,3...etc" then I'd use this information to create and append the correct divs and images to the slideshow container.
I have successfully done this but I THINK I need to clear the parent .modal-content div of all it's children EXCEPT the two buttons (.next and .prev), because the modal seems to open the correct slideshow, but only on the first time it is clicked, the other times it just keeps adding more and more of the array to it. I believe clearing the div upon closing the slideshow should fix this IF IN FACT IT COMPLETELY GETS RID OF THE INNER ELEMENTS, which I think my code should do but I got it off of stackoverflow so idk for certain.
I have this code to delete the content of the div (Note this is really where I need to add the code that excludes those 2 elements, but I've included more code for context):
function clearSlides(){
var myNode = document.getElementById("modal_content");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
This is my HTML:
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="clearSlides(); closeModal();">×</span>
<div class="modal-content" id="modal_content">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
.modal-content div get's filled with this js function:
function fillSlides(modalID){
var container = document.getElementsByClassName("modal-content");
var slides = {
"1": ["Images/LS_01.jpg", "Images/LS_02.jpg", "Images/LS_03.jpg", "Images/LS_04.jpg" ],
"2": ["Images/LS_05.jpg", "Images/LS_06.jpg", "Images/LS_07.jpg", "Images/LS_08.jpg" ],
"3": ["Images/LS_09.jpg", "Images/LS_10.jpg", "Images/LS_11.jpg", "Images/LS_12.jpg" ]
};
var modal_num = modalID.getAttribute('data-modal');
//alert(slides[modal_num].length);
for (var i = 0 ; i < slides[modal_num].length; i++) {
var the_divs = document.createElement('div');
var s_img = document.createElement('img');
the_divs.className = 'mySlides';
s_img.src = slides[modal_num][i];
the_divs.appendChild(s_img);
container[0].appendChild(the_divs);
}
}
Please let me know if further clarification is required.
As per comments keep your controls outside of #modal_content use innerHTML='' to wipe everything within it.
Demo
function clearSlides() {
var content = document.getElementById('modal_content');
content.innerHTML = '';
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
<div class="row">
<div class="column">
<img id="modal-1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" data-modal="1" onclick="fillSlides(this); openModal(); currentSlide(1); " class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<div class="close cursor" onclick="clearSlides(); closeModal();">×</div>
<div class="modal-content" id="modal_content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://chasingseals.com/wp-content/uploads/2014/02/greenlandBanner2000x800.jpg" class="img">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.catholicevangelism.org/wp-content/uploads/2013/06/1200x800.gif" class="img">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.a1carpet-to.com/wp-content/uploads/2015/08/600x400.png" class="img">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://support.kickofflabs.com/wp-content/uploads/2016/06/800x1200.png" class="img">
</div>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
Since you are adding class 'mySlides' to your slides, you can check if the element you are removing actually contains mySlides class. If it does not you should not remove it.
Also you can move buttons to a separate div. This would separate your slides and controls so it gives you more freedom to manipulate modal content.
I have some listings. At present when page loads listing is showing like
Img 1
Test 1
Img 3
Test 3
img 2
Test 2
When page loads, I need results like
Img 1
Test 1
Img 2
Test 2
Img 3
Test 3
Img is in <a> tag and test content is in <div> tag
How can order the <div> and <a> in ascending order when page loads?
In <div> tag there is data-id. In <a> tag there is data-tag-id.
Html
<figure class="image_container">
<img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="738" height="800">
<figcaption class="caption">
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="1"></a>
<div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;"><p><strong>Test1</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="3"></a>
<div id="areaDesc-3" class="description invisible" data-id="3"><p>Test3</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="2"></a>
<div id="areaDesc-2" class="description invisible" data-id="2"><p>Test2</p></div>
</figcaption>
</figure>
Script
$('.description').sort(function (a, b) {
return parseInt(a.data-id) > parseInt(b.data-id);
}).each(function(){
var elem = $(this);
elem.remove();
$(elem).appendTo(".description");
});
Your code is close to be working.
You only need to use jQuery .data() to access data attribute value. Note that it returns number, not string, if data attribute stores numeric value, so you don't need to parse it yourself.
You also do not need to .remove() element. You just need to append your item to specific container - if item is already in DOM tree, then it will automatically be detached from its current place and will be moved it to a new location. Just appending items consequently in the right order gives the desired results.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() { $(this).appendTo(".container"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-id="1">1</div>
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="9">9</div>
<div data-id="5">5</div>
<div data-id="4">4</div>
<div data-id="8">8</div>
<div data-id="7">7</div>
<div data-id="6">6</div>
</div>
Update: in order to sort your divs together with related <a/> tags, you can use jQuery .prev() which simply takes the previous DOM element and then you can do the same operation with this link. However, it is a better idea to wrap a and div into single element, so that their relation is described in HTML, but not by their order.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() {
$(this).prev().appendTo(".container");
$(this).appendTo(".container");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
One
<div data-id="1">1</div>
Three
<div data-id="3">3</div>
Two
<div data-id="2">2</div>
Nine
<div data-id="9">9</div>
Five
<div data-id="5">5</div>
Four
<div data-id="4">4</div>
Eight
<div data-id="8">8</div>
Seven
<div data-id="7">7</div>
Six
<div data-id="6">6</div>
</div>
You can try:
var yourList = $(".description");
yourList.sort(function(x, y){
return $(x).data("id")-$(y).data("id")
});
$(".caption").append(yourList);
Have tested and works now, noticed a small typo. See it working here https://jsfiddle.net/trekmp/pLyw3qg4/5/
I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:
<div class="college-list-container">
<div class = "individual-college-container" id="text1">
<div class="image-header"><h3>text1</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container">
<div class="image-header"><h3>text2</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container" id="itm">
<div class="image-header" ><h3>text3</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
Javascript
/show overlay when one checkbox is checked and add its name/image to the empty space
$('.comparison').click(function(e){
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
e.preventDefault();
var clg = $("<li></li>")
clg.text(clgId);
var removeLink = $("<a href=''>(Remove)</a>");
clg.append(removeLink)
$('.comparison-colleges').append(clg);
$('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);
});
I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.
Please help
I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):
http://jsfiddle.net/py38kuvv/
I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):
var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();
and also updated your click handler:
$('.comparison').on( "click", function(e) {
In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)
It is adding all of them because
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
should be
var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();
I want to run a generic javascript function with an element, sometimes multiple elements in the same HTML document. It seems to me the easiest way is to call the function from inside a DOM element. OK here's the problem. "this" refers the window element and I have seen how scope works for functions using "this" but I don't see how to get "this" to refer to an element.
I could do getElementById but I want a fairly generic javascript and not have to come up with unique IDs everytime I want to use it. getElementsByClasses may be a workaround but it just seems there should be an easier way to do this without relying on id's or classes.
The HTML
</HEAD>
<BODY>
<div id="content">
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div class="linkicon">
<img src="asislink.jpg">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<script>valignimg();</script>
</div>
</div> <!-- End content -->
</BODY>
</HTML>
The javascript. It's dh and ih that I need to pass to the function.
function valignimg() {
dh = /* div element */
ih = /* image (child element) */
topmargin = (dh.offsetHeight - ih.offsetHeight)/2;
return topmargin;
}
If you're not calling it from one of the elements (i.e. via event handler), you're going to have to use a selector of some kind, either ID or class as you highlighted, or name or tag name if that can work, or some combination. Somewhere along the way it will need to be specified. In even though you weren't keen on using class, that's likely your best option so I've highlighted it in this first example.
//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) {
valignAll();
});
function valignimg(dh) {
//Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
console.log(dh.id);
//This supposes that you know the image tag you want is always the first img element among dh's children.
ih = dh.getElementsByTagName('img')[0];
console.log(ih.alt);
var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
console.log('dh.offsetHeight = ' + dh.offsetHeight);
console.log('ih.offsetHeight = ' + ih.offsetHeight);
console.log('topmargin = ' + topmargin);
ih.style.marginTop = topmargin + "px";
console.log('ih.style.marginTop = ' + ih.style.marginTop);
}
function valignAll(){
var linkIcons = document.getElementsByClassName('linkicon');
for(i = 0;i < linkIcons.length;i++){
valignimg(linkIcons[i]);
}
}
<BODY>
<div id="content">
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div id="icon1" class="linkicon">
<img alt="img1" src="http://placehold.it/20x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon2" class="linkicon">
<img alt="img2" src="http://placehold.it/21x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon3" class="linkicon">
<img alt="img3" src="http://placehold.it/22x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
</div>
</div>
<!-- End content -->
</BODY>
You can see, although my usage is pretty rudimentary, I've used getElementsByTagName as well, calling from a parent element other than document. The IDs I've added aren't used for locating anything, I'm just using them so that when I log to console you can see which element it really is, the same as with my horrendous misuse of the alt attribute on the images.
If you know that your only image elements on the page are the ones you're acting on, then maybe starting with document.getElementsByTagName('img') is the approach for you, and then get the div with the .parentNode property. This would remove the reliance on classes, but if you add other img tags to the page then you'd need some way to identify from each one whether it's once you want to run your align function against or not. The img tags you want to access have a common ancestor or parent that no other img tags do. I've added another snippet below that shows this. And you could combine these two approaches with a nest loop to get all img tags within multiple divs that all share a class, for example.
//warning - this event isn't supported on some older browsers like IE8
document.addEventListener("DOMContentLoaded", function(event) {
valignAll();
});
function valignimg(ih) {
//Only added the IDs for this purpose, not using them to select elements so there's no functional requirement for them.
console.log(ih.alt);
//This supposes that you know the image tag you want is always the first img element among dh's children.
dh = ih.parentNode;
console.log(dh.id);
var topmargin = (dh.offsetHeight - ih.offsetHeight) / 2;
console.log('dh.offsetHeight = ' + dh.offsetHeight);
console.log('ih.offsetHeight = ' + ih.offsetHeight);
console.log('topmargin = ' + topmargin);
ih.style.marginTop = topmargin + "px";
console.log('ih.style.marginTop = ' + ih.style.marginTop);
}
function valignAll(){
//if they're the only img tags on the page,
//document.getElementsByTagName('img'); will work fine.
//lets assume they aren't.
var images = document.getElementsByClassName('linksbox')[0].getElementsByTagName('img');
//I can grab the comment parent/ancestor by whatever means available, and then grab just its decendants by tag name.
alert(images);
for(i = 0;i < images.length;i++){
valignimg(images[i]);
}
}
<BODY>
<div id="content">
<img src="http://placehold.it/240x20"><< Some sort of header logo
<div class="linksbox">
<a href="https://www.corponline.org" target="_blank">
<div id="icon1" class="linkicon">
<img alt="img1" src="http://placehold.it/20x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon2" class="linkicon">
<img alt="img2" src="http://placehold.it/21x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
<a href="https://www.corponline.org" target="_blank">
<div id="icon3" class="linkicon">
<img alt="img3" src="http://placehold.it/22x20">
</div>
</a>
<div class="linkblurb">
<h2>National</h2>
<p>Description of link</p>
</div>
</div>
</div>
Sponsor Logos or Site Certs in the footer
<img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20"><img src="http://placehold.it/20x20">
<!-- End content -->
</BODY>