I have a star image.i want to change it's effect to glowing on onclick.I tried to change it color by using the code
onclick= "document.bgcolor="red"" inside the image src tag.But it dosen't work for me.Can anyone help guide me to some good tutorial or some sample codes
An easy solution would be to create another image that has the desired effect, ie the glow.
Add id="star" to your <img> tag then use javascript to swap the non-glowing image with the glowing image when it is clicked.
var image1 = document.getElementById('star');
var image2 = "http://link/to/new/image.png";
function changeImage() {
image1.setAttribute('src', image2);
}
image1.addEventListener("click", changeImage, false);
NOTE - change the value of image2 to match the path to the new image
Related
Can someone please advise how to do this:
I have a PNG image being used on a site for a client. The image has a transparent background and the content of the image is essentialy an outlined drawing. For this example lets say its a stick man drawing. Everything is transparent except the stickmans outlines.
What I want to be able to do is to add this image whether its as a background image or just as an image element. and to apply a CSS overlay that will ONLY colour the actual content or the "lines" in the image. In otherwords Stickman can have his colour changed from white, to blue, red, green etc via a css overlay that will not colour background.
I am aware I can do this in photoshop but I am trying to create a more dynamic solution for this. it is to allow for dynamic changing of the image
Expirement with this:
filter: hue-rotate(0deg);
You would change 0 to anything from 0 to 360.
This changes the hue as a rotation around the color wheel.
If the logo's background is always the same colour, you could cut out the logo leaving the logo transparent inside a coloured background.
CSS could then be used to change the logo colour, by changing the background-color of the image.
This only works if the logo background is always the same colour.
I see that u want to kinda color a specific part of a photo, right?.
(I had searched kinda lot about ur question)
anyway,HTML has a tag named to chose a specific part, but unfortunately it works with tag to make a part of an image clickable; roughly speaking, doing that cant be done with HTML and CSS only (as I think).
You can also use JS with The HTML code(you will cover your wanted area and color it).
function gg() {
var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image();
img.src = 'test.bmp'; // any pic u want
img.onload = function() { // after the pic is loaded
ctx.drawImage(this,0,0); // add the picture
ctx.beginPath(); // start the rectangle
ctx.moveTo(39,40);
ctx.lineTo(89,43);
ctx.lineTo(82,72);
ctx.lineTo(40,74);
ctx.lineTo(39,40);
ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; // set color
ctx.fill(); // apply color
};
}
<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>
<input type="button" onclick="gg()" value="h">
For HTML5 Image object, is there a way to know if it contains a drawable bitmap?
For example I use the following code:
var img = new Image();
Clearly the Image is not drawable at this point because no src is binded to it. Now if you call:
img.src = "www.blabla.."
Before the image is loaded, the Image is also not drawable, so my question is if there is a way to know if a Image object is drawable? BTW, without using onload function.
I am not sure if this question is clear. Thank you very much.
You could test img.src
if(img.src){
//drawable
}
You can also query the complete property of the image
http://www.w3schools.com/jsref/prop_img_complete.asp
I am currently attempting to make a button which is in the shape of a trapezoid.
I found a method of creating the shape which involved CSS making borders and such.
The CSS method worked in the way that it made the shape, but I ran into an issue where the whole element is contained in a rectangle, so when you click in the white spaces outside of the trapezoid it will still register as a click in the element.
In short, I am trying to make the HTML element to be the shape, of a trapezoid, not just the visible shape itself. Thus when a user clicks any area around the button that is outside the visible Trapezoid, but may be within the actual boundaries of a button rectangle, it should ignore the click. Thanks.
Edit:
It was asked that I show an example of what I mean.
http://jsfiddle.net/MichaelMitchell/aR72g/9/
In this link, there is the red trapezoid, but you can see the background color is also green, and when you were to click the green it still activates an onclick. In other word, I only want the red to be able to trigger the onclick.
You cannot have other clickable areas than rectangles in HTML if you are not willing to do the trickery involving map attribute and image (see docs), but even then your image will always wrapped in rectangle bounding box (so you can only pretend to have different shape by using images with transparency and said map).
You can work around this by giving it an onmousemove event that determines whether or not that coordinate is actually inside the trapezoid and adds/removes the onclick event accordingly. Something like this:
<figure id ="trapezoid" onmousemove="trapezoidMouseMove(event)">
<p>Button</p>
</figure>
<script>
function trapezoidClick(e)
{
//Whatever you need it to do
alert("inside");
}
function trapezoidMouseMove(e)
{
//Fill in the angle of your trapezoid
angle = Math.PI / 4;
insideLeft = e.offsetX > Math.tan(angle) * e.offsetY;
insideRight = e.offsetX < e.toElement.offsetWidth - Math.tan(angle) * e.offsetY;
if (insideLeft && insideRight)
{
e.toElement.style.cursor = "pointer";
e.toElement.onclick = trapezoidClick;
}else{
e.toElement.style.cursor = "default";
e.toElement.onclick = null;
}
}
</script>
I am using the canvas and HTML5. I have an icon in my canvas and a text and when I am trying to add shadow in my Text with this code:
ctx.shadowColor = textShadowColor;
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = 1;
the shadow goes also to my image. What could be the problem. As I see this shadowColor goes on the canvas and not really on the text. Should a have different canvas for the text and the image?
Thanks in advance
Are you drawing the text or image first?
If you're drawing the image first there should be no problem:
http://jsfiddle.net/NAanu/
If you're drawing the text first you need to clear the shadow so the picture doesn't get drawn with it also. Here's an example of drawing the text with a shadow first:
http://jsfiddle.net/NAanu/1/
I use save and restore to save and clear the shadow state from the context. You could just set them all to their default values instead, though.
When you set properties on the context you need to think of it like loading up a paintbrush with paint.
Setting any context property, like the shadowColor to red is like loading red paint onto the edge of your paintbrush. Anything you paint from then on will have red on it.
The only way to stop that is to clean your paintbrush (set the color and shadowOffset back to their defaults) or to use save() and restore(), which is saying "remember that my paintbrush was once clear, so later I can recall this clear paintbrush to use again".
What would be the most rational, cross-browser compatible way to create an element which has a shape of a circle? This element will be invisible, but clickable = it will be over a background which already has the image on it, so I just need to create an invisible, imaginary element to make the background circle clickable.
The element doesn't need to be <a> tag, as the click events will be bound using jquery only and don't need to send any href to the browser. Therefore a div will do. The question is: how to accomplish the rest?
EDIT
Actually, I need to change the url with each click, but not to refresh the page, but to have the url available for users to copy. Therefore if I can bind the div tag with jquery to change the url from base#home to base#contact, then all is OK.
EDIT2
I don't need the jquery code, I just need the html/css part to create the elements.
Ok I might be barking up the wrong tree here...
To find clicks inside a circle, you could use the mouse postion, and then find the distance from your circle's origin.
jQuery very helpfully provides position() which returns an object with two variables which show the x and y position, if you know how big your picture is then you can work out if the mouse click in inside the circle using Pythagoras' theorem.
Something like:
$(document).mousedown(function(e) {
//img_element is your image...
var img_pos = $("#img_element").position();
//these are the coordinates for the center of the circle
var centerX = img_pos.top + (img_width/2);
var centerY = img_pos.left + (img_height/2);
//this is the radius of your circle
var radius = 100;
if(Math.sqrt(Math.pow(e.clientX-centerX, 2) + Math.pow(e.clientY-centerY, 2)) < radius) {
//here we do the things when the click is inside the circle
console.log("yes");
}
});
Hope this helps you...
If you don't mind a simple href:
<img src="background.gif" usemap="#mymap" />
<map name="mymap">
<area shape="circle" coords="128,64,4" href="destination.htm">
</map>
Maybe this will give you a hint: http://bavotasan.com/2011/circular-images-with-css3/
Look into these CSS attributes:
border-radius
-webkit-border-radius
-moz-border-radius
Very easy, in your css stylesheet reference the image like so:
img {
border-radius: 50%;
}
this will cause the image to appear circular.