Image Element Dynamic CSS Hashtag Sharing Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Image Element Dynamic CSS Hashtag Sharing Tutorial

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 achanged 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

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.

This entry was posted in eLearning, Event-Driven Programming, Photography, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *