Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I make a logo come up for a second then a photo???

Status
Not open for further replies.
prophotodx

prophotodx

Technical User
Jan 20, 2003
147
I am trying to make a page that displays a logo for .75 seconds and then a photo come up and stay on the page. I want the photo to cover up the logo...any ideas?

I would like to make it as easy as possible
 
Sort by date Sort by votes
The simplest thing to do would be creating an non-repetitive animated gif. If you don't know how to do this, just let me know.
 
Upvote 0 Downvote
I need to do this for alot of images, and I wanted to make it easy instead of being in photoshop forever....

thanx...any other ideas?
 
Upvote 0 Downvote
Would the following help... how many images are "alot"?

Code: 
<script language=&quot;JavaScript&quot;>
<!--
ids=new Array(&quot;img01&quot;,&quot;img02&quot;,&quot;img03&quot;);
urls=new Array(&quot;photo01.jpg&quot;, &quot;photo02.jpg&quot;, &quot;photo03.jpg&quot;);

function swapPhoto() {
	for (x=0;x<ids.length;x++){
		var obj=document.getElementsById(ids[x]);
		obj.src=urls[x];
	}
}
//-->
</script>

...onload=&quot;setTimeout('swapPhoto()', 750);&quot;...

<img src=&quot;logo01.gif&quot; id=&quot;img01&quot;> ...
<img src=&quot;logo02.gif&quot; id=&quot;img02&quot;> ...
<img src=&quot;logo03.gif&quot; id=&quot;img03&quot;> ...

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote

This will work:

Code: 
<HTML>
<HEAD>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

	function replaceLogo()
	{
		document.getElementById('pageLogo').src = 'photo.jpg';
	}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad=&quot;setTimeout('replaceLogo();', 750);&quot;>

<IMG SRC=&quot;logo.gif&quot; ID=&quot;pageLogo&quot;>

</BODY>
</HTML>

Once the page has loaded, the timer is set for 750 milliseconds (0.75 seconds), and after that expires, the image is replaced.

Hope this helps!

Dan
 
Upvote 0 Downvote
Dan - I prefer my function name &quot;swapPhoto()&quot; to your &quot;replaceLogo()&quot;. Nice code though. [thumbsup2]

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
OK, here is what I have so far

<div align=&quot;center&quot;>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

function replaceLogo()
{
document.getElementById('pageLogo').src = 'file:///C|/DoubleXpressions/server/photos/events/white_103.jpg';
}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad=&quot;setTimeout('replaceLogo();', 750);&quot;>

<IMG SRC=&quot;file:///C|/DoubleXpressions/server/photos/newlogopage.jpg&quot; width=&quot;365&quot; height=&quot;550&quot; ID=&quot;pageLogo&quot;>
</body>


Now I need to figure out how to make the image 365wx550h and the logo 636wx127h

As you can see I have them set to the same size but the logo is a little smaller than I like, and I don't want the photo to be any larger or out of proportion...THANX
 
Upvote 0 Downvote
Try:

Code: 
<html>
<head>
<title>Image test</title>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function replaceLogo() {
    var theImg = document.getElementById('pageLogo');
    theImg.src = 'file:///C|/DoubleXpressions/server/photos/events/white_103.jpg';
    theImg.width=&quot;636&quot;;
    theImg.height=&quot;127&quot;;
}
//-->
</script>
</head>
<body onLoad=&quot;setTimeout('replaceLogo();', 750);&quot;>
<img border=1 src=&quot;file:///C|/DoubleXpressions/server/photos/newlogopage.jpg&quot; width=&quot;365&quot; height=&quot;550&quot; id=&quot;pageLogo&quot;>
</body>
</html>

Hope this helps.

Pete.


Lotus Notes Web Developer / Aptrix (LWWCM) Consultant
w: e: Pete.Raleigh(at)lclimited.co.uk
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
744
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
215
Alt255
Alt255
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
747
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top