flash file on an image in html - html

I am trying to place a flash file on an image at a specific location. how can i do this?
i tried something like this
<img src="images/logo.jpg"/> <object classid="homelogo"><embed src="images/logo.swf"></embed><object>
bit it did not work. how can i overlap a flash file on top on an image at a specific location?
Thanks.

One way of trying this,
div#logo {position:absolute; left:100px; top:300px; z-index:2; width:100px; height:100px; background-image: url('images/logo.jpg');}
Add your flash component to div.

Related

CSS Creating a non-rectangular header for a hybrid app page

I am in the process of designing the layout for the pages of a hybrid Cordova/Android app where I need to use a non-standard, not rectangular, header. The shape I wuold like to get is like the one shown below
I am trying to accomplish this with pure CSS3 and have got a fairly decent result thus far as shown below.
body,html{padding:0;margin:0}
.ust
{
height:4vh;
width:100vw;
position:relative;
background-color:orange;
display:block;
}
.oval
{
position:absolute;
height:12vh;
width:160vw;
top:1vh;
left:-30vw;
border-radius:100%;
background-color:orange;
display:block;
}
.timer
{
position:absolute;
height:10vh;
width:10vh;
border-radius:100%;
background-color:orange;
left:calc(50vw - 5vh);
top:9vh;
}
<div class='ust'>
<div class='oval'> </div>
<div class='timer'> </div>
</div>
My effort does not look quiet as nice as the version I am trying to copy principally because of the way the "timer" element meets the "oval" - in a sharp corner. The roundedness of the junction in the sample image is missing.
I have tried to work in the roundedness using the timer::before/after pseudo-elements and playing with their individual borders but try as I might I cannot get that concave junction effect.
I'd be most grateful to anyone who might be able to suggest a way to accomplish this.
A great way to do that is with a clip path. This is a great website that generates the CSS code you need of the path to create that unique shape:
https://bennettfeely.com/clippy

Why are my image hyperlinks not working?

I can't seem to figure out why my hyperlinks are not working. The images supposed to be the link to other html files. If you need more information please let me know: I have also uploaded the file here: http://emmasteed.co.uk/new/ is the large buttons at the bottom.
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
What folder are the docs located in? Your href tag indicates that it will look in the current directory for the document
For instance, if the document directory is one directory up, you would use the following syntax:
<a href="../profile/portfolio.html">
or you could use the absolute path:
<a href="http://example.com/somedirectory/profile/portfolio.html">
Make sure your are using the correct path in the a href tag. You are using:
aboutme.html
Which should mean that your file should be in the current directory.
Other than that, it seems to work fine here:
http://jsfiddle.net/LG2vz/
Here is a brief description of other file paths:
./ means the current directory
../ means the parent of the current directory, not the root directory
/ is the root directory
myfile.text is in the current directory, as is ./myfile.text
../myfile.text is one level above you and /myfile.text lives in your root directory.
EDIT
Child element cannot be stacked below parent element, even by using z-index.
Use z-index for maintaining stack level of absolute positioned elements that are siblings.
Change z-index in .mainimage. You need to add px after the -1
.mainimage {
width: 850px;
height: 423px;
background-color:#ffffff;
position:absolute;
top:220px;
float:left;
z-index:-1px;
}
Add z-index to .largemenubutton
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
z-index: 0;
float:left;
display:block;
text-align:center;
}
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.

pie.htc not fixing css3 issues

I have the PIE.HTC in the root directory and trying to make rounded corners work in Internet Explorer
This is my CSS
#credits-earned
{
border-style:solid;
border-width:2px;
border-color:#EDEDED;
width:170px;
height:60px;
margin-bottom:10px;
font-weight: bold;
border-radius:8px;
behavior: url (PIE.htc);
}
The HTML this is trying to take effect on is:
<div id="credits-earned">
You need to earn X<br> more credits today to avoid losing credits
</div>
However the rounded corners are not working in IE.
Any help be appreciated.
when including a resource in a external css file the URL is relative to the css file.
if you want to include something from a different directory you could use a relative path (example behavior:url('../PIE.htc')) or use a absolute path (example behavior:url('/PIE.htc'))
for more on path's in stylesheets - Using relative URL in CSS file, what location is it relative to?
Apart from the proper path for pie.htc to work, give:
#credits-earned
{ position: relative;
}

Overlay HTML5 canvas over image

I want to have an image which is uploaded from my database and on top of it the exact same size in the same position is a HTML5 canvas.
Most of the solutions I have found I have been using JQuery/JavaScript, however I want a similar solution if possible just using CSS3 as the images are being outputted from a database and there can be more than one image on the page and each image will have a canvas.
How can I achieve this?
Yes.
You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.
If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.
Here is a Fiddle of the CSS-only version:
http://jsfiddle.net/m1erickson/g3sTL/
The HTML:
<div class="outsideWrapper">
<div class="insideWrapper">
<img src="house-icon.jpg" class="coveredImage">
<canvas class="coveringCanvas"></canvas>
</div>
</div>
Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.
The CSS:
.outsideWrapper{
width:256px; height:256px;
margin:20px 60px;
border:1px solid blue;}
.insideWrapper{
width:100%; height:100%;
position:relative;}
.coveredImage{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
}
.coveringCanvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-color: rgba(255,0,0,.1);
}
Possible duplicate.
Depending on how many images are in the database, you could have a separate canvas id for each with the name of the image file (e.g. canvas #foo { background:url(foo.jpg) }). I would load this in a separate stylesheet. :)
It would probably be easier to maintain a Javascript solution though if your database is dynamic. A few lines of javascript would be sufficient, instead of constantly updating a stylesheet with new names. Less error typo prone as well.

Can't view embedded .jpg in html/php website

I have a php/html website on my home server that has several embedded .jpg images in the style.css file I can view the website fine from the computer that is running the server but when I try to access it from another computer on my network I can't see the images I get a red x inside of a little box.
Any ideas?
Thanks,
#wrapper {
width:400px;
height:600px;
background-color:#3CF;
margin:0 auto;
background-image:url(wrapper.jpg);
background-repeat:no-repeat;
}
#registerwrapper {
width:400px;
height:600px;
margin:0 auto;
background-image:url(register.jpg);
background-repeat:no-repeat;
}
try using an absolute path to the images. As it stands you're storing the images in the same location as you are storing your CSS