onclick png background color change - javascript

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

Related

Dynamic change of image of an element in a webpage

I'm not completely sure if this is the appropriate place to ask this. If it's not, please pardon me and point me to the place where I should ask it.
Take a look at this page: lichess
What I'd like to do is:
Depending on which colour I play with (white/black), I'd like like only my (white/black respectively) king's image to be changed. So if I'm playing as White, only white king should be affected by this change. Same analogy for when I'm Black. This change would obviously only be seen by myself.
How is this achievable and in what way exactly?
P.S. the website's github (if that helps): github.com/ornicar/lila
I'll give sort of an outline, and some code. This can be achieved based on what color the user picks. If you have this stored in a variable (ie. Javascript var color = white;), it can really help. First, make sure your image's src empty, when you hard code it. Then, after the user picks his color, you can change the image. Example below.
<img src="" alt="player" />
<script>
function initImage(color) {
var imgsrc = document.getElementById("imgplayer").src = color + ".jpg/.png/etc.";
}
</script>

Dynamically edit .svg file that's set as background image

I added an svg image to the background of a div.
div#cover{
background-image:url('dwm.svg');
}
I would like to know if there is any way I could dynamically edit certain aspects of this svg such as fill, stroke , etc.
You can try having the svg as part of the DOM, do the modification and then set the background as a data uri of the modified svg pulled from the DOM.
While this might be kind of hacky it works
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
$('button').click(function(){
$('#fill').attr('fill', '#ff00ff');
$('#bg').css('background-image', 'url(data:image/svg+xml;base64,'+btoa($('#svg').html())+')');
});
<div id="bg"></div>
<div id="svg">[svg data]</div>
http://jsfiddle.net/zSRW5/
If you don't want to embed the svg you can always use ajax to get it.
No. I believe you can only do that if you embed the SVG within the page and reference it and even then, you would have to change the background value to something else and back to the reference, due to browser bugs.

Make my own custom timeline for a website

I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!
Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.
I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.

CSS Sprites with jquery

I would like to control a css sprite with javascript/jquery. Based on a user input the image should move position.
The case: I have an image container with 400x400, but the image I want to show is 400x1200, so I can only display 400 in height at the time, but the width would be constant.
I would to like to display parts of the image when a user clicks a button. I have drawn an example to show what I want: http://0o2471.net/55070
In that mockup you have the image container which is 400x400 marked with black frame, the green background is the "image" that I want to display based on the user input. So let's say the user press the "Button bottom" then the bottom part would change its position to the center(image container.)
Any suggestions on how I do this? Which functions in jquery/javascript should I use? Is css sprites the best way? I don't need the whole code, just a few directions.
Use background-position CSS rule. JQuery code for this
$(element).css({'background-position' : '0 -100px'})

How do I create a progress "bar" similar to Grooveshark?

I'm curious... how would I go about creating a custom progress bar like the one Grooveshark used to have? If you look at the image below, the progress bar is an image in the shape of a shark and fills in as the page loads.
I think this is very cool and would love to know how it is done. Can this be done programmatically, or is it done in flash? I would really like to do this in JavaScript (jQuery) if it is possible. Where/How do I start?
Thanks,
Hristo
The portion of the image containing the shark could be a PNG with the shark shape cut out. Placing an element just beneath this (via z-index), and animating the width of it it will give the impression of the shark filling in.
I managed to accomplish something similar using nothing more than an image, and animating its background image: http://jsbin.com/imibe3
HTML
<img src="http://sampsonresume.com/labs/emptyfish.png" class="fish" />
CSS
img.fish {
background-color:#f1f1f1;
background-image:url(water_640x480.jpg);
background-position:-580px 0;
background-repeat:no-repeat;
}
jQuery/Javascript
$("img.fish").animate( { 'backgroundPosition':'+=600px 0' }, 10000);​

Categories