...
PDA

getting graphics put together

Repatilian
08-13-2011, 09:58 AM
Hi, i was wondering how i can get my graphics together. I want the top image to play the animation on the top center of the page then the bottom image to display over the top image and running infinitely because it's an animated gif. I also want it to resize to any monitor it's displayed on. Thank you. http://www.creationindex.com/
coothead
08-13-2011, 11:07 AM
Hi there Repatilian,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- this is for coothead testing and may be removed -->
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>

<style type="text/css">
body {
margin:2px;
background-color:#000;
}
#images {
position:relative;
}
#images img {
width:100%
}
#lineback {
position:absolute;
top:0;
left:0;
}
</style>

</head>
<body>

<div id="images">
<img src="logospintest.gif" alt="" >
<img id="lineback" src="lineback.gif" alt="">
</div>

</body>
</html>

coothead
Repatilian
08-14-2011, 01:40 AM
oh dude thank you so much. That's perfect you helped me out alot.
coothead
08-14-2011, 07:29 AM
No problem, you're very welcome. ;)
Repatilian
08-15-2011, 12:30 AM
coothead is there a way to pause an image from displaying while an animated gif runs?
vikram1vicky
08-15-2011, 08:48 AM
coothead is there a way to pause an image from displaying while an animated gif runs?


You can achieve this in photo animation, where you want , increase the frame time....
Repatilian
08-15-2011, 11:57 AM
well i was thinking i could just put a blank frame that pauses the graphics in the animation but i want it to loop continuiously. The pause really wouldn't be that long.
vikram1vicky
08-15-2011, 02:33 PM
Yes you can make animation as you want, set different duration for each frame.. and set the duration, othe frame to whom you want to pause, longer than other frame....

example for all frames you set 0.5 seconds but for the frame you want to pause, you can set it's limit 10sec.

:)
Repatilian
08-16-2011, 12:05 AM
isn't there a way to just pause the page from loading anymore. Like to put a tag in the html or add it to an img tag. Or in the css. I thought i read something about sleep. In a different thread of the same topic a guy suggested i use an onload event handler. But i don't know how to write that code or if it's html or javascript or css.
Repatilian
08-16-2011, 07:23 AM
here's what i tried to use for onload event handler.






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- this is for coothead testing and may be removed -->
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>
<script type="text/javascript">
function setTimeout(10000)

</script>

<style type="text/css">
body {
margin:2px;
background-color:#000;
}
#images {
position:relative;
}
#images img {
width:100%
}


#lineback {
position:absolute;
top:0;
left:0;
}

</style>


</head>
<body>

<div id="images">
<img src="logospintest.gif" alt="" onload="setTimeout()" >

<img id="lineback" src="lineback.gif" alt="">
</div>

</body>
</html>
vikram1vicky
08-16-2011, 09:07 AM
isn't there a way to just pause the page from loading anymore. Like to put a tag in the html or add it to an img tag. Or in the css. I thought i read something about sleep. In a different thread of the same topic a guy suggested i use an onload event handler. But i don't know how to write that code or if it's html or javascript or css.


Sorry, I dont have any idea about this.

However, If you use js for pausing your image, image loading can vary according to different Internet speed, like dialup, broadband, GPRS... in same cases, image can load in faster or in GPRS, it can take time..


So, I recommend you to use photoshop to create animations and set their timings as it will be constant with speed internet.

Let me know if there is any other method :)
coothead
08-16-2011, 10:44 AM
Hi there Repatilian,

try it like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<!-- this is for coothead testing and may be removed -->
<base href="http://www.creationindex.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Creation Index</title>

<script type="text/javascript">
function init(){

/* this value is 4 seconds, which is the time that logospintest.gif takes to run it's course */

var delay=4000;

/*********************************************************************************************/

setTimeout(
function(){
document.getElementById('lineback').className='';
},delay
);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>

<style type="text/css">
body {
margin:2px;
background-color:#000;
}
#images {
position:relative;
}
#images img {
width:100%
}
#lineback,#lineback1 {
position:absolute;
top:0;
left:0;
}
.hide {
display:none;
}
</style>

</head>
<body>

<div id="images">
<img src="logospintest.gif" alt="">
<img id="lineback" class="hide" src="lineback.gif" alt="">
<noscript>
<div>
<img id="lineback1" src="lineback.gif" alt="">
</div>
</noscript>
</div>

</body>
</html>

coothead
Repatilian
08-16-2011, 09:45 PM
thank you coothead you're the man. it works perfect.
coothead
08-16-2011, 10:22 PM
No problem, you're very welcome. ;)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum