Foutje..?

Status
Niet open voor verdere reacties.
-Anne-

-Anne-

Gebruiker
Lid geworden
30 apr 2007
Berichten
15
Ik probeer een website te maken, waarin in vele foto's laat zien. De bedoeling is zoiets als hier: http://home.hetnet.nl/~bleijhouben/anne/anne.htm
Dus als je op foto 2 ziet zie je foto 2 verschijnen.
Dit wilde ik dus ook doen en heb onderstaande codes gebruikt:
Alleen nu krijg ik dus de 'foto viewer' niet in de pixels 400x300, weet iemand waar de fout zit? Of doe ik iets verkeerds?
Zo krijg ik 'm dan: http://home.hetnet.nl/~bleijhouben/site/foto/home.htm
Bij Firefox werkt t al helemaal niet :(

Ik wil namelijk veel foto's laten zien, zonder dat iedereen de hele tijd moet scrollen... En het moet wél overzichtelijk blijven... (of weet iemand misschien een code zodat je eerst alle foto's zo rond de 100 of 75 pixels ziet, langste zijde, en dan als je er op klikt je ze in t groot ziet?)

Alvast bedankt!

Anne

P.S. Hier de code, hij is wel erg lang!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="nl" xml:lang="nl" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta http-equiv="Content-Language" content="nl"/>
   <title>windhondensite</title>
   <link rel="shortcut icon" href="/favicon.ico"/>
<style style="text/css">
/* Begin predefined properties */
html, body {
   height: 100%;
}

.product {
   margin: 0px;
   padding: 0px;
   text-align: center;
}

.product .header {
   line-height: 55px;
   margin: 15px 0 0 0;
   padding: 15px 12px 15px 12px;
}

.product .menu {
   min-height: 45px;
   margin: 0 0 15px 0;
   padding: 0;
   list-style: none;
}

*html .product .menu {
   height: 45px;
}

.product .menu:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

.product .menu li {
   display: inline;
}

.product .menu li a {
   margin: 0 10px 0 10px;
   line-height: 25px;
   line-height: 45px;
   white-space: nowrap;
}

.product .content {
   clear: left;
   width: 740px;
   margin: 0 auto 20px auto;
   text-align: left;
}

.product .content .column {
   padding: 20px;
}

.product .content h2 {
   margin: 0px 0px 10px 0px;
}

.product .content h3 {
   margin: 0px 0px 10px 0px;
}

.product .content img {
   margin: 4px 10px 0px 0px;
}

.product .content .separator {
   clear: left;
   overflow: hidden;
   height: 12px;
   margin-top: 12px;
   margin-bottom: 10px;
   background-repeat: repeat-x;
}

.product .content p {
   margin: 0px 0px 16px 0px;
}

.product .content .rss h3 a {
   font-size: 100%;
}

.product .content .rss img {
   border: none;
   margin: 0px 0px 8px 0px;
}

.product .content .rss .item {
   clear: left;
}

.product .content .rss .item a {
   display: block;
}

.product .banners {
   position: absolute;
   width: 700px;
   margin-top: 12px;
   text-align: center;
}

.product .banners .weboverview {
   display: block;
   width: 160px;
   height: 39px;
   margin: 16px auto 0px auto;
   background: #6686C3;
}

.product .banners .weboverview span {
   display: url(http://home.hetnet.nl/~bleijhouben/site/banner.jpg) no-repeat;
}

.product .banners .counter {
   width: 98px;
   height: 18px;
   margin: 16px auto 0px auto;
   padding: 15px 0px 0px 2px;
   background: #6686C3;
   text-align: center;
   font-family: Arial;
   font-size: 9px;
   letter-spacing: 5px;
   color: #6E8BC3;
}

.product .content pre {
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
   word-wrap: break-word;
}

.product .content input {
   font-size: 100%;
}

.product .content textarea {
   font-size: 100%;
}

.product .content select {
   font-size: 100%;
}

.product form {
   margin: 0px;
   padding: 0px;
}

.product .break {
   clear: left;
   height: 1px;
   overflow: auto;
   visibility: hidden;
}

.product#startpage .header {
   display: none;
}

.product#startpage .menu {
   display: none;
}

.product#startpage .content {
   margin-top: 50px;
}

.product#startpage h2 {
   text-align: center;
}

.product#startpage p {
   text-align: center;
}

.product#formpage .content .form {
   padding-top: 10px;
}

.product#formpage .content#inline .form .items .item .label {
   margin-bottom: 10px;
}

.product#formpage .content#inline .form .items .item .input {
   margin-bottom: 10px;
}

.product#formpage .content#inline .form .items .item .label {
   clear: left;
   float: left;
   width: 150px;
}

.product#formpage .content#inline .form .items .item .input {
   display: inline; /*IE double margin fix*/
   float: left;
   margin-left: 10px;
}

.product#formpage .content#inline .form .items .item .input input.text {
   width: 200px;
}

.product#formpage .content#inline .form .items .item .input textarea {
   width: 200px;
   height: 100px;
}

.product#formpage .content#inline .form .submit {
   margin-top: 8px;
}

.product#formpage .content#block .form .items .item {
   margin-bottom: 12px;
}

.product#formpage .content#block .form .items .item .label {
   margin-bottom: 6px;
}

.product#formpage .content#block .form .items .item .input input.text {
   width: 300px;
}

.product#formpage .content#block .form .items .item .input textarea {
   width: 300px;
   height: 100px;
}

.product#formpage .content#block .form .submit {
   margin-top: 8px;
}
/* End predefined properties */

/* Begin user defined properties */
.product {
background-color: #5D7CBC;
background-image: none;
background-position: center top;
background-repeat: repeat-x;
}

.product .header {
background-color: #ECF0F9;
background-image: none;
background-position: center center;
background-repeat: repeat-x;
border-color: #5D7CBC;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #FFFFFF;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
font-size: 30px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .menu {
background-color: #C8D4EA;
background-image: none;
background-position: center top;
background-repeat: repeat;
border-color: #000000;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}

.product .menu li a {
background-color: #C8D4EA;
background-image: none;
background-position: left top;
background-repeat: no-repeat;
border-color: #5D7CBC; 
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
color: #000000;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .menu li a.active {
background-color: #C8D4EA; 
background-image: none;
background-position: left top;
background-repeat: no-repeat;
border-color: #C8D4EA;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
color: #2C4880;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
font-size: 18px;
font-weight: Normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .content {
background-color: #5D7CBC;
background-image: none;
background-position: left top;
background-repeat: no-repeat;
border-color: #000000;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #FFFFFF;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
font-size: 12px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .content pre {
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
}

.product .content input {
font-family:'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif' ;
}

.product .content textarea {
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
}

.product .content select {
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
}

.product .content img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

.product .content a {
color: #FFFFFF;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';  
font-size: 14px;
font-weight: bold;
font-style: normal;
text-decoration: normal;
text-transform: none;
}

.product .content a:visited {
color: #FFFFFF;
font-style: normal;
text-decoration: normal;
}

.product .content a:hover {
color: #FFFFFF;
font-style: normal;
text-decoration: underline;
}

.product .content a:active {
color: #FFFFFF;
font-style: normal;
text-decoration: underline;
}

.product .content h1 {
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .content h2 {
color: #FFFFFF;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif';
font-size: 16px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .content h3 {
color: #FFFFFF;
font-family: 'Futura Light BT', 'Century Gothic', 'Tahoma', 'Arial', 'sans-serif' ;
font-size: 14px;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: none;
}

.product .content .separator {
background-image: url(http://home.hetnet.nl/~bleijhouben/site/streep.jpg);
}

.product .content ul {
list-style-image: none;
list-style-type: none;
}

/* End user defined properties */

</style>
<script type="text/javascript" src="http://windhonden.websitemaker.nl:80/ScriptProvider/js/global.js"></script>
</head>

<body id="newspage" class="product">
 <div class="wrapper">
      
      <div class="container">
<ul class="menu"><li id="item0"><a href="http://home.hetnet.nl/~bleijhouben/site/foto/home.htm" class="active">Home</a></li>
<a href="http://www.windhonden.6x.to">Terug naar de Windhondenwebsite</a>
<a href="http://www.windhondenforum.6x.to">Forum</a>
</ul>

 <font size="4" face="Futura Light BT , century gothic , times new roman" color="#FFFFFF"><br><br>
Dit is het foto onderdeel van de website <a href="www.windhonden.6x.to">www.windhonden.6x.to
</a><br>
Hier zullen vele verschillende foto's worden geplaatst, maar wel allemaal van windhonden.<br>
Dit kan dus variëren van foto's van Gunda, Tibbie en Spriet tot foto's van renwedstrijden, hondenshows en windhondenwandelingen.<br>
</font>
<script language=javascript>


	bilder			= new Array("http://i39.photobucket.com/albums/e179/Bubbel666/wandeling/wh7.jpg","http://i39.photobucket.com/albums/e179/Bubbel666/windhonden/gs2.jpg","http://i39.photobucket.com/albums/e179/Bubbel666/windhonden/Aprilzwemmen6.jpg","http://home.hetnet.nl/~bleijhouben/anne/1.jpg","http://home.hetnet.nl/~bleijhouben/anne/2.jpg","http://home.hetnet.nl/~bleijhouben/anne/test.jpg");  // naam van plaatjes

	/**************************************************/

	rahmenBreite		= 400; 		// de breedte van dit raam is dezelfde als het plaatje
	rahmenHoehe		= 300; 		// de hoogte van dit raam is dezelfde als het plaatje
	rahmenRand		= 2;             //breedte rand
	rahmenStil		= "solid";       // stijl
	rahmenFarbe		= "000000";  // kleur rand
	rahmenHintergrundFarbe	= "4B4B4B"; // achtergrond kleur tabel

	schriftArt		= "Century Gothic";       // lettertype
	schriftFarbe		= "FFFFFF";    // letterkleur
	schriftGroesse		= 3;     // styl letters grootte

	trennZeichen		= "-";		   // teken tussen de links

	srollVarianten		=1; 		// 0 = plaatjes gaan van onderen naar boven, 1 = van rechts naar links

/*********************************************************/

	document.write("<center>"
	+"<div id='rahmen' style='width:"
	+(rahmenBreite+40)+"; height:"
	+(rahmenHoehe+40)+"; border:"
	+rahmenRand+"px "
	+rahmenStil+" #"
	+rahmenFarbe+"; background-color:#"
	+rahmenHintergrundFarbe+";overflow:hidden'>");

	(srollVarianten==0) ?
	document.write("<div id='jumper' style='position:relative;top:18;left:0'>") :
	document.write("<div id='jumper' style='position:relative;left:18;top:18'>");

	(srollVarianten==0) ?
	document.write("<table width="
	+rahmenBreite+" cellspacing=0 cellpadding=0>") :
	document.write("<table height="
	+rahmenHoehe+" cellspacing=0 cellpadding=0>");

for (i=0;i<bilder.length;i++)
{
	(srollVarianten==0) ?
	document.write("<tr><td width="
	+rahmenBreite+" height="
	+rahmenHoehe+">") :
	document.write("<td width="
	+rahmenBreite+" height="
	+rahmenHoehe+">");

	(srollVarianten==0) ?
	document.write("<img src="+bilder[i]+"></td></tr>"
	+"<tr><td height=25></td></tr>") :
	document.write("<img src="+bilder[i]+"></td>"
	+"<td><div style='width:25'></div></td>");
}

	document.write("</table></div></div><br>");

for (i = 0; i < bilder.length; i++)
{
	if (i == bilder.length-1) trennZeichen = "";
	(srollVarianten==0) ?
	(i == 0) ? posY = 0 : posY = (rahmenHoehe*i)+(25*i) :
	(i == 0) ? posY = 0 : posY = (rahmenBreite*i)+(25*i);

	document.write("<a href='javascript:getPos("
	+posY+")' onfocus='this.blur()' style='text-decoration:none'><font size="
	+schriftGroesse+" color="
	+schriftFarbe+" face="
	+schriftArt+">Foto"+(i+1)+"</font></a>"
	+"<font style='cursor:default'> "
	+trennZeichen+" </font>");
}

	document.write("</center>");

var thePos=dimx=Dimx=0,time;

function getPos(pos)
{
	thePos 	= pos-(pos*2)+18;

	browser	= navigator.appName;
	usAgent = navigator.userAgent;

	if (browser == "Microsoft Internet Explorer" || usAgent.indexOf("Opera") >- 1) 
	clearTimeout(time);

	dmx();
}
function dmx()
{
	time 	= setTimeout("dmx()",0);

	dimx 	= Math.round(Dimx+=((thePos)-Dimx)*4/20);

	if (document.getElementById)
	{
		(srollVarianten==0) ?
		document.getElementById("jumper").style.top  = dimx :
		document.getElementById("jumper").style.left = dimx;
	}
	else if (document.all)
	{
		(srollVarianten==0) ?
		document.all["jumper"].style.top  = dimx :
		document.all["jumper"].style.left = dimx;
	}

	if (thePos == dimx) clearTimeout(time);
}
</script>

</body></html>
 
Laatst bewerkt door een moderator:
Anne,
Ga naar de volgende link:http://jalbum.net/download/ en download JAlbum
daar kan je mee slide shows maken in alle vormen en maten, alleen moet je even de tijd nemen om het programma een beetje onder de knie krijgen eens dat voorbij kan je er ongeveer alles mee doen zelf een copyright in je fotos zetten.
Ik werk er mee voor al mijn fotoalbums. Een vb kan je zien op www.defietser.net en dan Foto Albums er staan 4 slideshow in.
groetjes
defietser
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan