Member Avatar for kookies

Hi,

essential kindly helped in getting a javascript imageflow menu to display pictures inside an inline frame. Problem i have is that everything is displaying wrong on the page.

Here's what i have currently code wise, i most likely have things in the wrong places i.e divs ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled Page</title> <meta http-equiv="imagetoolbar" content="no"> 
<meta name="generator" content="">

<style type="text/css"> div#container { position: absolute; left: 50%; top: 50%; width: 800px; height: 600px; margin-top: -300px; margin-left: -400px; } </style>

<link rel="stylesheet" title="Standard" href="imageflow.css" type="text/css" media="screen" />

<script type="text/javascript" src="imageflow.js"><!-- // -->
</script>
<script type="text/javascript">
<!-- BEGIN HIDING
window.onload = function() 
{ 
myImg = document.getElementsByTagName('img');
 for ( var x = 0 ; x < myImg.length; x++ ) {
 myImg[x].onclick = 'click(this)';
 myImg[x].name = 'image' + x;
 }
}
document.onclick = click; function click( e ) 
{ e = e ? e : window.event;
  t = e.target ? e.target : e.srcElement;
 for ( var i = 0; i <= myImg.length; i++ ) {
if ( t.name && t.name == myImg[i].name ) { document.getElementById('InlineFrame1').src = myImg[i].src; return true; 
  }  
 }
} 
// DONE HIDING -->
</script>

<!-- End of the line -->
</head> 
<body bgcolor="#000000" text="#000000"> 
<div id="container"> 
<div style="background-color:#000000;position:absolute;left:0px;top:0px;width:796px;height:268px;z-index:0"> 
<div id="imageflow" style="left:0px;top:0px;width:796px;height:268px"> 
<div id="loading">
<b>Loading images</b><br/>  
<img src="loading.gif" width="208" height="13" alt="loading" /> 
</div> 
<div id="images"> 
 
<img src="images/backdrop.jpg" longdesc="images/backdrop.jpg" alt="backdrop.jpg" />
<img src="images/background.jpg" longdesc="images/background.jpg" alt="background.jpg" />
<img src="images/camera 014.jpg" longdesc="images/camera 014.jpg" alt="camera 014.jpg" />
<img src="images/camera 015.jpg" longdesc="images/camera 015.jpg" alt="camera 015.jpg" />
</div> 
<div id="captions"></div> 
<div id="scrollbar">  <div id="slider">
</div> </div> </div> </div> 
<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:0px;top:600px;width:794px;height:442px;z-index:1;" src="" frameborder="1">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> 
</div> 
</body> 
</html>

Any help would be amazing , thankyou in advance , kookies :)

  • 2 Contributors
  • 3 Replies
  • 110 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kookies
Member Avatar for essential

This was just an example, so i'll remove some parts of your documents!
Create some test page and see how this thing work! And it would be nice if you can provide the actual codes' of your imageflow.css

<html>
<head>
<title>some title</title>
<style type="text/css">
<!--
html { height: 100% }

body
{ font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .68em;
}
p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

img
{ border: 0px; 
  margin: 0px; 
  padding: 0px;
}

#content
{ text-align: left;
  width: 653px;
  float: left;
  padding: 12px 0px 18px 14px;
}


#container 
{ position: relative; 
  width: 656px;
  padding-top: 8px;
}

#thumbs 
{ width: 205px; 
  float: right;
}

#thumbs a 
{ display: block; 
  float: right; 
  margin: 1px 0px 3px 10px; 
  width: 50px; 
  height: 50px; 
  border: 2px solid #40403E;
}

#thumbs a img 
{ width: 50px; 
  height: 50px; 
  border: 0;
}

#thumbs a:hover img 
{ position: absolute; 
  width: auto; 
  height: auto; 
  right: 196px; 
  top: 8px; 
  padding: 2px;
  border: 2px solid #40403E;
}
-->
</style>
</head> 
<body> 
<div id="content">
<div id="container">
<em id="thumbs">
<div id="loading">
<b>Loading images</b><br/> <img src="loading.gif" width="208" height="13" alt="loading" /> </div>
<img src="images/backdrop.jpg" longdesc="images/backdrop.jpg" alt="backdrop.jpg" /> <img src="images/background.jpg" longdesc="images/background.jpg" alt="background.jpg" /> <img src="images/camera 014.jpg" longdesc="images/camera 014.jpg" alt="camera 014.jpg" /> <img src="images/camera 015.jpg" longdesc="images/camera 015.jpg" alt="camera 015.jpg" />
</em>
 </div> 
</div> 

</body> 
</html>
Member Avatar for kookies

Hey thanks for helping out again, really appreciate it :)

Full content for this menu system is here .. inc css / js / etc

http://194.95.111.244/~countzero/scripts/_myImageFlow/

My aim is to use this as a navigation menu
So when you click on an image it opens the assigned webpage in the inline frame specified.
Is this going to be possible to do whilst keeping the ability to add or remove the images/links as required in the html ?

It's the sort of thing that someone like yourself could probably finish in about 10mins hehe where as its taken me a week so far :-/

Hope you will be able to get all the info from the link above to help solve this once and for all.

Thanks again in advance,

Kookies.

Member Avatar for kookies

Solved it !

it's the javascript !

in the original javascript i needed to change the second onclick function to this

image.onclick = function() 
{ 
   var iFrame = document.getElementById('InlineFrame1'); 
   if(iFrame) 
      iFrame.src = this.url; 
};

imageflow can now be used as a navigation menu !
thanks to kbrunner and essential for help on this ! awesome !
learnt an awful lot here so far, thanks again !:icon_smile:

commented: Thank you for sharing +10
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.