Image Element Dynamic CSS Hashtag Sharing Tutorial
Our recent realization that “hashtag sharing” could be the alternative to our “PHP mail” exploits of the past meant that …
- that “proof of concept” idea we had of involving the HTML canvas sharing conduit we wanted to tell about, as yet, has not happened because our CSS filters did not flow through via the [canvasContext].drawImage functionality … was not the end of our sharing endeavours because …
- hashtag sharing of the image outerHTML alternative approach …
… comes into play, today. We’ll see what can be done at the canvas element end regarding more “filter CSS flow through” research into the future. Meanwhile, also below see a mechanism by which users can tweak dropdown CSS styling options …
function doemail() {
var emailee=prompt('Please enter email address to share with.', '');
if (emailee == null) { emailee=''; }
if (emailee.indexOf('@') != -1) {
document.getElementById('aemail').href='mailto:' + emailee + '?subject=Image%20Filters&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML));
document.getElementById('aemail').click();
}
}
function dosms() {
var emailee=prompt('Please enter SMS number to share with.', '');
if (emailee == null) { emailee=''; }
if (emailee != '' && emailee.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
document.getElementById('asms').href='sms:' + emailee + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#image=' + encodeURIComponent(document.getElementById('animg').outerHTML));
document.getElementById('asms').click();
}
}
function embellish() {
var newstyling=prompt('Optionally change styling.', document.getElementById('selopt').innerText);
if (newstyling == null) { newstyling=''; }
if (newstyling != document.getElementById('selopt').innerText && newstyling.indexOf(':') != -1) {
document.getElementById('selopt').innerText=newstyling;
ais=document.getElementById('animg').src;
document.getElementById('danimg').innerHTML="<img style=\"" + newstyling + "\" id=animg src=\"" + ais + "\"></img>";
}
}
And so, onto yesterday’s Image Element Dynamic CSS Primer Tutorial we have a changed second draft Image Element Dynamic CSS web application you can also try below.
Previous relevant Image Element Dynamic CSS Primer Tutorial is shown below.
Image Element Dynamic CSS Primer Tutorial
We’re curious about something and need to start a new “proof of concept” (first draft) phase involving, at this early stage …
- HTML img elements …
- applied dynamic user selected CSS (with an emphasis on dropdown suggested filter property usage) … powered by …
- browsed for or image URL defined content logic
Luckily we have precedents for all this, and this can be a good start! So please try our first draft Image Element Dynamic CSS web application you can also try below.
Tomorrow’s work will see whether our theory comes to fruition!
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
