I'm really new to HTML and I'm trying to make a small website for my art.
I was wondering if it's possible to have my background choose randomly from a set of GIFs for each tile and after one loop to randomly select another GIF. I'm specifically trying to have a unique GIF for each tile and wasn't sure how to even go about doing this since I only know how to make one GIF repeat across the entire background.
In case what I'm asking doesn't make sense, I'm attempting to have the background of my website look like the floor of an arcade. I didn't want to be the same few squiggles and shapes in a repeated pattern and thought it would be cool if instead each one changed into a separate squiggle/shape after a few seconds.
Thank you if you can help and sorry if this sounds at all silly or anything.
I tried looking into this elsewhere and just couldn't find anything I understood, so I thought to ask here.
Related
I have been researching and studying various HTML code with similar questions but wanted to try something a little different: (And please forgive me for my silly sounding questions here. I am still quite new with this kinds of things so still experimenting with a lot)
1) I want to know if it's possible to write code in HTML that will allow the display of an image at a certain time. Like let's say for example, the image will only appear at midnight local time from wherever someone is searching.
2) If this is possible, how to I first display one image on a website and then at a specified time have that image replaced by a different image and then after let's say one minute everything will revert back to the original image on the website?
3) How do I "store" the image I want to have displayed at a certain time of the day? I mean, how do I program in HTML to show that new image but obviously not make it possible to be known in the source code?
4) Last, is it possible to prevent proxy servers from being used or other means that could potentially manipulate the time.
Thank you much!
So... I have to make a working prototype of a website to customize your own cupcake. I really don't know how to make it. I got an image in my head of what I want, but I absolutely don't know how to get it to work.
So, my question is: Is it possible to have multiple image sliders overlap filled with png images so if you click the thumbnails you can build up an image consisting of changeable parts?
I already found some basic image sliders that I would like to use. The thumbnails for the sliders will be hidden in the various menus. Every menu stands for a changeable part of the cupcake, so the thing I want to create with all of the sliders is a personal cupcake.
I made the png files myself so I really hope this idea is possible, because I need this working thing for school and otherwise I really don't know what to do to make it work :X.
I have to change the color of the particular part of an image dynamically without affecting the image design. Any idea how to do this?
I want to change the color like this
http://www.bmw.com/com/en/newvehicles/3series/sedan/2008/visualizer.html
Thanks in advance.
In example you provided there is no color manipulation on the picture. Every time you change the color — new .swf asset with car loaded into the app(example). in my opinion that's the easiest way to solve problem like this.
On other hand, if you really want to manipulate color channels of particular image, the ColorMatrix Class by Quasimondo is in my opinion the best tool to do this. The tricky(hardest, maybe in some cases impossible) part here will be to select particular part of the picture were you need to convert colors.
Update
the idea is that, you load your app, withh .swf asset only for the default color, and when user choose any other color you simply download additional .swf asset.
As for the second approach with color manipulation, I'm thinking, if you need this only for already predefined pictures, that you can cut out part of your picture which you want to manipulate, and convert it to .png with transparent background, and put it on top of your original picture. So you will have something that looks like original pic, but in reality it's to separated layers: one is your unchangeable part of the image, and other is the part that you want to manipulate. Here is the example with unicorns(because everybody love unicorns):
Now you can use ColorMatrix to manipulate color channels of unicorn, and all other parts of your picture will be unchangeable.
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
My questions:
Is this a good idea?
If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images?
Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
Why?
Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
You can add other UI or layout images to your sprite
Optimize the resulting PNG:
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
When not to use sprites:
When part of the images in the sprite change frequently
In this specific case: when the majority of users would need less than the (about) 10% of the images
I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.
Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.