PDA

View Full Version : Before "Appear" starts picture can be seen


Kraut55
11-06-2008, 01:49 PM
http://wereofftobvi.com

My daughter would like the website for her wedding to start with a photo of the island that fades in. I used the Behavior "Appear" "OnLoad". However before the fadein starts the picture can be seen for a split second (preloading?). What should I do to prevent that?
Thank you.

Kraut55

Corrosive
11-06-2008, 04:46 PM
http://wereofftobvi.com

My daughter would like the website for her wedding to start with a photo of the island that fades in. I used the Behavior "Appear" "OnLoad". However before the fadein starts the picture can be seen for a split second (preloading?). What should I do to prevent that?
Thank you.

Kraut55

You might want to look at using a more sophisticated javascript framework. Try http://www.jquery.com

Kraut55
11-06-2008, 06:52 PM
As you can see from the problems I am having I am fairly new to (website programming with) Dreamweaver. Trying something completely new might result in the website being ready after the wedding in April :-D

Corrosive
11-06-2008, 07:14 PM
As you can see from the problems I am having I am fairly new to (website programming with) Dreamweaver. Trying something completely new might result in the website being ready after the wedding in April :-D

Fair comment. Not sure how to fix your problem though, sorry. Nice spot for a wedding btw.

coloeagle
11-07-2008, 04:01 PM
OK, I have to plead ignorant to the dw spry stuff.

I think what you are wanting is a flash type of image fade in. This can be accomplished with JavaScript but doeas require some peculiarities to work cross browser.

Understanding the daughter wedding and time frame issue I have taken the liberty to rewrite the page for you. Something I normally don't do as it tends to take away from the learning aspect.
Hope this helps.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BVI Home Page</title>
<script type="text/javascript">
<!--
document.write("<style type='text/css'>#entryphoto {visibility:hidden;}</style>");
function initImage() {
imageId = 'entryphoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
#photodiv {
text-align:center;
margin:0 auto;
width:720px;
height:559px;
background-color:#fff;
}
#photodiv img {border:0;}
#entryphoto {
width:720px;
height:559px;
}
</style>
</head>
<body>
<div id="photodiv">
<p>
<a href="accomodations.html"><img src="Images/vg3.jpg" alt="" id="entryphoto" /></a>
</p>
</div>
</body>
</html>

Kraut55
11-07-2008, 05:30 PM
@coloeagle

Wow! Thank you very much. That was so nice of you. You are right about the learning effect but at least this solved my problem.
Have a nice one.

Kraut55

PS: I just called my daughter (I live in Germany as my alias indicates) and she says thank you, too.