Is it possible to show any part of image in img tag (with pixels) via JavaScript?
I would have a prepared big image (e.g. 32x320 pixels) and defined starting position (X,Y , e.g. 0,32) and width/height (e.g. 32,32), and would want the script to show second (32x32 pixel) part of main image.
You could use CSS properties for this and change them via JS. Set the image as a background for an element with your desired size and adjust its position with background-position so that the correct part of it is visible. Some people call it CSS sprites.
For the sake of giving you multiple options, you could always use an HTML5 canvas and redraw the image as necessary. You can find a nice tutorial about how to do this here : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
The CSS sprite method would be preferable nonetheless as IE doesn't support canvas yet.
Related
The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.
I'm intending to write a HTML5/Javascript game to run in modern browsers. It will need dialog boxes (i.e. modal popups) whose borders would be made of images (e.g. one for the vertical, one for the horizontal, one for each corner). The popups, and therefore border, should contain and size to a div (containing text or whatever). There will be lots of different size popups. So I can provide (repeatable?) images from which the borders should be made, but I don't want to create an image for every size of popup that I need in my game.
I hope that my requirements are clear enough. Can I do this with just CSS? Are there some sample CSS 'libraries' to do this? Or do I need to use Javascript (or a combination of CSS and Javascript) and, again, if so there any example or libraries I can use?
You can do this pure css by assigning each type of element (left border, lower left corner) etc a class and then setting the background image and width/height of the css for that class to the image and dimensions you require.
I use jcrop to provide users with a friendly way of uploading their images via ajax. Obviously these images have some constraint like width and height which is where jcrop comes into play. So for the sake of brevity what im doing is as follows:
input file select via javascript file api loads the image into a img tag. Jcrop works with this image tag and renders the result onto a html canvas.
Now this is the dodgy part. The canvas image is always blurry...
for arguments sake the canvas is set to 400x200 which is the crop size.
If the canvas width and height is set via CSS it results in a blurry image result. TO get around this I had to set the width and height via html attributes. Now I have a wonderful cropping solution that can save images via AJAX. Crisp and Clear:)
<canvas id="preview" width="400" height="200"></canvas>
According to HTML Standard, if width or height attribute is missing, then the default value must be used instead, which is 300 for width and 150 for height. And these two attributes will determine the canvas's width and height, while the css properties merely determine the size of the box in which it will be shown.
The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
The intrinsic dimensions of the canvas element when it represents embedded content are equal to the dimensions of the element's bitmap.
The user agent must use a square pixel density consisting of one pixel of image data per coordinate space unit for the bitmaps of a canvas and its rendering contexts.
A canvas element can be sized arbitrarily by a style sheet, its bitmap is then subject to the 'object-fit' CSS property.
You can refer to the following post for more details:
Canvas is stretched when using CSS but normal with "width" / "height" properties
This is really just an extension of the answer above. I too encountered the problem of CANVAS images resized using Javascript/CSS becoming fuzzy and blurry, because my application first used HTML to create a few DIVs, one of which held a CANVAS control, then the ONLOAD event called a Javascript routine to get the screen size, optimise the sizes and positions of all the DIVs and the CANVAS accordingly, and finally draw on the CANVAS. I did it that way as I wanted the CANVAS to always be as big possible for whatever device it was viewed on.
My solution is to use Javascript to dynamically draw the CANVAS control too, i.e. for the DIV that contains the CANVAS simply include...
var CanvasWidth=screen.availWidth-30;
var CanvasHeight=screen.availHeight-190;
//The 30 and 90 above are arbitrary figures to allow for other DIVS on the page
var o=window.document.getElementById("IdOfDivContainingCanvas");
o.innerHTML="<canvas id='myCanvas' width='"+CanvasWidth+"' height='+CanvasHeight+'></canvas>";
...so that the size of the CANVAS is effectively dynamic; Created with it's size specified using HTML attributes, just before executing the Javascript statements that actually draw on the CANVAS.
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I have added image map on my map based web page.
Since it is supposed to work on different resolutions, hot-spots defined in the image map have to be dynamically changed when browser viewport size changes.
ex: when I initially place a hot-spot in India and change the browser size it should still
placed on India not in somewhere else.
I saw that there is a property called "coords" containing 3 parameters.
Does these properties dynamically change when it changes the browser viweport size?
Or can I make them dynamically changing?
Or going to javascript is recommended?
(As far as I tested they are fixed to absolute locations.)
I did some research on imagemaps and found that;
They do not dynamically change their position when it changes the browser viewport size
I didn't tried to change'em dynamically. Hopefully you may able to do it with javascript
javascript was the solution for my problem
with the use of javascript ;
Browser viewport width and height can be taken
And relative to that width or height you can position the elements
imagemaps in dreamviewer is not a solution for this matter