johnsmith153 Posted October 11, 2008 Share Posted October 11, 2008 I am not sure really where to start with this. Title explains, but it is not just by change the .gif that is showed using a javascript link or something. This is much bigger. Imagine a .png that simply has a circle on it - drawn however, vector etc. Based on the #RRGGBB colour value that is returned from the database, I would like the circle to show that colour. I have done something like this with Flash - but I dont really want to use Flash for this. I suppose a CSS div and setting the background, but I doubt you can get the shape I need. If it matters, the shape is actually a very basic football (soccer) shirt image, and the colour would represent the shirt colour. Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 11, 2008 Share Posted October 11, 2008 Can I see the image? Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 11, 2008 Author Share Posted October 11, 2008 Sorry about delay, messing around with trying to find where I can get some public space to give you the image. I can't upload a .eps here apparently, so I have put it here: http://rapidshare.com/files/152827746/268552_illustration.eps.html It is free to download once you get past all the crap. It's nothing special - just really an outline. But as you can see ideally the colour would just be inside the shirt. Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 11, 2008 Share Posted October 11, 2008 Uhh, what program is a .eps created in (so I can hopefully open it). Quote Link to comment Share on other sites More sharing options...
CroNiX Posted October 11, 2008 Share Posted October 11, 2008 Encapsulated PostScript Photoshop and higher end graphic apps can open it Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 11, 2008 Share Posted October 11, 2008 (made with) Adobe Illustrator Quote Link to comment Share on other sites More sharing options...
DarkWater Posted October 11, 2008 Share Posted October 11, 2008 Encapsulated PostScript Photoshop and higher end graphic apps can open it K, I have Photoshop. I'll have to check it out later because I don't feel like going to boot it up (it's obviously not on Linux). Quote Link to comment Share on other sites More sharing options...
CroNiX Posted October 11, 2008 Share Posted October 11, 2008 The best I can think of is to save that shirt image as png and make everything that is white in that pic transparent 100% so that all you have is the outline of the shirt. Then have a div with your specified color background and put the png on top of it. Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 11, 2008 Share Posted October 11, 2008 If this is going to be a for sale item (a t-shirt), you will probably have only certain available colors anyway... or more colors people would wear.. If it's not too many, save the images of the different color combos and swap out the images with javascript when they choose a color. Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 11, 2008 Author Share Posted October 11, 2008 xtropolis, No, this is no dodgy cheap t-shirt sale. This is part of an application where a user chooses from a range of colours - like on http://www.colorpicker.com/ - they choose any colour, and it appears as I mentioned. CroNiX, Am I right though that this would just be a square block of colour with the outline inside, as opposed to the outline with the colour inside? Although maybe the image could be a a square block on a coloured div, with juist the transparent "inside" the shirt outline transparent - is that what you meant? I'll give it a go. Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 11, 2008 Author Share Posted October 11, 2008 Set div background colour to selected colour. Use image I gave with solid white outside colour, and transparent inside the shirt outline. That is it - it works. Thanks CroNiX - either this is what you meant, or you certainly pointed me in the right direction. Quote Link to comment Share on other sites More sharing options...
CroNiX Posted October 11, 2008 Share Posted October 11, 2008 Either way...actually I just tested it. I was in AI and just saved for web and devices as a gif with transparency. It actually turned out really well I didn't even consider gif. Then I just put it in a div and set the background color to various colors. The gif turned out to be 4.5k in size and used 17 colors (16 + transparent). Quote Link to comment Share on other sites More sharing options...
CroNiX Posted October 11, 2008 Share Posted October 11, 2008 cool Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 11, 2008 Author Share Posted October 11, 2008 I've just put it all together and got a problem. I have set the div and image to the same size, yet I think it is the image that appends whitespace after and below, so my background colour creeps through and I have a line of colour bottom and right of the image. Did you manage to avoid this CroNiX? Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 11, 2008 Author Share Posted October 11, 2008 <div><img etc.> </div> creates the whitespace <div><img etc.></div> does not create the whitespace Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.