Created
October 13, 2012 22:22
-
-
Save Sleavely/3886398 to your computer and use it in GitHub Desktop.
Inserting images safely with Javascript. See console for mouseover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="sv-SE"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Klarna dynamic logos</title> | |
| </head> | |
| <body> | |
| <img src="http://placekitten.com/245/135" /> | |
| <script type="text/javascript" src="script.js?eid=klarna&width=250" class="klarna-dynlogo"></script> | |
| <div> | |
| <script type="text/javascript" src="script.js?eid=jocke&width=100&tooltip=true" class="klarna-dynlogo"></script> | |
| <script type="text/javascript" src="script.js?eid=klarna&width=150" class="klarna-dynlogo"></script> | |
| <img src="http://placekitten.com/230/135" /> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var klarna = { | |
| cdn : "https://cdn.klarna.com/public/images/global/logos/v1/basic/global_basic_logo_std_blue-black.png?", | |
| selector : "klarna-dynlogo", | |
| params : 0 | |
| }; | |
| var matches = []; | |
| if ('querySelectorAll' in document){ | |
| matches = document.querySelectorAll("."+klarna.selector); | |
| }else{ | |
| var elems = document.getElementsByTagName('*'); | |
| for (i in elems){ | |
| if((" " + elems[i].className + " ").indexOf(" "+ klarna.selector +" ") > -1){ | |
| matches.push(elems[i]); | |
| } | |
| } | |
| } | |
| var match = matches[0]; | |
| //find out what the eid and stuff is | |
| var queryString = match.src.replace(/^[^\?]+\??/,''); | |
| function parseQuery (query) { | |
| var Params = new Object(); | |
| if (!query) return Params; // return empty object | |
| var Pairs = query.split(/[;&]/); | |
| for (var i = 0; i < Pairs.length; i++) { | |
| var KeyVal = Pairs[i].split('='); | |
| if (! KeyVal || KeyVal.length != 2) continue; | |
| var key = unescape(KeyVal[0]); | |
| var val = unescape(KeyVal[1]); | |
| val = val.replace(/\+/g, ' '); | |
| Params[key] = val; | |
| } | |
| return Params; | |
| } | |
| var params = parseQuery(queryString); | |
| if(params.eid) klarna.cdn += "eid="+params.eid; | |
| if(params.eid && params.width) klarna.cdn += "&"; | |
| if(params.width) klarna.cdn += "width="+params.width; | |
| //create a container for all the stuff | |
| klarna.span = document.createElement("span"); | |
| klarna.span.style.position = "relative"; | |
| //create the image | |
| klarna.image = new Image(); | |
| klarna.image.src = klarna.cdn; | |
| klarna.span.appendChild(klarna.image); | |
| if(params.tooltip){ | |
| //create the tooltip | |
| klarna.box = document.createElement("div"); | |
| klarna.box.style.backgroundColor = "#F1F1F1"; | |
| klarna.box.style.backgroundImage = "url(https://cdn.klarna.com/public/images/global/logos/v1/basic/global_basic_logo_std_blue-black.png?eid="+(params.eid ? params.eid : "unknown")+"&width=50)" | |
| klarna.box.style.backgroundPosition = "265px 100px"; | |
| klarna.box.style.backgroundRepeat = "no-repeat"; | |
| klarna.box.style.border = "1px solid #444444"; | |
| klarna.box.style.borderRadius = "5px"; | |
| klarna.box.style.bottom = "1em"; | |
| klarna.box.style.boxShadow = "1px 1px 3px #333333"; | |
| klarna.box.style.display = "none"; | |
| klarna.box.style.fontFamily = "Arial, Verdana"; | |
| klarna.box.style.fontSize = "8pt"; | |
| klarna.box.style.fontWeight = "bold" | |
| klarna.box.style.height = "110px"; | |
| klarna.box.style.padding = "5px"; | |
| klarna.box.style.position = "absolute"; | |
| klarna.box.style.width = "310px"; | |
| klarna.box.style.zIndex = "9001"; | |
| klarna.box.innerHTML = "<p>Klarna Account: Gather all your purchases onto one bill, and get your goods before you pay, when you can.</p>"; | |
| klarna.bullets = document.createElement("ul"); | |
| klarna.bullets.style.fontWeight = "normal"; | |
| klarna.bullets.style.listStylePosition = "inside"; | |
| klarna.bullets.style.listStyleType = "circle"; | |
| klarna.bullets.style.margin = "0"; | |
| klarna.bullets.style.padding = "0"; | |
| klarna.bullets.innerHTML = "<li>Safer - Only pay for goods you've received.</li><li>Simpler - No credit cards or passwords.</li><li>Millions of satisfied online shoppers</li>"; | |
| klarna.box.appendChild(klarna.bullets); | |
| klarna.span.onmouseover = function() { | |
| //show the tooltip | |
| klarna.box.style.display = "block"; | |
| } | |
| klarna.span.onmouseout = function() { | |
| klarna.box.style.display = "none"; | |
| } | |
| klarna.span.style.zIndex = "9000"; | |
| klarna.span.appendChild(klarna.box); | |
| } | |
| //mark the element as processed by removing the class | |
| match.className = ""; | |
| //FINISH HIM! | |
| match.parentNode.insertBefore(klarna.span, match); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment