My question is related to HTML, and PURE html. I am working on a new design for my front page on a social network called kwick, and I want to create a kind of space for my favorite Video at the moment.
Now my problem is, how do I realize something like this:
I take a picture of my ipod like that(just an example, its not my ipod)
http://www.clein-online.de/schmuck_projekte/files/ipod_nano_schutzhuelle.jpg
Now I want to create this picture as gif and cut out the display, now behind that cutten out area, there should be a youtube video be shown, in a way that the embed player is NOT shown completely, i mean, the player is there completely, but the picture is a lay in on it.
How to do this?
You don't need to cut the image at all. Make a div that has enough space for the whole picture of the ipod and use CSS to make it the background image (can be inline styles if you can't add your own CSS files).
<div style="background:url(ipod.jpg); width:300px; height:400px;">
<iframe src="..." style="margin: 25px auto 0;" width: 250px; height: 200px;></iframe>
</div>
Apply margin, width and height to your iframe or embed or object to position it within the div that has the ipod background image.
You can set the iframe to the size you need and make it hide any overflow if necessary but I don't think you're going to be able to hide parts of the flash if you don't have control of the embed code.
Your biggest hurdle will be ensuring that your WMODE = transparent. Setting WMODE to transparent will keep your flash crap from always appearing on top of other content. Then, simply position an image with transparency in the correct place over the video.
Since you haven't included any information on how precisely you're including your flash file, I can't really tell you what method you'll need to use to set the WMODE. Just do some googling, and all will be clear.
Related
I'm getting an image from a url from a Java service. The image size is too big.
How can I decrease it's size using inline css?
Image contains lots of white border from top and bottom. I need to remove that too.
Please remember, that StackOverflow is not made for doing your work. Please try it the next time yourself and google the stuff you want before consulting SO.
Here the first two links if you google css3 cut image, both do more or less the same you want:
CSS Display an Image Resized and Cropped
How to “crop” a rectangular image into a square with CSS?
Anyways, here is a possible solution for you with inline-css:
Place the <img>-Tag with your image in a <div>, which defines the size of the "window", trough which we look at the image (which size remains actually the same).
Here a simple exapmle:
<div style="height:100px; width:150px; overflow:hidden;">
<img src="path/to/your/image" />
</div>
We are using overflow: hidden; here, which says that everything in this box, which is bigger than the box itself, will not being displayed. To adjust the image (because of your white borders), add i.e. style="margin-left: 10px"; to the <img>-Tag. You can also use negative values there.
I'm currently stuck on a problem I can't fix on my own.
I've cut a image into different layers I want to overlay on a website. Basically you can enable and disable various layers.
An example would be this:
Image of a tree without leaves
Actual leaves of the tree
Now there is a checkbox and when you click on it it'll either enable or disable the leaves.
Now I have some options to position those elements via css:
Make all images the same size and fill smaller ones with transparency. Something like this: http://i.imgur.com/GRd4eaI.png
Crop those large images into smaller ones. Here I don't know how to position them via css properly so they'll resize with the other pictures.
Create a canvas and draw the image onto it, then display that canvas.
I've currently implemented this and it works like I want. Problem though is that it'll lag when using the phone (Only renders part of the image till it finally finish after ~20 seconds to display the image properly)
I guess that would be the proper way to go but my problem here is that I don't know how to set the size of the overlaying smaller images.
Html Code:
<div class="container">
<img style="top:0%; left:0%;" src="img.png" />
<img style="top:69.56%; left:26.16%;" src="smallImage.png" />
<img src="images/null.png" id="last">
</div>
And the css code to that:
#container {
position: relative;
}
#container img:not(#last) {
position: absolute;
width: 100%;
height: 100%;
}
The null image is just there that overlaying other images work with that method.
The problem I have here is now that the smaller image will be positioned correctly but it wont shrink down to the proper size inside the div: http://i.imgur.com/4EgGIAl.png
I don't think that this would be the proper way, or easy way to do it. But I guess I'll use this then when I need to.
Also I think it's good to say that I'm working with image maps and areas. So perhaps that'll make it a bit more difficult to use then.
It would be very great if you could help me here, thanks :)
I need to start watermarking my images as I'm starting to notice people are using them. I really don't like having watermarks all over an image. I prefer the way 9gag does this : https://9gag.com/gag/352822
There isn't any visible watermark, however when you right click and save the image you can see the watermark. How is this done?
The whole point of a watermark is to prevent removal of attribution and/or display copyright/ownership information (http://en.wikipedia.org/wiki/Digital_watermarking)
What 9Gag does is so easy to subvert it's trivial. All I need to do is crop the image and remove the bottom part and voila, the image is "watermark" free (It's not really a watermark, referring to it as such to be inline with the OP's definition).
For a watermark to perform it's function, it needs to be overlayed on the image so as to prevent it's removal without damaging the image itself. What you are asking for is not watermarking at all.
Example of a watermarked image: http://s.we.lc/UNGZeT
CSS
div {margin: 25px 0 0;}
div:first-child {height: 150px; overflow: hidden; margin: 0;}
Check this out: http://jsfiddle.net/J9y4G/
The example you provided has extra space at the bottom of the image file (the actual .jpg), which contains the site's URL. When the image is displayed on the page, it's container is shrunk so that the extra part of the URL isn't actually shown.
To replicate this, you would need to edit each of your images to add the extra info, and then re-style your images to display in a slightly smaller box.
Hello I'm trying to make a very simple website consisting of a background image and a floating youtube video. My problem is that I need the youtube video to be on a specific place and resize to fill that determined space regardless of resolution or browser window.
The video needs to go in the dark area middle left; I'm not too sure what to do I haven't coded in a while. I've got the background to resize adequetly but other than that. I've tried to follow these guides.
http://css-tricks.com/fluid-width-youtube-videos/
I would appreciate any help. You can find the image here
http://i.stack.imgur.com/rkYos.jpg
Put the iframe into a div and position it absolute where you want
http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
make sure you set the z-index to a higher positive value to make it stay "on top"
See also https://stackoverflow.com/search?q=absolute+position+div
I am building a system to create a "fake video embed" with thumbnails and play buttons over them. The images are coming from a service at a standard size, so have no choice but to resize them in HTML. Another restriction is, the codeblock has to be self-contained (like an embed code) and not reliant on any external stylesheets. I'm overlaying a play button as a transparent PNG. My first solution was to set a negative margin on the overlay image with inline css like so:
<div style="width:340px;height:280px;">
<img src="thumbnail.jpg" width="340" height="280"/>
<div style="margin-top:-280px;"><a href="link-to.video.html">
<img src="transparent-embed-overlay.png"
border="0"></a></div></div>
But in the XML feed for the blog, the transparent play button would "fall off" the "embeds" because it wouldn't recognize the inline style. This forced me into having to write a one-cell table with the image as a background image. But then it was impossible for me to resize the standard image thumbnail I am given, shoehorning me into the default thumbnail size.
FWIW, here's the code I'm resorting to using:
<table width="320" height="240" background="thumbnail.jpg">
<tr><td><a href="link-to-video.html">
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table>
Could you send a link to an example?
From what I understand you are dynamically altering the background tag, but you can not resize a background image without using CSS 3, so compatibility is compromised.
CSS Background property can contain a color, url, positions x, y and repetition.
ie.
background: white url("mypic.jpg") 0 0 no-repeat;
Quirksmode CSS 3 Backgrounds
How come you cannot use an img tag inside the table which you dynamically alter its source to the new image and set the height and width to whatever?
Or if your problem is with the user dragging the images you could simply use a div rather than an image, set its height and width, and place it over the images.