smartboyathome Posted November 13, 2009 Share Posted November 13, 2009 See: http://smartboyssite.net/formosum/wolfCustomize.phpAnd: http://smartboyssite.net/formosum/changeWo...?furbase=3333FFI ripped the Javascript from Wajas, but I'm guessing its will not do what I want. I'm new to javascript, so forgive me if I made some stupid mistakes.Anyway, I'm trying to create something which will let you customize the colors of different layers within an image. At first I tried SVG, but that failed miserably, so now I'm using PHP + layered PNG images adjusted with imagemagick (hackish, I know, but at least it works). It works when I use the second URL listed above, but I want to embed it into the web page. What I need to do now is take the data from the form and have the second script create a new image, which is embedded into the first. How I saw it done on Wajas was using: function ajaxmenuchange(serverPage, objID){ var obj = document.getElementById(objID); xmlhttp.open("GET", serverPage); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ obj.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null);} And: <input type="text" id="furcolor" value="333333"><input type="button" value="Preview" id="preview" onclick="ajaxmenuchange('changeWolfColors.php?furbase=' + document.getElementById('furcolor').value, 'wolfImage'); return false;"> But it isn't working. Is there a way to fix this so it will work, or perhaps another way to regenerate the image without refreshing the whole page? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 13, 2009 Share Posted November 13, 2009 The second script outputs an image, not HTML code. It's not going to do anything if you try to set the innerHTML property of an object to image data, image data is not HTML code. You don't even need to use ajax with this at all, if you have an img element on your page that you want to update you can just set the src property of it to the URL of your script. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2009 Share Posted November 15, 2009 I managed to change the fur colour usingchangecolour.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function ajaxmenuchange(){var furcolor=document.getElementById('furcolor').value;document.getElementById("wolfSVG").setAttribute("data", "Wolf_Lineart.php?furbase="+furcolor);}/*--*//*]]>*/</script> <style type="text/css"></style></head><body><input type="text" id="furcolor" value="333333" /><input type="button" value="Preview" id="preview" onclick="ajaxmenuchange()" /><object data="Wolf_Lineart.php?furbase=333333" width="1124" height="990" type="image/svg+xml" id="wolfSVG"></object></body></html>svg to php file (Wolf_Lineart.php)<?phpecho "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n";$furbase=$_GET['furbase'];header("Content-type: image/svg+xml");print <<<END<svg ....... blah, blahsodipodi:nodetypes="csssssssssssssssssssssc" /> <path style="opacity:1;fill:#$furbase;fill-opacity:1;...... blah, blah, blah</svg>END;?>what happens is, the colour of the fur is entered, the preview button is pressed, this uses javascript to update(setattribute) the data value within the object element, which sends value of furbase colour to Wolf_Lineart.php, this now reads this value, and applies it to appropiate fill, and returns the updated svg image.small note: works fine in Firefox whereas IE through up a security error "need permission blah, blah" Link to comment Share on other sites More sharing options...
smartboyathome Posted November 15, 2009 Author Share Posted November 15, 2009 I managed to change the fur colour usingchangecolour.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function ajaxmenuchange(){var furcolor=document.getElementById('furcolor').value;document.getElementById("wolfSVG").setAttribute("data", "Wolf_Lineart.php?furbase="+furcolor);}/*--*//*]]>*/</script> <style type="text/css"></style></head><body><input type="text" id="furcolor" value="333333" /><input type="button" value="Preview" id="preview" onclick="ajaxmenuchange()" /><object data="Wolf_Lineart.php?furbase=333333" width="1124" height="990" type="image/svg+xml" id="wolfSVG"></object></body></html>svg to php file (Wolf_Lineart.php)<?phpecho "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n";$furbase=$_GET['furbase'];header("Content-type: image/svg+xml");print <<<END<svg ....... blah, blahsodipodi:nodetypes="csssssssssssssssssssssc" /> <path style="opacity:1;fill:#$furbase;fill-opacity:1;...... blah, blah, blah</svg>END;?>what happens is, the colour of the fur is entered, the preview button is pressed, this uses javascript to update(setattribute) the data value within the object element, which sends value of furbase colour to Wolf_Lineart.php, this now reads this value, and applies it to appropiate fill, and returns the updated svg image.small note: works fine in Firefox whereas IE through up a security error "need permission blah, blah"Yeah, sorry I forgot to say that I changed back to using SVG once I figured out what I did wrong in my Javascript when trying to modify the SVG. Sorry about that. :| Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2009 Share Posted November 15, 2009 for preview without page reload (note rough example)wolfcustomize.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function GetXmlHttpObject(){ var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support XMLHTTP!"); } return xmlhttp;}function TestPost(sendValues, url){ xmlhttp=GetXmlHttpObject(); xmlhttp.onreadystatechange= function() { if(xmlhttp.readyState == 4) { document.getElementById("response").innerHTML= xmlhttp.responseText; } }; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(sendValues);} function ajaxmenuchange(){x = document.getElementById("furcolor").value;TestPost('furbase='+x, 'colourchange.php');}/*--*//*]]>*/</script> <style type="text/css"></style></head><body></body><input type="text" id="furcolor" value="333333" /><input type="button" value="Preview" id="preview" onclick="ajaxmenuchange()" /><div id="response"><object data="Wolf_Lineart.php?furbase=333333" width="1124" height="990" type="image/svg+xml" id="wolfSVG"></object></div></body></html>colourchange.php<?phpecho '<object data="Wolf_Lineart.php?furbase='.$_REQUEST['furbase'].'" width="1124" height="990" type="image/svg+xml" id="wolfSVG"></object>';?>Wolf_Lineart.php<?phpheader('Content-Type: image/svg+xml');echo "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n";?><svg......id="eyeWhite2" sodipodi:nodetypes="csssssssssssssssssssssc" /> <path style="opacity:1;fill:#<?php echo $_REQUEST['furbase']; ?>;........</svg>this shows the grey wolf when first loaded, on changing the colour and pressing preview, it posts the furcolor value to colourchange.php, which is returned as responsetext replacing the original innerhtml content within <div id="response"></div>, and also sends(using get) the furcolor value to the SVG(PHP) file.Also: apparently not all IE support SVG anymore, adobe use to supply a plugin, but this no longer the case, as most browsers except IE (maybe not including IE8) come with svg rendering built in. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 16, 2009 Share Posted November 16, 2009 OK! after further investigation and testing, i've managed to get this to work in chrome, firefox, safari, opera, IE6 and IE7, not tested in IE8, but fingers crossed.IE (6 & 7) problems foundSVG requires the use of Adobe svg plugin to workAdobe plugin will not work if <object> is used, use <embed> instead.using innerHTML to take the xmlhttp.responseText; value will not work in IE, unless the div has been created using createElement, i kid you not.right! now we use these solutions, (luckily these IE fixes not including adobe plugin, but embed and createElement work for the other browsers).wolfcustomize.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function GetXmlHttpObject(){ var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Your browser does not support XMLHTTP!"); } return xmlhttp;}function TestPost(sendValues, url){ xmlhttp=GetXmlHttpObject(); xmlhttp.onreadystatechange= function() { if(xmlhttp.readyState == 4) { document.getElementById("response").innerHTML= xmlhttp.responseText; } }; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(sendValues);} function ajaxmenuchange(){x = document.getElementById("furcolor").value;TestPost('furbase='+x, 'changeWolfColors.php');}function initiate(){ni = document.getElementById("responseouter");var newdiv = document.createElement('div');newdiv.setAttribute('id','response');newdiv.innerHTML = '<embed src="Wolf_Lineart.php?furbase=333333" type="image/svg+xml" width="1124" height="990"></embed>';ni.appendChild(newdiv); }window.onload=initiate;/*--*//*]]>*/</script> <style type="text/css"></style></head><body><input type="text" id="furcolor" value="333333" /><input type="button" value="Preview" id="preview" onclick="ajaxmenuchange()" /><div id="responseouter"></div></body></html> changWolfColors.php<?phpecho '<embed src="Wolf_Lineart.php?furbase='.$_REQUEST['furbase'].'" type="image/svg+xml" width="1124" height="990"></embed>';?>Wolf_Lineart.phpsame as previous post. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.