Hlep with creating a cycling banner & rollove effect

Question

EntangledDesi 0 Newbie Poster

14 Years Ago

There is a banner ad at the top of the index page called banner1.jpg. I need help with creating a cycling banner ad using 3 banner ad images (bannerad1.jpg, bannerad2.jpg and bannerad3.jpg). I also need to add a link to bannerad2 that will take the user to www.bigmtn.com and add a link to bannerad3 that will take the user to www.bridgerbowl.com.

There are three navigational buttons located on the first page. Each of these has the word up incorporated in their image name. Each image has a corresponding down image with the word down incorporated in the image name. How do I create a rollover effect and a mouse down effect that will swap the up image with the down image?

This is the code for the Index page - Index.html

<html>
<head>
<title>Ski Montana</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="15" height="6" valign="top"></td>
    <td width="103" height="6" valign="top"></td>
    <td width="10" height="6" valign="top"></td>
    <td width="9" height="6" valign="top"></td>
    <td width="176" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="96" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="209" height="6" valign="top"></td>
    <td width="11" height="6" valign="top"></td>
    <td width="6" height="6" valign="top"></td>
    <td width="133" height="6" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="89" valign="top"></td>
    <td width="103" height="89" valign="top"></td>
    <td width="10" height="89" valign="top"></td>
    <td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68"></td>
    <td width="6" height="89" valign="top"></td>
    <td width="133" height="89" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="108" valign="top"></td>
    <td width="103" height="108" valign="top"></td>
    <td width="10" height="108" valign="top"></td>
    <td width="9" height="108" valign="top"></td>
    <td width="483" height="222" colspan="5" rowspan="3" valign="top"> 
  <h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
  <h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West 
    and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
    <td width="11" height="108" valign="top"></td>
    <td width="6" height="108" valign="top"></td>
    <td width="133" height="108" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="2" valign="top"></td>
    <td width="103" height="2" valign="top"></td>
    <td width="10" height="2" valign="top"></td>
    <td width="9" height="2" valign="top"></td>
    <td width="11" height="2" valign="top"></td>
    <td width="6" height="2" valign="top"></td>
    <td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
  </tr>
  <tr>
    <td width="15" height="112" valign="top"></td>
    <td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
    <td width="10" height="112" valign="top"></td>
    <td width="9" height="112" valign="top"></td>
    <td width="11" height="112" valign="top"></td>
    <td width="6" height="112" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="46" valign="top"></td>
    <td width="10" height="46" valign="top"></td>
    <td width="9" height="46" valign="top"></td>
    <td width="176" height="46" valign="top"></td>
    <td width="97" height="46" colspan="2" valign="top"><a href="photos.htm"><img src="photoup.gif" width="97" height="30" border="0"></a></td>
    <td width="1" height="46" valign="top"></td>
    <td width="209" height="46" valign="top"></td>
    <td width="11" height="46" valign="top"></td>
    <td width="6" height="46" valign="top"></td>
    <td width="133" height="46" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="44" valign="top"></td>
    <td width="103" height="44" valign="top"></td>
    <td width="10" height="44" valign="top"></td>
    <td width="9" height="44" valign="top"></td>
    <td width="176" height="44" valign="top"></td>
    <td width="1" height="44" valign="top"></td>
    <td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm"><img src="resortsup.gif" width="97" height="30" border="0"></a></td>
    <td width="209" height="44" valign="top"></td>
    <td width="11" height="44" valign="top"></td>
    <td width="6" height="44" valign="top"></td>
    <td width="133" height="44" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="49" valign="top"></td>
    <td width="103" height="49" valign="top"></td>
    <td width="10" height="49" valign="top"></td>
    <td width="9" height="49" valign="top"></td>
    <td width="176" height="49" valign="top"></td>
    <td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm"><img src="contactusup.gif" width="97" height="30" border="0"></a></td>
    <td width="1" height="49" valign="top"></td>
    <td width="209" height="49" valign="top"></td>
    <td width="11" height="49" valign="top"></td>
    <td width="6" height="49" valign="top"></td>
    <td width="133" height="49" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
    <td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
    <td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
    <td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
    <td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
    <td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
    <td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
    <td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
  </tr>
</table>
</body>

Any help or suggestions on how to go about this would be greatly appreciated.

javascript

2 Contributors
3 Replies
119 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by pritaeas

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

For the banner, do you mean something like my portfolio (see pritaeas.net) ? All the code is there, just take it.

For the mouseover effect I suggest you use an empty link tag. Then style it with css to give it the first image as background. Then on :hover use the second one.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

EntangledDesi 0 Newbie Poster · Answer 1 · 2010-06-06T23:37:40+00:00

This is what I have so far for the rolling banner part, but something seems to be wrong about it - I can't get the page to show the banner.

<html>
<head>
<title>Ski Montana</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- Hide from old browsers
	var banners = new Array("bannerad1.jpg","bannerad2.jpg","bannerad3.jpg","bannerad4.jpg")
	var bnrCntr = 0
	function bancycle() {
		bnrCntr = bnrCntr + 1	
		if (bnrCntr == 4) 
		bnrCntr = 0
		}
		document.Bannerad.src = banners[bnrCntr]
		setTimeout("bannercyle()",3000)
	}

//-->
</SCRIPT>
</HEAD>	
	

<BODY onload="SetTimeout('bancycle()',3000">

<A NAME="MCS_TOP">
<CENTER><IMG SCR="bannerad1" Name=bannerad" width=503 height=68></CENTER>

<body bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td width="15" height="6" valign="top"></td>
    <td width="103" height="6" valign="top"></td>
    <td width="10" height="6" valign="top"></td>
    <td width="9" height="6" valign="top"></td>
    <td width="176" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="96" height="6" valign="top"></td>
    <td width="1" height="6" valign="top"></td>
    <td width="209" height="6" valign="top"></td>
    <td width="11" height="6" valign="top"></td>
    <td width="6" height="6" valign="top"></td>
    <td width="133" height="6" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="89" valign="top"></td>
    <td width="103" height="89" valign="top"></td>
    <td width="10" height="89" valign="top"></td>
    <td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68"></td>
    <td width="6" height="89" valign="top"></td>
    <td width="133" height="89" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="108" valign="top"></td>
    <td width="103" height="108" valign="top"></td>
    <td width="10" height="108" valign="top"></td>
    <td width="9" height="108" valign="top"></td>
    <td width="483" height="222" colspan="5" rowspan="3" valign="top"> 
  <h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
  <h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West 
    and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
    <td width="11" height="108" valign="top"></td>
    <td width="6" height="108" valign="top"></td>
    <td width="133" height="108" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="2" valign="top"></td>
    <td width="103" height="2" valign="top"></td>
    <td width="10" height="2" valign="top"></td>
    <td width="9" height="2" valign="top"></td>
    <td width="11" height="2" valign="top"></td>
    <td width="6" height="2" valign="top"></td>
    <td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
  </tr>
  <tr>
    <td width="15" height="112" valign="top"></td>
    <td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
    <td width="10" height="112" valign="top"></td>
    <td width="9" height="112" valign="top"></td>
    <td width="11" height="112" valign="top"></td>
    <td width="6" height="112" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="46" valign="top"></td>
    <td width="10" height="46" valign="top"></td>
    <td width="9" height="46" valign="top"></td>
    <td width="176" height="46" valign="top"></td>
    <td width="97" height="46" colspan="2" valign="top"><a href="photos.htm"><img src="photoup.gif" width="97" height="30" border="0"></a></td>
    <td width="1" height="46" valign="top"></td>
    <td width="209" height="46" valign="top"></td>
    <td width="11" height="46" valign="top"></td>
    <td width="6" height="46" valign="top"></td>
    <td width="133" height="46" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="44" valign="top"></td>
    <td width="103" height="44" valign="top"></td>
    <td width="10" height="44" valign="top"></td>
    <td width="9" height="44" valign="top"></td>
    <td width="176" height="44" valign="top"></td>
    <td width="1" height="44" valign="top"></td>
    <td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm"><img src="resortsup.gif" width="97" height="30" border="0"></a></td>
    <td width="209" height="44" valign="top"></td>
    <td width="11" height="44" valign="top"></td>
    <td width="6" height="44" valign="top"></td>
    <td width="133" height="44" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="49" valign="top"></td>
    <td width="103" height="49" valign="top"></td>
    <td width="10" height="49" valign="top"></td>
    <td width="9" height="49" valign="top"></td>
    <td width="176" height="49" valign="top"></td>
    <td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm"><img src="contactusup.gif" width="97" height="30" border="0"></a></td>
    <td width="1" height="49" valign="top"></td>
    <td width="209" height="49" valign="top"></td>
    <td width="11" height="49" valign="top"></td>
    <td width="6" height="49" valign="top"></td>
    <td width="133" height="49" valign="top"></td>
  </tr>
  <tr>
    <td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
    <td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
    <td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
    <td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
    <td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
    <td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
    <td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
    <td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
    <td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
    <td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
  </tr>
</table>
</body>
</html>

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 2 · 2010-06-07T03:57:00+00:00

Use:

setTimeout(bancycle, 3000);

in both cases. Watch your function names, everything is case-sensitive.