Menu
Community /Pin to ProfileBookmark
@cootheadDec 13.2006 — #Hi there alincheto,
and a warm welcome to these forums. ?
Have a look at this example, it may suit your requirements...
[i]coothead[/i]
How do I make an Image browser + embed it in an .html page?
Hi -Pls help. My background is all design not much development. I know there must be a way to do this.
All I want to do is to make an html page with 2 frames (or even just 2 rows of a table it possible), one of which will be used as an image browser and the other will contain Previous/ Next buttons which will control the image.
I want the buttons to call individual .jpg images into the browser one at a time, without them having to all be loaded at once (to minimize waiting time for user). The images will all be named in a 01.jpg, 02.jpg, 03.jpg format and I want the button to call them automatically without having to specify which image it should call everytime.
When the last image has been loaded, the Next button should become inactive. When only the first image has been loaded (starting page) the Previous button should also be inactive.
This browser is to be uploaded onto a site where I have no access or control to server settings. Ideally running the page and calling the images from a specified image folder are all the means I have.
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadDec 13.2006 — #Hi there alincheto,and a warm welcome to these forums. ?
Have a look at this example, it may suit your requirements...
[color=navy]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>image viewer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://mysite.orange.co.uk/azygous/">
<style type="text/css">
#imgcontainer {
height:600px;
width:760px;
background-color:#eef;
background-image:url(images/ball_shad.jpg);
background-repeat:no-repeat;
background-position:center center;
border:3px double #999;
border-bottom:0 double #999;
text-align:center;
margin:auto;
}
#buttoncontainer {
width:760px;
background-color:#ccc;
border:3px double #999;
border-top:1px solid #999;
margin:auto;
}
#buttoncontainer:after {
content:"";
display:block;
clear:both;
}
#next {
float:left;
margin:10px 0 10px 40px;
}
#prev {
float:right;
margin:10px 40px 10px 0;
}
</style>
<script type="text/javascript">
var pics=new Array();
pics[0]='images/ball_shad.jpg';
pics[1]='images/dog.jpg';
pics[2]='images/girl.jpg';
pics[3]='images/ten_quid.jpg';
pics[4]='images/buddha1.jpg';
pics[5]='images/clouds.jpg';
pics[6]='images/grap.jpg';
var c=0;
var obj1,obj2,obj3;
window.onload=function() {
obj1=document.getElementById('next');
obj2=document.getElementById('prev');
obj3=document.getElementById('imgcontainer');
obj2.disabled=true;
obj1.onclick=function(){
if(c<pics.length){
obj1.disabled=false;
obj2.disabled=false;
c++;
obj3.style.backgroundImage='url('+pics[c]+')';
}
if(c==pics.length-1){
obj1.disabled=true;}
}
obj2.onclick=function(){
if(c>0){
obj1.disabled=false;
obj2.disabled=false;
c--;
obj3.style.backgroundImage='url('+pics[c]+')';
}
if(c==0){
obj2.disabled=true;
}
}
}
</script>
</head>
<body>
<div id="imgcontainer"></div>
<div id="buttoncontainer">
<input id="next" type="button" value="next"/>
<input id="prev" type="button" value="previous"/>
</div>
</body>
</html>
[/color][i]coothead[/i]