I have an animated Gif that I created. What I would like to do is place the gif on top of a JPEG in Dreamweaver so I get my code to display it on my site. However I can’t seem to drag the animated GIf on to the JPeg with Dreamwever is there a code that I can use without using Dreamweaver
You want the .gif to actually display on top of a jpg? Please explain what you are trying to accomplish by doing this.
Are you just wanting to display the .gif on your site and I am misunderstanding? If so, then all you need to do is add this:
<img src="animated.gif" width="?" height="?" alt="An animated image of a...?" />
Make sure to change the path to the image to match your file and also the width, height and the alt attributes needs more info.
If I have completely misunderstood post again.
I want to create something like this
http://www.nyxxunderground.com/SEPTAGONBETA/site/imagetest.html
Having the animated gif sititing on top of a JPEG. This was created using a drag and drop program however I’m not able to to use their codes on my current website template.
Hello
All that is being done in the example you gave is they have positioned one div relatively and then another absolutely. I cannot really speak as to how to do it with DW as I do not use it but it can be coded by hand pretty easily.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Stacked Div Example</title>
<style type="text/css">
#div_jpg {
width: 200px; /* -- the width and height should match the image size --- */
height: 200px;
background: #ccc; /* -- this could have the image added to it or it can go in the HTML itself --- */
position:relative;
}
#div_gif {
width: 100px; /* -- the width and height should match the image size --- */
height: 100px;
background: #ff0000; /* -- this could have the image added to it or it can go in the HTML itself --- */
position:absolute;
top:50px; /* -- set the top and left to where you want it to appear --- */
left: 50px;
}
</style>
</head>
<body>
<div id="div_jpg">
<div id="div_gif"></div>
</div>
</body>
</html>
http://benpartch.com/forum-examples/sp/stack_div_example.html
Thanks great stuff. Where would I place my image source now.
You can either place them in the .css in the background property:
#div_jpg {
width: 200px; /* -- the width and height should match the image size --- */
height: 200px;
background: url(image.jpg) center center no-repeat;
position:relative;
}
#div_gif {
width: 100px; /* -- the width and height should match the image size --- */
height: 100px;
background: url(image.gif) center center no-repeat;
position:absolute;
top:50px; /* -- set the top and left to where you want it to appear --- */
left: 50px;
}
or you can add them to the .html:
<div id="div_jpg">
<img src="image.jpg" width="200" height="200" alt="An image of a..." />
<div id="div_gif">
<img src="image.gif" width="100" height="100" alt="An animated image of..." />
</div>
</div>
Hope it helps.
This set of code will give me this result correct
http://www.nyxxunderground.com/SEPTAGONBETA/site/imagetest.html