Login

Need to register? Lost password?

Options

Partners & Links

Javascript Help (kinda urgent)

WebDev

Minitokyo » Forum » Computers & Internet Fora » WebDev Javascript Help (kinda urgent)

page 1 of 1

2 total items

luminatingsky
2y 15wk ago

Hi,

Okay my first questiong is -

I want to use an onhover cascading menu that is coded in Javascript with an image map.

I have my navigation bar and it is going to be an image map but i want to use the javascript (where i hover on one link and more appear beneath it or to the side,etc) with it.

I was wondering if that is possible?

My second question is I'm using a javascript code to create a dynamic splash page.

I want to position two images on either side of where my messages are appearing.

See the script produces a message to come on up screen then another and another (simarlar to a movie trailer).

I know that i can position the images with each message but i want to fix position them on the page with the message appearing in between.

Here is a screenshot of what i want - the red marks indicate the image's desired position.

Here is the Javascript and HTML I'm using:

Code:


	

	<html> 


	<head> 

	<title>....Welcome to Computerinfo.com....</title> 

	</head> 


	<body bgcolor="#9bc3cf" text="#FFFFFF"> 


	<div id="splashcontainer"
	style="position:absolute;width:550px;"></div> 


	<layer id="splashcontainerns" width=550></layer> 


	

	<script> 


	

	var preloadimages=new
	Array("http://img96.imageshack.us/img96/3496/cp14or.gif","http://img96.imageshack.us/img96/2987/cp23ba.gif")
	

	//configure delay in miliseconds between each message (default: 1 seconds) 

	var intervals=4000 

	//configure destination URL 

	var targetdestination="C:\Documents and Settings\Tara's\My
	Documents\Layouts\IPT\index.html" 


	var splashmessage=new Array() 

	var openingtags='<font face="Arial" size="4">' 

	splashmessage[0]=' Welcome to Computerinfo.com' 

	splashmessage[1]='Your pathway to the future....' 

	splashmessage[2]='....with the most up to date information and the latest
	technology...' 

	splashmessage[3]='....and a guarantee on quality information....' 

	splashmessage[4]='computerinfo.com makes your information quest on computers a
	breeze! ' 

	splashmessage[5]='Please stand by...' 

	var closingtags='</font>' 


	

	var i=0 


	var ns4=document.layers?1:0 

	var ie4=document.all?1:0 

	var ns6=document.getElementById&&!document.all?1:0 

	var theimages=new Array() 


	//preload images 

	if (document.images){ 

	for (p=0;p<preloadimages.length;p++){ 

	theimages[p]=new Image() 

	theimages[p].src=preloadimages[p] 

	} 

	} 


	function displaysplash(){ 

	if (i<splashmessage.length){ 

	sc_cross.style.visibility="hidden" 

	sc_cross.innerHTML='<b><center>'+openingt(...) 

	sc_cross.style.left=ns6?parseInt(window.p(...) : 


	document.body.scrollLeft+document.body.(...) 

	sc_cross.style.top=ns6?parseInt(window.pa(...) : 


	document.body.scrollTop+document.body.c(...) 

	sc_cross.style.visibility="visible" 

	i++ 

	} 

	else{ 

	window.location=targetdestination 

	return 

	} 

	setTimeout("displaysplash()",intervals) 

	} 


	function displaysplash_ns(){ 

	if (i<splashmessage.length){ 

	sc_ns.visibility="hide" 

	sc_ns.document.write('<b>'+openingtags+sp(...) 

	sc_ns.document.close() 


	sc_ns.left=pageXOffset+window.innerWidt(...) 

	sc_ns.top=pageYOffset+window.innerHeight/(...) 


	sc_ns.visibility="show" 

	i++ 

	} 

	else{ 

	window.location=targetdestination 

	return 

	} 

	setTimeout("displaysplash_ns()",intervals) 

	} 


	function positionsplashcontainer(){ 

	if (ie4||ns6){ 

	sc_cross=ns6?document.getElementById("spl(...) 

	displaysplash() 

	} 

	else if (ns4){ 

	sc_ns=document.splashcontainerns 

	sc_ns.visibility="show" 

	displaysplash_ns() 

	} 

	else 

	window.location=targetdestination 

	} 

	window.onload=positionsplashcontainer 


	</script> 


	<!--Set href in below link to the URL of the target destination-->
	


	

	<div align="right"> 

	<table border="0" width="350" height="100%"
	cellspacing="0" cellpadding="0"> 

	<td width="100%" valign="bottom"
	align="right"> 

	[ <a href="C:\Documents and Settings\Tara's\My
	Documents\Layouts\IPT\index.html"><font
	color="#FFFFFF">Skip Intro</font></a> ] 

	</td> 

	</table> 

	</div> 


	

	</body> 

	</html>

All help is appreciated.

Thanks in advance,

Jim3535
2y 15wk ago

This page has an example of some javascript that can be used to make an overlapping content block. It's designed to be used when clicked on, but you should be able to modify it to use the on mouse over events.

http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

You might want to consider forgoing the intro page. They can be annoying and, in my opinion, look unprofessional. The perfect example being http://zombo.com/ . If you really want to do it, then spacing the images and text with fixed width DIVs should work.

I'm not sure what the table for your 'skip intro' link is for. I would recommend using the width CSS property on the DIV if your intent is to use it to set the width.

Isn't javascript normally put in the HEAD element to make sure it loads before the rest of the page, or is that just a common convention?