Hi,
I am working on a website for a friend of mine.
I have basicly a big image, all the links are image mapped on the image and I have a div layer to hold the content.
Also,
On the image I have a scrollbar drawn into it.
I only need the up and down images to work, and they are image mapped as well.
But every code I try doesnt seem to work.
Can someone take a look at my code and tell me what they thing the problem is or a good fix for it ??
Thanks.
================================================== =====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Derricks 3 Rotor Rx7</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bodyareabg.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left bottom;
}
a {
font-size: 9px;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:link {
text-decoration: none;
}
-->
#divUp{position:absolute; left:170; top:190}
#divDown{position:absolute; left:170; top:380}
#divCont{position:relative; width:510px; height:350px; clip:rect(0,510,350,0);}
#divText{position:absolute; width:508px; height:350px; z-index:1; overflow: hidden; visibility: visible;}
</style>
<SCRIPT LANGUAGE="JavaScript">
/************************************************** ******************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
************************************************** ******************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/*****************
You set the width and height of the divs inside the style tag, you only have to
change the divCont, Remeber to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.
Updated with a fix for error if moving over layer before pageload.
****************/
//If you want it to move faster you can set this lower:
var speed=50
//Sets variables to keep track of what's happening
var loop, timer
//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height: this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.e l.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
//Makes the object go up
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//Makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
<!--
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);
//-->
</head>
</script>
<body onload=scrollInit;>
<div align="center">
<table width="764" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="764" class="main"><img src="images/top.gif" width="760" height="80" class="top"></td>
</tr>
<tr>
<td class="main"><table width="760" border="0" cellspacing="0" cellpadding="0">
<tr class="sides1">
<td width="531" align="left" valign="top" class="sides1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%"> </td>
<td width="97%" height="50"><div id="divCont">
<div id="divText">
<p>Welcome to 3RotorRx7.com</p>
<p>This is the place where I showcase my car. <br>
I have included videos, sounds, and pictures<br>
along with a list of modifications, and media productions featuring my car.</p>
<p>Let me know what you guys think. </p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="229" class="sides2"><div align="right"><img src="images/links.gif" width="229" height="420" border="0" usemap="#Map" href="#"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<map name="Map">
<area shape="rect" coords="7,23,29,41" href="#" onmouseover="scroll(-2)" onmouseout="noScroll()">
<area shape="rect" coords="5,376,31,394" href="#" onmouseover="scroll(2)" onmouseout="noScroll()">
</map>
</body>
</html>
Nvm. I got it.
I am working on a website for a friend of mine.
I have basicly a big image, all the links are image mapped on the image and I have a div layer to hold the content.
Also,
On the image I have a scrollbar drawn into it.
I only need the up and down images to work, and they are image mapped as well.
But every code I try doesnt seem to work.
Can someone take a look at my code and tell me what they thing the problem is or a good fix for it ??
Thanks.
================================================== =====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Derricks 3 Rotor Rx7</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bodyareabg.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left bottom;
}
a {
font-size: 9px;
color: #FFFFFF;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
a:link {
text-decoration: none;
}
-->
#divUp{position:absolute; left:170; top:190}
#divDown{position:absolute; left:170; top:380}
#divCont{position:relative; width:510px; height:350px; clip:rect(0,510,350,0);}
#divText{position:absolute; width:508px; height:350px; z-index:1; overflow: hidden; visibility: visible;}
</style>
<SCRIPT LANGUAGE="JavaScript">
/************************************************** ******************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
************************************************** ******************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
/*****************
You set the width and height of the divs inside the style tag, you only have to
change the divCont, Remeber to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.
Updated with a fix for error if moving over layer before pageload.
****************/
//If you want it to move faster you can set this lower:
var speed=50
//Sets variables to keep track of what's happening
var loop, timer
//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4 ?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style :bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height: this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.e l.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x; this.y;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function moveIt(x,y){
this.x=x;this.y=y
this.css.left=this.x
this.css.top=this.y
}
//Makes the object go up
function goDown(move){
if(this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if(this.y<0){
this.moveIt(0,this.y-move)
if(loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if(loaded){
loop=true;
if(speed>0) oScroll.down(speed)
else oScroll.up(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll(){
loop=false
if(timer) clearTimeout(timer)
}
//Makes the object
var loaded;
function scrollInit(){
oCont=new makeObj('divCont')
oScroll=new makeObj('divText','divCont')
oScroll.moveIt(0,0)
oCont.css.visibility='visible'
loaded=true;
}
<!--
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);
//-->
</head>
</script>
<body onload=scrollInit;>
<div align="center">
<table width="764" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="764" class="main"><img src="images/top.gif" width="760" height="80" class="top"></td>
</tr>
<tr>
<td class="main"><table width="760" border="0" cellspacing="0" cellpadding="0">
<tr class="sides1">
<td width="531" align="left" valign="top" class="sides1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%"> </td>
<td width="97%" height="50"><div id="divCont">
<div id="divText">
<p>Welcome to 3RotorRx7.com</p>
<p>This is the place where I showcase my car. <br>
I have included videos, sounds, and pictures<br>
along with a list of modifications, and media productions featuring my car.</p>
<p>Let me know what you guys think. </p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
<p>l</p>
</div>
</div></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="229" class="sides2"><div align="right"><img src="images/links.gif" width="229" height="420" border="0" usemap="#Map" href="#"></div></td>
</tr>
</table></td>
</tr>
</table>
</div>
<map name="Map">
<area shape="rect" coords="7,23,29,41" href="#" onmouseover="scroll(-2)" onmouseout="noScroll()">
<area shape="rect" coords="5,376,31,394" href="#" onmouseover="scroll(2)" onmouseout="noScroll()">
</map>
</body>
</html>
Nvm. I got it.
