add readme and example image

3 files changed, 46 insertions, 6 deletions

diff --git a/README.md b/README.md
index 0af99d0..439dc2b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,41 @@
 # hovercard.js
+
 A script to load cards when you hover over a link in an article.
+
+## Example
+
+![Text in an article with an active hovercard that contains an image, a title, and a description](screenshot.png)
+
+## Getting Started
+
+The `hovercard.js` script searches for all `<a>` tags enclosed within an `<article>` tag on a web page. Mouse hover and focus listeners are added to each link. When the mouse hovers over a link, `hovercard.js` looks for the `href` value of the link in a JSON object called `hovercards`. If the link is found in the JSON object, a hovercard is added directly below the link on the page.
+
+When a user hovers off the link or moves focus onto another element (i.e. by using the keyboard to navigate links on the page), the hovercard will disappear.
+
+## Usage
+
+To use the hovercard script, first download a copy and upload it to your site. Then, add this code above the closing `</body>` tag on your web page:
+    
+    <script src="./path/to/hovercard.js"></script>
+
+Substitute the path of the script in the example above with the location of the script on your site.
+
+You should add a JSON object to every page that contains a hovercard. This JSON object should use the following structure:
+
+    {
+        "https://example.com": {
+            "title": "Example Domain",
+            "description": "This domain is used for examples."
+            "photo": "https://example.com/example.png"
+        }
+    }
+
+Keys in the JSON object represent links on the page to look up. The only required key value is `title`. If a description and/or photo are provided, these will be included in the hovercard.
+
+## License
+
+This code for this project is placed in the public domain.
+
+## Contributors
+
+- capjamesg
\ No newline at end of file
diff --git a/hovercard.js b/hovercard.js
index 3c765c1..9b8a92e 100644
--- a/hovercard.js
+++ b/hovercard.js
@@ -1,8 +1,7 @@
 // comment out this variable to add your own hovercards
-var hovercards = {
-    "https://www.w3.org/community/sustyweb/": {"title": "Sustainable Web Design Community Group", "A community group 
-dedicated to creating sustainable websites. This group will not publish specifications." }
-  };
+// var hovercards = {
+//     "https://www.w3.org/community/sustyweb/": {"title": "Sustainable Web Design Community Group", "A community group dedicated to creating sustainable websites. This group will not publish specifications." }
+//   };
   
   var article = document.getElementsByTagName("article");
 
@@ -11,10 +10,11 @@ dedicated to creating sustainable websites. This group will not publish specific
   }
 
   function hover (target_link) {
-    if (hovercards[target_link]) {
+    var hovercard_data = hovercards[target_link.href.replace(/\/+$/, "")];
+    if (hovercard_data) {
       var new_box = document.createElement("div");
       new_box.classList.add("hovercard");
-      new_box.innerHTML = hovercards[target_link];
+      new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong><p>" + hovercard_data["description"] + "</p>";
       new_box.style.top = window.scrollY + target_link.getBoundingClientRect().top + "px";
       new_box.style.left = window.scrollX + target_link.getBoundingClientRect().left + "px";
       new_box.id = "tooltip";
@@ -48,3 +48,4 @@ dedicated to creating sustainable websites. This group will not publish specific
       unhover(this);
     });
   }
+
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..b197b6f
--- /dev/null
+++ b/screenshot.png