{"id":54759,"date":"2022-01-30T03:01:12","date_gmt":"2022-01-29T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54759"},"modified":"2022-01-30T07:34:25","modified_gmt":"2022-01-29T21:34:25","slug":"the-cell-game-image-map-editing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/the-cell-game-image-map-editing-tutorial\/","title":{"rendered":"The Cell Game Image Map Editing Tutorial"},"content":{"rendered":"
\"The<\/a>

The Cell Game Image Map Editing Tutorial<\/p><\/div>\n

Yesterday’s CSS3 Filters Image Editing Tutorial<\/a>‘s saw us introduce an “in place image editing” external Javascript img_svg.js<\/a> tool.<\/p>\n

Today sees us get a “second cab off the rank” going using that tool with the web application of The Cell Game Primer Tutorial<\/a>, and its interest lies in its modus operandi, principally an “image map”, which is basically an HTML img whose onclick logic is often “taken over” by a “map” full of “area” subelements partitioning off an area of the image associated with that area’s “href” attributed destination or “onclick” action. We discovered a useful thing here, when we changed an image map definition end part as per<\/font> …<\/p>\n


\n<!--<\/font>area shape=\"default\" nohref alt=\"\" \/--<\/font>>
\n<\/map>
\n<\/code><\/p>\n

Yes, make this change and the “non catered for” area parts are allowed through to the keeper<\/i>, that being the underlying HTML img element, which we can write “onclick” logic for to involve our image editing tool ideas.<\/p>\n

Feel free to try the mildly changed<\/a> the_cell.html<\/a>\u2018s The Cell Game<\/a>.<\/p>\n

\n

\n

Previous relevant CSS3 Filters Primer Tutorial<\/a> is shown below.<\/p>\n

\"CSS3<\/a>

CSS3 Filters Primer Tutorial<\/p><\/div>\n

It’s not just the image editor Gimp<\/a> that has “filters” as tools to create effects with image data (files), as you might see with tutorials like Gimp Decor Filters Revisit Tutorial<\/a>. These days, with CSS, and with CSS3<\/a> these days, there are some great “filters” to play around with, that modify an image there and then with CSS and\/or Javascript DOM (as per the HTML select “dropdown” element onchange<\/i> event logic …<\/p>\n


\nfunction selchange(selo) {
\n var bs=\"\";
\n if (selo == null) {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'h-shadow') {
\n if (document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + selo.value + selo.title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + selo.value + selo.title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'v-shadow') {
\n if (document.getElementById(\"sh-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id == 'xblur') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'spread') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else {
\n document.getElementById(\"myimage\").style.filter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n }
\n}
\n<\/code><\/p>\n

) … or jQuery means by which to make this happen with a lot of the modern web browsers. If you see “CSS3” mentioned, then don’t expect everything to work on super-old web browsers, but expect that anything you implement could be aesthetically interesting or pleasing, as it would not have taken until CSS3 to come along if it was a dead set simple thing to have implemented in the early days of the internet.<\/p>\n

Today’s simple (really) proof of concept web application owes a debt of gratitude to this very useful link<\/a>, which gave us the parameters by which we could construct today’s live run<\/a> with its pretty simple HTML and CSS (via CSS3) and Javascript DOM css_filters.html<\/a> source code for you to peruse, and make of what you will. So what (CSS3) filters are we talking about here?<\/p>\n