Created
April 27, 2011 12:18
-
-
Save TimBroddin/944149 to your computer and use it in GitHub Desktop.
Switch images (generated by Photoshop slice export) from inside td elements to inline styles on td elements
This file contains hidden or 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
// makes <td><img src="flower.jpg" width="300" height="200" /></td> into | |
// <td style="background-images: url(flower.jpg); width: 300px; height: 200px;"> </td> | |
// | |
// jQuery loader | |
// http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/ | |
if (typeof jQuery == 'undefined') { | |
function getScript(url, success) { | |
var script = document.createElement('script'); | |
script.src = url; | |
var head = document.getElementsByTagName('head')[0], | |
done = false; | |
// Attach handlers for all browsers | |
script.onload = script.onreadystatechange = function () { | |
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { | |
done = true; | |
// callback function provided as param | |
success(); | |
script.onload = script.onreadystatechange = null; | |
head.removeChild(script); | |
}; | |
}; | |
head.appendChild(script); | |
}; | |
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js', function () { | |
inlineImages(); | |
}); | |
} else { // jQuery was already loaded | |
inlineImages(); | |
}; | |
function inlineImages() { | |
$('td > img').each(function () { | |
var td = $(this).parent(); | |
td.css({ | |
backgroundImage: 'url(' + $(this).attr('src') + ')', | |
width: $(this).attr('width'), | |
height: $(this).attr('height') | |
}).html(' '); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment