Member Avatar for kookies

I am currently using a great javascript based image viewer and wish to use it as a menu to navigate pages on my website .

Wondering if someone could take a look at this great menu and modify the javascript for me ? As i know nothing about javascript but am trying to learn .

The menu i'm talking about resides here

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

The aim is to get it to display as is but enable me to link the pages of my website to an inline frame on the same page . Just like a regular menu but keeping the look and feel .

Please help ,

thanks in advance

  • 2 Contributors
  • 12 Replies
  • 214 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

Code Level: Basic

Here's how we do it! -->
code is as follows:

<html>
<head>
<title>Some Title</title>
<script type="text/javascript">
<!-- BEGIN HIDING

document.onclick = click; function click( e ) 
{ e = e ? e : window.event;
  t = e.target ? e.target : e.srcElement;

/* Replace this one
    for specific page
    that you wish to be
    loaded */
 
var links = ['1stpage.html', '2ndpage.html']; 


var names = ['link1', 'link2']; 

for ( var x = 0; x < names.length; x++ ) {
if (( t.name ) && ( t.name == names[x] )) { document.getElementById('frame1').src = links[x]; 
  } 
 }
}
// DONE HIDING -->

</script>
</head>
<body>
<div>

<!-- replace this with your own images.
-->
<img name="link1" onclick="click(this)" src="someImage1.gif" /><br />
<img onclick="click(this)" name="link2" src="someImage2.gif" />
</div>
<div>
<iframe id="frame1" src="somecurrentpage.html"></iframe>
</div>
<!-- That does it for now!
      If this solved the issue, please kindly marked this thread solved! Enjoy coding...
-->
</body>
</html>
Member Avatar for kookies

Thanks for your help with this , i really appreciate it.
I have no idea where to put this code inside the current javascript file i have .
So far i have worked out how to change the images to links and would love to get this working with your suggestion but just dont know how .

This is the script i have ,

/**
 *	ImageFlow 0.9
 *
 *	This code is based on Michael L. Perrys Cover flow in Javascript.
 *	For he wrote that "You can take this code and use it as your own" [1]
 *	this is my attempt to improve some things. Feel free to use it! If
 *	you have any questions on it leave me a message in my shoutbox [2].
 *
 *	The reflection is generated server-sided by a slightly hacked  
 *	version of Richard Daveys easyreflections [3] written in PHP.
 *	
 *	The mouse wheel support is an implementation of Adomas Paltanavicius
 *	JavaScript mouse wheel code [4].
 *
 *	Thanks to Stephan Droste ImageFlow is now compatible with Safari 1.x.
 *
 *
 *	[1] http://www.adventuresinsoftware.com/blog/?p=104#comment-1981
 *	[2] http://shoutbox.finnrudolph.de/
 *	[3] http://reflection.corephp.co.uk/v2.php
 *	[4] http://adomas.org/javascript-mouse-wheel/
 */


/* Configuration variables */
var conf_reflection_p = 0.5;         // Sets the height of the reflection in % of the source image 
var conf_focus = 4;                  // Sets the numbers of images on each side of the focussed one
var conf_slider_width = 14;          // Sets the px width of the slider div
var conf_images_cursor = 'pointer';  // Sets the cursor type for all images default is 'default'
var conf_slider_cursor = 'default';  // Sets the slider cursor type: try "e-resize" default is 'default'

/* Id names used in the HTML */
var conf_imageflow = 'imageflow';    // Default is 'imageflow'
var conf_loading = 'loading';        // Default is 'loading'
var conf_images = 'images';          // Default is 'images'
var conf_captions = 'captions';      // Default is 'captions'
var conf_scrollbar = 'scrollbar';    // Default is 'scrollbar'
var conf_slider = 'slider';          // Default is 'slider'

/* Define global variables */
var caption_id = 0;
var new_caption_id = 0;
var current = 0;
var target = 0;
var mem_target = 0;
var timer = 0;
var array_images = new Array();
var new_slider_pos = 0;
var dragging = false;
var dragobject = null;
var dragx = 0;
var posx = 0;
var new_posx = 0;
var xstep = 150;


function step()
{
	switch (target < current-1 || target > current+1) 
	{
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			break;
	}
}

function glideTo(x, new_caption_id)
{	
	/* Animate gliding to new x position */
	target = x;
	mem_target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}
	
	/* Display new caption */
	caption_id = new_caption_id;
	caption = img_div.childNodes.item(array_images[caption_id]).getAttribute('alt');
	if (caption == '') caption = '&nbsp;';
	caption_div.innerHTML = caption;

	/* Set scrollbar slider to new position */
	if (dragging == false)
	{
		new_slider_pos = (scrollbar_width * (-(x*100/((max-1)*xstep))) / 100) - new_posx;
		slider_div.style.marginLeft = (new_slider_pos - conf_slider_width) + 'px';
	}
}

function moveTo(x)
{
	current = x;
	var zIndex = max;
	
	/* Main loop */
	for (var index = 0; index < max; index++)
	{
		var image = img_div.childNodes.item(array_images[index]);
		var current_image = index * -xstep;

		/* Don't display images that are not conf_focussed */
		if ((current_image+max_conf_focus) < mem_target || (current_image-max_conf_focus) > mem_target)
		{
			image.style.visibility = 'hidden';
			image.style.display = 'none';
		}
		else 
		{
			var z = Math.sqrt(10000 + x * x) + 100;
			var xs = x / z * size + size;

			/* Still hide images until they are processed, but set display style to block */
			image.style.display = 'block';
		
			/* Process new image height and image width */
			var new_img_h = (image.h / image.w * image.pc) / z * size;
			switch ( new_img_h > max_height )
			{
				case false:
					var new_img_w = image.pc / z * size;
					break;

				default:
					new_img_h = max_height;
					var new_img_w = image.w * new_img_h / image.h;
					break;
			}
			var new_img_top = (images_width * 0.34 - new_img_h) + images_top + ((new_img_h / (conf_reflection_p + 1)) * conf_reflection_p);

			/* Set new image properties */
			image.style.left = xs - (image.pc / 2) / z * size + images_left + 'px';
			if(new_img_w && new_img_h)
			{ 
				image.style.height = new_img_h + 'px'; 
				image.style.width = new_img_w + 'px'; 
				image.style.top = new_img_top + 'px';
			}
			image.style.visibility = 'visible';

			/* Set image layer through zIndex */
			switch ( x < 0 )
			{
				case true:
					zIndex++;
					break;

				default:
					zIndex = zIndex - 1;
					break;
			}
			
			/* Change zIndex and onclick function of the focussed image */
			switch ( image.i == caption_id )
			{
				case false:
					image.onclick = function() { glideTo(this.x_pos, this.i); }
					break;

				default:
					zIndex = zIndex + 1;
					image.onclick = function() { document.location = this.url; }
					break;
			}
			image.style.zIndex = zIndex;
		}
		x += xstep;
	}
}

/* Main function */
function refresh(onload)
{
	/* Cache document objects in global variables */
	imageflow_div = document.getElementById(conf_imageflow);
	img_div = document.getElementById(conf_images);
	scrollbar_div = document.getElementById(conf_scrollbar);
	slider_div = document.getElementById(conf_slider);
	caption_div = document.getElementById(conf_captions);

	/* Cache global variables, that only change on refresh */
	images_width = img_div.offsetWidth;
	images_top = imageflow_div.offsetTop;
	images_left = imageflow_div.offsetLeft;
	max_conf_focus = conf_focus * xstep;
	size = images_width * 0.5;
	scrollbar_width = images_width * 0.6;
	conf_slider_width = conf_slider_width * 0.5;
	max_height = images_width * 0.51;

	/* Change imageflow div properties */
	imageflow_div.style.height = max_height + 'px';

	/* Change images div properties */
	img_div.style.height = images_width * 0.338 + 'px';

	/* Change captions div properties */
	caption_div.style.width = images_width + 'px';
	caption_div.style.marginTop = images_width * 0.03 + 'px';

	/* Change scrollbar div properties */
	scrollbar_div.style.marginTop = images_width * 0.02 + 'px';
	scrollbar_div.style.marginLeft = images_width * 0.2 + 'px';
	scrollbar_div.style.width = scrollbar_width + 'px';
	
	/* Set slider attributes */
	slider_div.onmousedown = function () { dragstart(this); };
	slider_div.style.cursor = conf_slider_cursor;

	/* Cache EVERYTHING! */
	max = img_div.childNodes.length;
	var i = 0;
	for (var index = 0; index < max; index++)
	{ 
		var image = img_div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			array_images[i] = index;
			
			/* Set image onclick by adding i and x_pos as attributes! */
			image.onclick = function() { glideTo(this.x_pos, this.i); }
			image.x_pos = (-i * xstep);
			image.i = i;
			
			/* Add width and height as attributes ONLY once onload */
			if(onload == true)
			{
				image.w = image.width;
				image.h = image.height;
			}

			/* Check source image format. Get image height minus reflection height! */
			switch ((image.w + 1) > (image.h / (conf_reflection_p + 1))) 
			{
				/* Landscape format */
				case true:
					image.pc = 118;
					break;

				/* Portrait and square format */
				default:
					image.pc = 100;
					break;
			}

			/* Set ondblclick event */
			image.url = image.getAttribute('longdesc');
			image.ondblclick = function() { document.location = this.url; }

			/* Set image cursor type */
			image.style.cursor = conf_images_cursor;

			i++;
		}
	}
	max = array_images.length;

	/* Display images in current order */
	moveTo(current);
	glideTo(current, caption_id);
}

/* Show/hide element functions */
function show(id)
{
	var element = document.getElementById(id);
	element.style.visibility = 'visible';
}
function hide(id)
{
	var element = document.getElementById(id);
	element.style.visibility = 'hidden';
	element.style.display = 'none';
}

/* Hide loading bar, show content and initialize mouse event listening after loading */
window.onload = function()
{
	if(document.getElementById(conf_imageflow))
	{
		hide(conf_loading);
		refresh(true);
		show(conf_images);
		show(conf_scrollbar);
		initMouseWheel();
		initMouseDrag();
	}
}

/* Refresh ImageFlow on window resize */
window.onresize = function()
{
	if(document.getElementById(conf_imageflow)) refresh();
}

/* Fixes the back button issue */
window.onunload = function()
{
  document = null;
}


/* Handle the wheel angle change (delta) of the mouse wheel */
function handle(delta)
{
	var change = false;
	switch (delta > 0)
	{
		case true:
			if(caption_id >= 1)
			{
				target = target + xstep;
				new_caption_id = caption_id - 1;
				change = true;
			}
			break;

		default:
			if(caption_id < (max-1))
			{
				target = target - xstep;
				new_caption_id = caption_id + 1;
				change = true;
			}
			break;
	}

	/* Glide to next (mouse wheel down) / previous (mouse wheel up) image */
	if (change == true)
	{
		glideTo(target, new_caption_id);
	}
}

/* Event handler for mouse wheel event */
function wheel(event)
{
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta)
	{
		delta = event.wheelDelta / 120;
	}
	else if (event.detail)
	{
		delta = -event.detail / 3;
	}
	if (delta) handle(delta);
	if (event.preventDefault) event.preventDefault();
	event.returnValue = false;
}

/* Initialize mouse wheel event listener */
function initMouseWheel()
{
	if(window.addEventListener) imageflow_div.addEventListener('DOMMouseScroll', wheel, false);
	imageflow_div.onmousewheel = wheel;
}

/* This function is called to drag an object (= slider div) */
function dragstart(element)
{
	dragobject = element;
	dragx = posx - dragobject.offsetLeft + new_slider_pos;
}

/* This function is called to stop dragging an object */
function dragstop()
{
	dragobject = null;
	dragging = false;
}

/* This function is called on mouse movement and moves an object (= slider div) on user action */
function drag(e)
{
	posx = document.all ? window.event.clientX : e.pageX;
	if(dragobject != null)
	{
		dragging = true;
		new_posx = (posx - dragx) + conf_slider_width;

		/* Make sure, that the slider is moved in proper relation to previous movements by the glideTo function */
		if(new_posx < ( - new_slider_pos)) new_posx = - new_slider_pos;
		if(new_posx > (scrollbar_width - new_slider_pos)) new_posx = scrollbar_width - new_slider_pos;
		
		var slider_pos = (new_posx + new_slider_pos);
		var step_width = slider_pos / ((scrollbar_width) / (max-1));
		var image_number = Math.round(step_width);
		var new_target = (image_number) * -xstep;
		var new_caption_id = image_number;

		dragobject.style.left = new_posx + 'px';
		glideTo(new_target, new_caption_id);
	}
}

/* Initialize mouse event listener */
function initMouseDrag()
{
	document.onmousemove = drag;
	document.onmouseup = dragstop;

	/* Avoid text and image selection while dragging  */
	document.onselectstart = function () 
	{
		if (dragging == true)
		{
			return false;
		}
		else
		{
			return true;
		}
	}
}

function getKeyCode(event)
{
	event = event || window.event;
	return event.keyCode;
}

document.onkeydown = function(event)
{
	var charCode  = getKeyCode(event);
	switch (charCode)
	{
		/* Right arrow key */
		case 39:
			handle(-1);
			break;
		
		/* Left arrow key */
		case 37:
			handle(1);
			break;
	}
}

and this is the html,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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 language="JavaScript" type="text/javascript" src="imageflow.js"></script></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="reflect.php?img=images/backdrop.jpg" longdesc="images/backdrop.jpg" alt="" />
<img src="reflect.php?img=images/background.jpg" longdesc="images/background.jpg" alt="" />
<img src="reflect.php?img=images/camera 012.jpg" longdesc="images/camera 012.jpg" alt="" />
<img src="reflect.php?img=images/camera 014.jpg" longdesc="images/camera 014.jpg" alt="g" />
<img src="reflect.php?img=images/camera 015.jpg" longdesc="images/camera 015.jpg" alt="" />
<img src="reflect.php?img=images/camera 016.jpg" longdesc="images/camera 016.jpg" alt="" />
<img src="reflect.php?img=images/camera 019.jpg" longdesc="images/camera 019.jpg" alt="" />
<img src="reflect.php?img=images/camera 020.jpg" longdesc="images/camera 020.jpg" alt="" />
<img src="reflect.php?img=images/camera 021.jpg" longdesc="images/camera 021.jpg" alt="" />
<img src="reflect.php?img=images/camera 025.jpg" longdesc="images/camera 025.jpg" alt="" />
<img src="reflect.php?img=images/camera 029.jpg" longdesc="images/camera 029.jpg" alt="" />
<img src="reflect.php?img=images/camera 030.jpg" longdesc="images/camera 030.jpg" alt="" />
<img src="reflect.php?img=images/camera 031.jpg" longdesc="images/camera 031.jpg" alt="" />
<img src="reflect.php?img=images/camera 033.jpg" longdesc="images/camera 033.jpg" alt="" />
<img src="reflect.php?img=images/camera 034 copy.jpg" longdesc="images/camera 034 copy.jpg" alt="" />
<img src="reflect.php?img=images/camera 034.jpg" longdesc="images/camera 034.jpg" alt="" />
<img src="reflect.php?img=images/camera 042.jpg" longdesc="images/camera 042.jpg" alt="" />
<img src="reflect.php?img=images/camera 044.jpg" longdesc="images/camera 044.jpg" alt="" />

   </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:272px;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>

I really hope you can help me i am very stuck.
I'm learning slowly but shurely but it seems i am not even at a basic level yet .

Thank you , Thank you , Thank you .:-/

Member Avatar for essential

Here's the code that you need!
Note:
Javascript function()'s performs different action, depending on how you will declare them!
As of this case we wil just create another fuction() that will load images into your iframe. Depending on which images' wil be clicked!
If this solve your issue.
Kindly marked this thread solve or if you think i deserve some reputation points' for this 1, just add it up. And i will be greatfull to thank you for that points'... Enjoy

<!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="reflect.php?img=images/backdrop.jpg" longdesc="images/backdrop.jpg" alt="" /> 
<img src="reflect.php?img=images/background.jpg" longdesc="images/background.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 012.jpg" longdesc="images/camera 012.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 014.jpg" longdesc="images/camera 014.jpg" alt="g" /> 
<img src="reflect.php?img=images/camera 015.jpg" longdesc="images/camera 015.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 016.jpg" longdesc="images/camera 016.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 019.jpg" longdesc="images/camera 019.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 020.jpg" longdesc="images/camera 020.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 021.jpg" longdesc="images/camera 021.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 025.jpg" longdesc="images/camera 025.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 029.jpg" longdesc="images/camera 029.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 030.jpg" longdesc="images/camera 030.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 031.jpg" longdesc="images/camera 031.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 033.jpg" longdesc="images/camera 033.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 034 copy.jpg" longdesc="images/camera 034copy.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 034.jpg" longdesc="images/camera 034.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 042.jpg" longdesc="images/camera 042.jpg" alt="" /> 
<img src="reflect.php?img=images/camera 044.jpg" longdesc="images/camera 044.jpg" alt="" /> 
</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:272px;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>

If you find any problem regarding this code. Just let me know... Good day to you!

Member Avatar for kookies

Hey Wow !
This is getting there now. I can click on a picture and it comes up inside the frame ! ! problem left to solve though the menu has shifted over to the right of the screen and is no longer useable although i can see the images and upon clicking them they do appear in the frame so your function works great !!!
I think it may be a problem with the container ? or could it be that the frames are overlapping perhaps ?
Nearly there now , Fantastic ! :)

Member Avatar for essential

The problem is i dont have the actual images that u have, so itl be hard 4 me to realign this! Am sure Things can be done from adding up some attribution to your stylesheets'. Good luck on your website.

Member Avatar for kookies

it seems to move everything when i move the code about , here's what ive got .

<!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>

its probably in the wrong places ? do you think ?

Member Avatar for essential

Am sure the css and html forum would be happy to help you on this this.
But you may try this instead!

<style type="text/css"> div#container { float: left; width: 800px; height: 600px; margin-top: -300px; margin-left: -400px; } </style>
Member Avatar for kookies

seeing as youve helped me so much so far would it be possible to email you a zip or rar of what i have ? its very simple , just one page with 4 small images ?

You are the first person i have found in 2 weeks that has given me any decent advice and help:)

Member Avatar for essential

Its my pleasure on helpin you! Y dont you try the css and html forum, regarding this 1!?

Member Avatar for kookies

Ok cool , will do , thanks again youve got me a step further to getting everything finished:)

Member Avatar for essential

We're talking about different issue now! So kindly marked this thread solved, and its ok even if u dont want to give any reps on this 1! Just start another thread on the css and html forum, so i can attend to your new issue. Tnx

Member Avatar for essential

We're talking about different issue now! So kindly marked this thread solved, and its ok even if u dont want to give any reps on this 1! Just start another thread regarding this new issue! Do it in the css and html section. Tnx

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.