Forum Moderators: open
But what's got my noodle in a bind is I'm trying to figure out how the follow web page's front page main image changes automatically every few minutes. Of course you have to hit refresh, but then it's a new picture. They only swap between 2 pics and then back 2 the first. Seems easy, but the only thing in the HTML code is an IMG tag to the source for the Image file.
Also, check out their menu below the picture. I understand image preloading that's going on with the fp.js file from the Javascript, simple stuff. I understad the junk in the fp.css file to that's in the root. But how the heck do you actually make that menu from scratch? I've never tried to do that before. I just make them in flash, but man does that take up ton of space.
Thanks for your help, here's the link.
<snip>
[edited by: BlobFisk at 10:21 am (utc) on Feb. 10, 2005]
<img src="whatever.jpg" name=mainpic">
....
setTimeout(swapPic(),5000);
....
function swapPic() {
.....
document.mainpic.src=nextPic;
.....
}
Menus - describe. If you mean cascading type menus, usually these are built in memory by creating a Javascript object and writing to it with the write() method. Another more accessable method is to actually create the menus in div's, set their style to invisible, position them, then hide or show them on mouseover events.
BlobFisk, didn't know about the URL thing.
james
Can I pull the HTML code from the page in question and post it into the thread?
Sure - you can post code here, but try to zero in on just the relevant parts and simplify the code to just enough for people to see exactly what you are addressing. You get a better discussion when members don't have to work too hard to pull out the relevant parts on their own.
See Guidelines for Posting Code [webmasterworld.com] for more information.
I've Bolded the line I'm talking about. The image doesn't change everytime you refresh, but when it does change, the image name in that line changes too "top_img_hp.jpg" Nothing else in the whole thing seems to change.
I can paste in the fp.ccs and fp.js files, but there doesn't seem to be a reference to this image change in those files. The fp.js just controls the menu bar.
<link href="fp.css" rel="stylesheet" type="text/css">
</head>
<script language="JavaScript" src="fp.js"></script>
<body bgcolor="#F1EDE1" onLoad="MM_preloadImages('images/nav/menu_about_about_fp-over.gif','images/nav/menu_contacts_contacts-over.gif','images/nav/menu_investor_investor_relations-over.gif','images/nav/menu_model_model-over.gif','images/nav/menu_news_news_events-over.gif','images/nav/sub_about_background-over.gif','images/nav/sub_about_employment-over.gif','images/nav/sub_about_facilities-over.gif','images/nav/sub_about_management-over.gif','images/nav/sub_about_vehicles-over.gif','images/nav/sub_contacts_general-over.gif','sub_investor_charts-over.gif','sub_investor_contact-over.gif','sub_investor_levelii-over.gif','sub_investor_quote-over.gif','images/nav/sub_contacts_investor-over.gif','images/nav/sub_investor_ethics-over.gif','images/nav/sub_investor_financials-over.gif','images/nav/sub_investor_historical-over.gif','images/nav/sub_investor_legal-over.gif','images/nav/sub_investor_news-over.gif','images/nav/sub_investor_privacy-over.gif','images/nav/sub_investor_profile-over.gif','images/nav/sub_investor_sec-over.gif','images/nav/sub_model_buffalo-over.gif','images/nav/sub_model_cougar-over.gif','images/nav/sub_news_gallery-over.gif','images/nav/sub_news_in_news-over.gif','images/nav/sub_news_see-over.gif')">
<center>
<table border=0 width="778" cellpadding=0 cellspacing=0>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing=0 width=100% style="margin-bottom : 4px;">
<tr>
<td><a href="default.htm"><img src="images/logo.gif" width="225" height="34" alt="Force Protection" border="0"></a></td>
<form action="search.html" method="get" name="searchForm">
<td align=right><input type=text name="words" class="searchBox" size=15> <a href="javascript:document.searchForm.submit();" style="text-decoration : none;">SEARCH</a></td>
</form>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="images/random_top/top_img_hp2.jpg" width="778" height="294">
onLoad="MM_preloadImages...
This was done in Dreamweaver, as designated but the beginning MM_, so personally I can understand your confusion by trying to dig through the convoluted MM code. :-)
<script language="JavaScript" src="fp.js"></script>
First guess is that it has to be in fp.js, or dynamically generated. You're probably not finding it because it won't directly reference the image source file - most stock MM_ routines will reference by object id, object name, or html tag. But if it's not . . .
Is there anything in the fp.js that references setTimeout combined with a location.reload or top.location=[url]? Maybe what you're seeing is actually server-side generated - the JS is just making a request to the server for another page, and it's the server that's swapping the image.
Also notice there's no top to your HTML - there's not a meta-refresh tag is there?
I guess the menu bar stuff is something that's done in Dreamweaver also huh?
Here's the file
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ¦¦ innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function changeImage(imgName) {
document.photo.src = imgName;
}
