Hello every one here is the site I have been working on over the last day http://www.canstudios.org as you can see there are a couple of problems with the code and I was wondering if any one on here would help me out with it? *note the only artist page that should be working propley is this one http://www.canstudios.org/pauline_woolley.html. The problems I am facing are that the menu on the index goes underneath the information and the gallery won’t display the pictures as it should but also it covers the navigation and the logo. How would one go about fixing these issues?
Here is the css for the site
@charset "utf-8";
/* CSS Document */
body {
background-color: #888483;
font-family:Arial, Helvetica, sans-serif;
}
.wrapper{
width:1024px;
height:786px;
position:absolute;
}
.header {
text-align:center;
position:absolute;
}
.navigation {
margin:50px;
z-index:10;
display:block;
}
.navigation li {
float:right;
list-style:none;
}
.navigation li:hover {
position:relative;
}
.navigation li a {
display:block;
}
.navigation li ul {
margin-yop:-2px;
display:none;
}
.navigation li:hover ul {
display:block;
position:absolute;
}
.navigation li ul li a {
width:150px;
}
.navigation li:hover > a {
background:#888483;
box-shadow:5px 5px 25px #000;
-moz-box-shadow:5px 5px 25px #000;
-webkit-box-shadow:5px 5px 25px #000;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.navigation li.sub:hover > a {
border-radius: 10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
}
.navigation li a {
colour:#fff;
font-weight:bold;
text-decoration:none;
padding:12px;
}
.navigation li a:hover {
background-color: #021A1A;
}
.navigation li ul {
background:rgba(255,255,255,0,5);
padding:10px 5px;
box-shadow:5px 5px 25px #000;
-moz-box-shadow:5px 5px 25px #000;
-webkit-box-shadow:5px 5px 25px #000;
border-radius:0px 15px 15px 15px;
-moz-border-radius:0px 15px 15px 15px;
-webkit-border-radius:0px 5px 5px 5px;
}
.navigation li ul li a, .navigation li ul li a:hover {
background:transparent;
color:#fff;
width:150px;
font-size:0.95em;
font-weight:normal;
}
.navigation li ul li a:hover {
text-decoration:underline;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
.content {
background-color:#F7F5F4;
position:absolute;
top:250px;}
.content p {
colour:#000;
font-size:12px;
margin: 0 6px;
padding: 0 6px 9px 6px;
}
.information p {
font-size:11px;
margin:0;
padding:6px;
}
*{
margin:0;
padding:0}
a:link,a:visited{
color:#fff;
text-decoration:none
}
a:hover,a:visited:hover{
color:#000;
text-decoration:underline
}
a.inactive:link,a.inactive:visited{
color:#CECEB5
}
.Container{
margin:0 auto;
padding: 0;
position:relative;
width:100%;
height:310px;
background-color:#fff;
border:3px solid #CECEB5;
overflow:hidden
}
.LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
}
.PhotoContainer{
visibility:hidden
}
.CaptionBlock{
height:18px;
width:582px;
text-align:left;
margin:0 auto
}
.Caption{
color:#333
}
.License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:740px;
text-align:left;
line-height:1.4em;
}
.LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:200px;
width:200px;
z-index:100;
background:url(images/slideshow/start.gif) 50% 50% no-repeat;
}
.PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:200px;
width:50%;
display:block
}
.NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:200px;
width:50%;
display:block
}
.PrevLink:hover,.NextLink:hover{
text-decoration:none
}
.PrevLink:hover{
background:transparent url(images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
}
.NextLink:hover{
background:transparent url(images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
}
.PrevLink span,.NextLink span{
display:none
}
img{
border:none
}
p{
font-size:11px;
padding:1em 0
}
.Wrapper{
margin:0 auto;
height:500px;
width:100%;
overflow:hidden;
position:relative
}
.Wrapper[id]{
display:table;
position:static
}
.InnerWrapper{
position:absolute;
top:50%;
left:0;
}
.InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
}
.OuterContainer{
position:relative;
top:-50%
}
a:link {
color:#fff;
}
a:visited {
color:#fff;
}
the html for the index page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Can Studio</title>
</head>
<body>
<div class="header">
<img src="images/logo.jpg" align="left" border="0" />
</div>
<ul class="navigation">
<li><a href="contact.html">Contact</a></li>
<li class="sub"><a href="#">Artists</a>
<ul class="sub">
<li><a href="kit_anderson.html">Kit Anderson</a></li>
<li><a href="liza_aspell.html">Liza Aspell</a></li>
<li><a href="karen_frazer.html">Karen Fraser</a></li>
<li><a href="billie_ireland.html">Billie Ireland</a></li>
<li><a href="sarah_jane_terry.html">Sarah Jane Terry</a></li>
<li><a href="marek_tobolewski.html">Marek Tobolewski</a></li>
<li><a href="inge_tong.html">Inge Tong</a></li>
<li><a href="pauline_woolley.html">Pauline Woolley</a></li>
<li><a href="terry_duffy.html">Terry Duffy</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="news.html">News</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class="content"><p>Founded in 1987, Can Studios are one of the longest running studio groups in Nottingham today. Members of the group have instigated innovative and enduring artist-led activities which have included collaborations, warehouse exhibitions, open studios, offsite projects, art auctions, residencies, gallery collaborations and installations in alternative urban venues. These endeavours have stimulated the growth of contemporary art in Nottingham over the last 20 years. Can Studios now occupies a new location in Sneinton, near to the city centre. Here the studio members continue their committed involvement in individual projects, and in developing ambitious new concepts for collaborative possibilities.</p></div>
</body>
</html>
the html for /pauline_woolley
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="jscript/ajax-slideshow.js"></script>
<script type="text/JavaScript" charset="utf-8">
// <![CDATA[
// -----------------------------------------------------------------------------------
//
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated API copyright 2002, Travis Beckham (www.squidfingers.com)
//
// -----------------------------------------------------------------------------------
// --- version date: 04/30/05 ------------------------------------------------------
var photoDir = "images/paulinewoolley"; // Location of photos for gallery
var borderSize = 6; // = 2x CSS border size
// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
// if no id in query string then set to 0
photoId = (!photoId)? 0:photoId;
// Define each photo's name, height, width, and caption
var photoArray = new Array(
// Source, Width, Height, Caption
new Array("bjarg.jpg", "504", "360", "bjarg - cliff, rock 2008 - Click on the image to view previous or next image"),
new Array("foss.jpg", "504", "360", "MICRO ALTITUDE 1 2010 - Click on the image to view previous or next image"),
new Array("ion.jpg", "504", "360", "MICRO ALTITUDE 1 2010 - Click on the image to view previous or next image"),
new Array("altitude1.jpg", "544", "541", "MICRO ALTITUDE 1 2010 - Click on the image to view previous or next image"),
new Array("altitude5.jpg", "544", "541", "MICRO ALTITUDE 5 2010 - Click on the image to view previous or next image"),
new Array("altitude6.jpg", "544", "541", "MICRO ALTITUDE 6 2010 - Click on the image to view previous or next image")
);
// Number of photos in this gallery
var photoNum = photoArray.length;
// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
API = new Detect();
// CREATE INSTANCES & LOAD
loadAPI = function(){
// Instantiate HTMLobj
API.Container = new HTMLobj('Container');
API.Photo = new HTMLobj('Photo');
API.PhotoContainer = new HTMLobj('PhotoContainer');
API.LinkContainer = new HTMLobj('LinkContainer');
API.PrevLink = new HTMLobj('PrevLink');
API.NextLink = new HTMLobj('NextLink');
API.CaptionBlock = new HTMLobj('CaptionBlock');
API.Counter = new HTMLobj('Counter');
API.Caption = new HTMLobj('Caption');
API.LoadImg = new HTMLobj('LoadImg');
// Show initial photo
cyclePhoto(photoId);
}
onload = loadAPI;
// Fade in photo when it is loaded from the server
initFade = function(){
// Show PhotoContainer again
API.PhotoContainer.show();
// Be certain the tween is complete before fading, too
var fade_timer = setInterval('startFade()', 1000);
// Fade photo in when ready and clear listener
startFade = function(){
if(API.Container._tweenRunning == false){
clearInterval(fade_timer);
// Be certain fade is done running before allowing next/previous links to work
// This avoids rapid fade-in when users click next/previous links in quick succession
var adv_timer = setInterval('permitNextPrev()', 500);
// Permit next/previous links to function normally when fade is completed
permitNextPrev = function(){
if(API.Photo._fadeRunning == false){
clearInterval(adv_timer);
// Only show links if there is more than one photo in array
if(photoNum > 1){
API.LinkContainer.displayShow();
document.getElementById('NextLink').onclick = nextPhoto;
document.getElementById('PrevLink').onclick = prevPhoto;
}
} else {
return;
}
}
// Swap out loading animation to spare CPU cycles when hidden anyway
API.LoadImg.setSrc("images/slideshow/start.gif");
// Show caption again
API.CaptionBlock.show();
// Fade photo in
API.Photo.fadeIn(0,15,33);
} else {
return;
}
}
}
// Prevent next/previous
falsify = function(){
return false;
}
// Go to next photo
nextPhoto = function(){
// Go to next photo
if(photoId == (photoArray.length - 1)){
photoId = 0;
} else {
photoId++;
}
cyclePhoto(photoId);
}
// Go to previous photo
prevPhoto = function(){
// If at start, go back to end
if(photoId == 0){
photoId = photoArray.length - 1;
} else {
photoId--;
}
cyclePhoto(photoId);
}
// Alter class of elements
changeElementClass = function(objId,setClass) {
document.getElementById(objId).className = setClass;
}
// Function to load subsequent photos in gallery
cyclePhoto = function(photoId){
// Swap in loading animation
API.LoadImg.setSrc("images/slideshow/loading_ani2.gif");
// Hide link container if it is not already hidden
API.LinkContainer.displayHide();
// Hide photo container and caption temporarily
API.Photo.hide();
API.Photo.setOpacity(0);
API.CaptionBlock.hide();
// Get dimensions of photo
var wNew = photoArray[photoId][1];
var hNew = photoArray[photoId][2];
// Start tween on a delay
var wCur = API.Container.getWidth() - borderSize;
var hCur = API.Container.getHeight() - borderSize;
// Begin tweening on a short timer
setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500);
setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500);
setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500);
// Get new photo source
var newPhoto = photoDir + photoArray[photoId][0];
// Set source, width, and height of new photo
API.Photo.setSrc(newPhoto);
API.Photo.sizeTo(wNew,hNew);
// Set links to new targets based on photoId
API.NextLink.setHref("#" + (photoId+1));
API.PrevLink.setHref("#" + (photoId+1));
API.Counter.setInnerHtml((photoId+1)+" of "+photoNum+" |");
API.Caption.setInnerHtml(photoArray[photoId][3]);
// Event listeners for onload and onclick events
document.getElementById('Photo').onload = initFade;
// Block next/previous links until permitNextPrev() has fired
document.getElementById('NextLink').onclick = falsify;
document.getElementById('PrevLink').onclick = falsify;
}
// ]]>
</script>
<title>Can Studio</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="images/logo.jpg" align="left" border="0" />
</div>
<ul class="navigation">
<li><a href="contact.html">Contact</a></li>
<li class="sub"><a href="#">Artists</a>
<ul class="sub">
<li><a href="kit_anderson.html">Kit Anderson</a></li>
<li><a href="liza_aspell.html">Liza Aspell</a></li>
<li><a href="karen_frazer.html">Karen Fraser</a></li>
<li><a href="billie_ireland.html">Billie Ireland</a></li>
<li><a href="sarah_jane_terry.html">Sarah Jane Terry</a></li>
<li><a href="marek_tobolewski.html">Marek Tobolewski</a></li>
<li><a href="inge_tong.html">Inge Tong</a></li>
<li><a href="pauline_woolley.html">Pauline Woolley</a></li>
<li><a href="terry_duffy.html">Terry Duffy</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="news.html">News</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</div>
<div class="Container">
<div class="LinkContainer">
<a href="#" class="PrevLink" onfocus="this.blur();" accesskey="[" title="« Previous Photo" class="plainlink"><span>Previous</span></a><a href="#" class="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo »" class="plainlink"><span>Next</span></a>
</div>
<div class="PhotoContainer"><img id="Photo" src="images/1.gif" alt="" width="300" height="150" /></div>
<div class="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>
<!-- counter and caption -->
<p class="CaptionBlock"><span id="Counter"></span> <span class="Caption"></span></p>
</div>
</div>
</body>
</html>
and the javascript for the gallery
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
// If you do remove this, I will hunt you down :)
//
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- myapi version date: 03/29/02 ------------------------------------------------------
//
// ---------------------------------------------------------------------------------------
// Several functions added or modified by Scott Upton, Uptonic.com
// January 2005
// ---------------------------------------------------------------------------------------
Detect = function(){
var agent = navigator.userAgent.toLowerCase();
this._mac = agent.indexOf('mac') != -1;
this._win = !this._mac;
this._w3c = document.getElementById;
this._iex = document.all;
this._ns4 = document.layers;
}
Detect.prototype.getObj = function(name){
if(this._w3c){
return document.getElementById(name);
}else if(this._iex){
return document.all[name];
}else if(this._ns4){
return this.getObjNS4(document,name);
}
}
Detect.prototype.getObjNS4 = function(obj, name){
var d = obj.layers;
var result,temp;
for(var i=0; i<d.length; i++){
if(d[i].id == name){
result = d[i];
}else if(d[i].layers.length){
var temp = this.getObjNS4(d[i],name);
}
if(temp){
result = temp;
}
}
return result;
}
Detect.prototype.getStyle = function(obj){
return (this._ns4) ? obj : obj.style;
}
Detect.prototype.getWindowWidth = function(){ // width of the window
return this._iex ? document.body.clientWidth : window.innerWidth;
}
Detect.prototype.getWindowHeight = function(){ // height of the window
return this._iex ? document.body.clientHeight : window.innerHeight;
}
Detect.prototype.getScrollTop = function(){ // top scroll position of the window
return this._iex ? document.body.scrollTop : window.pageYOffset;
}
Detect.prototype.getScrollLeft = function(){ // left scroll position of the window
return this._iex ? document.body.scrollLeft : window.pageXOffset;
}
Detect.prototype.setScrollTop = function(n){ // set the vertical scroll position of the window
window.scrollTo(this.getScrollLeft(),n);
}
Detect.prototype.setScrollLeft = function(n){ // set the horizontal scroll position of the window
window.scrollTo(n,this.getScrollTop());
}
Detect.prototype.setScroll = function(x,y){ // set the x,y scroll position of the window
window.scrollTo(x,y);
}
// :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// HTMLobj Constructor
HTMLobj = function(name){
if(name){
this._inherit = Detect; this._inherit(name);
this._id = name;
this._el = this.getObj(this._id);
this._css = this.getStyle(this._el);
this._obj = name+'Object'; eval(this._obj+'=this');
this._timer = null;
this._glideRunning = false;
this._tweenRunning = false;
this._fadeRunning = false; // Added by SU, Couloir
this._randNum = null; // Added by SU, Couloir
this._startFade = false; // Added by SU, Couloir
return this;
}
}
HTMLobj.prototype = new Detect();
HTMLobj.prototype.getLeft = function(){ // left position of the element
return parseInt(this._css.left || 0);
}
HTMLobj.prototype.getTop = function(){ // top position of the element
return parseInt(this._css.top || 0);
}
HTMLobj.prototype.getWidth = function(){ // width of the element
if(this._ns4){
return this._el.document.width;
}else{
return this._el.offsetWidth;
}
}
HTMLobj.prototype.getHeight = function(){ // height of the element
if(this._ns4){
return this._el.document.height;
}else{
return this._el.offsetHeight;
}
}
HTMLobj.prototype.getClipWidth = function(){ // clip width of the element
if(this._ns4){
return this._el.clip.width;
}else{
return this._el.offsetWidth;
}
}
HTMLobj.prototype.getClipHeight = function(){ // clip height of the element
if(this._ns4){
return this._el.clip.height;
}else{
return this._el.offsetHeight;
}
}
HTMLobj.prototype.setStyle = function(prop, val){ // change the value of any css property
if(!this._ns4){
this._el.style[prop] = val;
if(this._iex && this._mac){
this._el.innerHTML = this._el.innerHTML;
}
}
}
HTMLobj.prototype.show = function(){ // show the visibility of the element
this._css.visibility = 'visible';
}
HTMLobj.prototype.hide = function(){ // hide the visibility of the element
this._css.visibility = 'hidden';
}
HTMLobj.prototype.showhide = function(){ // toggle the visibility of the element
if(this._css.visibility == 'hidden' || this._css.visibility == 'hide'){
this._css.visibility = 'visible';
}else{
this._css.visibility = 'hidden';
}
}
HTMLobj.prototype.setInner = function(html){ // change the contents of the element
if(this._ns4){
this._el.document.open();
this._el.document.write(html);
this._el.document.close();
}else{
this._el.innerHTML = html;
}
}
HTMLobj.prototype.moveTo = function(x,y){ // move the element to a new position
if(this._ns4){
this._el.moveTo(x,y);
}else{
this._css.left = x;
this._css.top = y;
}
}
HTMLobj.prototype.moveBy = function(x,y){ // move the element to a new position relative to it's current position
if(this._ns4) {
this._el.moveBy(x,y);
}else{
this._css.left = this.getLeft()+x;
this._css.top = this.getTop()+y;
}
}
HTMLobj.prototype.sizeTo = function(w,h){ // set the size of the element
if(!this._ns4){
this._css.width = w+'px';
this._css.height = h+'px';
}
}
HTMLobj.prototype.sizeBy = function(w,h){ // set the size of the element relative to it's current size
if(!this._ns4){
this._css.width = this.getWidth()+w+'px';
this._css.height = this.getHeight()+h+'px';
}
}
HTMLobj.prototype.glideTo = function(x,y,callback){ // ease-out animation, callback function optional
if(this._glideRunning){
var left = this.getLeft();
var top = this.getTop();
if(Math.abs(left-x)<=1 && Math.abs(top-y)<=1){
this.moveTo(x,y);
this.cancelGlide();
if(callback){
eval(this._obj+'.'+callback+'()');
}
}else{
this.moveTo(left+(x-left)/2, top+(y-top)/2);
}
}else{
var c = (callback) ? ',\\"'+callback+'\\"' : '' ;
this._timer = setInterval(this._obj+'.glideTo('+x+','+y+c+')',100);
this._glideRunning = true;
}
}
HTMLobj.prototype.cancelGlide = function(){ // cancel the glideTo method
clearInterval(this._timer);
this._timer = null;
this._glideRunning = false;
}
HTMLobj.prototype.swapDepth = function(obj){ // swap the z-index of 2 elements
var temp = this._css.zIndex;
this._css.zIndex = obj._css.zIndex;
obj._css.zIndex = temp;
}
// -------------------------------------------
// Modified by SU, Uptonic.com
// -------------------------------------------
HTMLobj.prototype.tweenTo = function(method, start, end, time){ // time-based animation, with multiple easing methods
// method: a function that takes 4 arguments: time, start, change, and duration
// start: array of starting width, height dimensions [w, h]
// end: array of ending width, height dimensions [w, h]
// time: number of 'frames' it takes to get to the end position
if(!this._tweenRunning){
this._tweenTime = 0;
var s = '['+start.toString()+']';
var e = '['+end.toString()+']';
this._timer = setInterval(this._obj+'.tweenTo('+method+','+s+','+e+','+time+')', 33);
this._tweenRunning = true;
}
if(++this._tweenTime > time){
this.cancelTween();
}else{
var w = method(this._tweenTime, start[0], end[0]-start[0], time);
var h = method(this._tweenTime, start[1], end[1]-start[1], time);
this.sizeTo(w,h);
}
}
HTMLobj.prototype.cancelTween = function(){ // cancel the tweenTo method
clearInterval(this._timer);
this._timer = null;
this._tweenRunning = false;
this._startFade = true;
}
// -> Easing Equations by Robert Penner - robertpenner.com -
linearTween = function(t, b, c, d){
return c*t/d + b;
}
easeInQuad = function(t, b, c, d){
t /= d;
return c*t*t + b;
}
easeOutQuad = function(t, b, c, d){
t /= d;
return -c * t*(t-2) + b;
}
easeInOutQuad = function(t, b, c, d){
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
easeInExpo = function(t, b, c, d){
return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
}
easeOutExpo = function(t, b, c, d){
return c * ( -Math.pow( 2, -10 * t/d ) + 1 ) + b;
}
// -------------------------------------------
// Added by SU, Uptonic.com
// December 2004 - January 2005
// -------------------------------------------
HTMLobj.prototype.getRandom = function(start,end){ // generate new random number
this._randNum= Math.round(start + ((end-start) * Math.random()));
return this._randNum;
}
HTMLobj.prototype.setOpacity = function(opacity){ // set opacity of the element
// Fix for math error in some browsers
opacity = (opacity == 100)?99.999:opacity;
// IE/Windows
this._css.filter = "alpha(opacity:"+opacity+")";
// Safari < 1.2, Konqueror
this._css.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
this._css.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
this._css.opacity = opacity/100;
}
HTMLobj.prototype.fadeOut = function(opacity, change, speed){ // gradually decrease the opacity of the element
// opacity: starting opacity of element
// change: the size of the increments between steps
// speed: the rate of the animation
if (opacity >= 0){
this._fadeRunning = true;
this.setOpacity(opacity);
opacity -= change;
setTimeout(this._obj+'.fadeOut('+opacity+','+change+','+speed+')', speed);
} else {
this._fadeRunning = false;
this.hide();
}
}
HTMLobj.prototype.fadeIn = function(opacity, change, speed){ // gradually increase the opacity of the element
// opacity: starting opacity of element
// change: the size of the increments between steps
// speed: the rate of the animation
if (opacity <= 100){
this.show();
this._fadeRunning = true;
this.setOpacity(opacity);
opacity += change;
setTimeout(this._obj+'.fadeIn('+opacity+','+change+','+speed+')', speed);
} else {
this._fadeRunning = false;
this.setOpacity(100);
}
}
HTMLobj.prototype.displayShow = function(){ // display the element as 'block'
this._css.display = 'block';
}
HTMLobj.prototype.displayHide = function(){ // do not display the element
this._css.display = 'none';
}
HTMLobj.prototype.setSrc = function(target){ // set the element's source to target
this._el.src = target;
}
HTMLobj.prototype.setHref = function(target){ // set the element's link to target
this._el.href = target;
}
HTMLobj.prototype.setInnerHtml = function(content){ // set the element's inner HTML to content
this._el.innerHTML = content;
}
and help would be very much appreciated.
Thanks