Swap Image on Page Load?

**Iain** · 11-21-2005, 08:09 PM

Hi, I know it's possible but is there a script that allows me to change an image that is on the page automatically, with just having the page load?

Thanks in advance.

**jscheuer1** · 11-21-2005, 08:19 PM

HTML Code:

<body onload="imageName.src='new.jpg';">
<img name="imageName" src="old.jpg">

Notes: You can only have one body tag on a page. Add the onload event to your existing body tag. Replace imageName with a unique name for your image(s), use whatever image filenames you want in place of old and new .jpg. If swapping more than one image, add to the event, don't make new ones:

HTML Code:

<body onload="imageName1.src='new1.jpg';imageName2.src='new2.jpg';">

**Iain** · 11-21-2005, 08:22 PM

Ah, right thanks man. I knew it was something like that, just couldn't put my finger on it. You're great for this. Here's a um... Cookie

.

**Iain** · 11-22-2005, 07:47 PM

Hmm, is it possible to do this if the image doesn't have a name? Thanks for the help.

**Wedgy** · 11-22-2005, 08:42 PM

Is it possible to have it load a new image and then restore the old one?

**jscheuer1** · 11-22-2005, 10:22 PM

Originally Posted by Iain

Hmm, is it possible to do this if the image doesn't have a name? Thanks for the help.

If you know the order of the images on the page, yes:

HTML Code:

<body onload="document.images[0].src='2nd.jpg';">

That will swap out the 1st image on the page, onload. For each successive image, increase the number 0 by one, if there are images you don't want swapped, skip their numbers. Images on a page are numbered, for the sake of the document.images collection, 0 thru however many images there are minus 1. Here it is with two images being swapped and the basic img tags that could be used:

HTML Code:

<body onload="document.images[0].src='2nd.jpg';document.images[1].src='4th.jpg';">
<img src="1st.jpg"><br>
<img src="3rd.jpg">

Originally Posted by Wedgy

Is it possible to have it load a new image and then restore the old one?

Yes:

HTML Code:

<body onload="document.images[0].src='2nd.jpg';setTimeout('document.images[0].src=\'1st.jpg\'', 1000);">

That's if you know the old one. If not, use this:

HTML Code:

<body onload="holder=document.images[0].src;document.images[0].src='2nd.jpg';setTimeout('document.images[0].src=holder', 1000);">

For much more than this, or to do this with multiple images, a script would be a better method.

**KennyP** · 12-09-2009, 02:38 PM

Originally Posted by jscheuer1

HTML Code:

<body onload="imageName.src='new.jpg';">
<img name="imageName" src="old.jpg">

Notes: You can only have one body tag on a page. Add the onload event to your existing body tag. Replace imageName with a unique name for your image(s), use whatever image filenames you want in place of old and new .jpg. If swapping more than one image, add to the event, don't make new ones:

HTML Code:

<body onload="imageName1.src='new1.jpg';imageName2.src='new2.jpg';">

jscheuer1:

Thank you. I hope I may also be able to use a variation of your code. Is it possible to add a time factor to it in order
to control how soon after page load the image swap will take place? I actually want to use it to cover and then
reveal the page's menu during onload and 3-4 seconds after, by having an initial jpg image display over the menu for
those 3-4 seconds. Is it possible to do that and still have the menu work afterwards? Previously I was looking to use
the following in some way to make it work. But I'd also like for it to work for those with javascript disabled:

Code:

<script language='javascript'>
    function changeimg()
    {
        document.images.imgchanger.width = '0';
        document.images.imgchanger.height = '0';
    }
</script>

<body onload='changeimg()'>

<img src='myimage.jpg' border='0' width='x' height='y' name='imgchanger'>

<form method='post'>
</form>

</body>

Thanks,

Kenny

**jscheuer1** · 12-09-2009, 04:48 PM

Your code doesn't make ultimate sense to me. But I do see what it would most likely do (make the image disappear), just not why and why not use the image's display style property for this. The x and y as width and height attributes of the hard coded image tag are meaningless and invalid. The script tag is invalid for any modern DTD. But the invalid items would probably be error corrected in most browsers.

Anyways, if you want to delay the onset of this there are options, the most straightforward would probably be:

Code:

<body onload='setTimeout(changeimg, 4000);'>

The 4000 is the number of milliseconds delay after page load (so it would be added to the delay, if any, involved in loading the page). 1000 milliseconds = 1 second.

**KennyP** · 12-09-2009, 10:24 PM

Thanks for your reply John. I was able to achieve part of the effect I'm looking for with the following code, by hiding the contents
beneath for 5 seconds. However, is it possible to make the same thing happen on page exit? That is, to hide mydiv on page exit?

This is the issue I'm trying to solve. I'd like to use fancy page transitions, but the page menu, which is made up of translucent png
images, is displaying gray during the transition from one page into the other. What I'm trying to do is prevent the actual menu from
displaying during the transition, and I'd like to display a mockup image of the menu as a background jpg image during the transition.

I hope it can be done.

Code:

<html>
<head>
<SCRIPT type="text/javascript">
function delay() {
	document.getElementById("mydiv").style.visibility="visible";
}
</SCRIPT>
</head>
 
<body onLoad="setTimeout('delay()',5000);">
 
<div>
<!-- my div contents -->
</div>
 
<div style="visibility:hidden" id="mydiv">
<!-- contents I want to delay showing -->
</div>
 
</body>
</html>

**jscheuer1** · 12-10-2009, 07:12 AM

That would depend upon what sort of transition you are using. I'm inclined to assume you mean something like (from http://www.aim-higher.net/meta-transitions.asp) -

Page Exit-Box In (2 sec.):

HTML Code:

<meta http-equiv="Page-Exit" content="revealTrans Duration=2.0,Transition=0)">

With that, it may be impossible. Besides, it would only work in IE. These transitions also have a nasty habit of messing with .jpg images, sometimes producing white spots on them during the transition. And visitors often find them annoying because they slow down page changes.

That said, if you restrict yourself to the "Page-Enter" transitions, the effect is very similar overall - leaving one page always includes entering another, but you need not worry about capturing the onunload event and how that may or may not dovetail with the transition.

But I'm getting ahead of myself. Are these the sort of transitions you are using?

Thread: Swap Image on Page Load?

Thread Tools

Search Thread

Swap Image on Page Load?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions