Slideshow tabel

hendrikius · 22 jun 2006

Hallo iedereen,

Als ik een slideshow kopiëer en nogmaals op mijn site plaats, krijg ik steeds errors en werken geen van beiden meer.

Kan ik (b.v) 5 dezelfde slideshows nesten in een tabel???

Alvast bedankt...:thumb:

Hendrikius

peter vazed · 22 jun 2006

Je kunt deze meerdere keren gebruiken.
Evenwel zit je dan inderdaad met een groot probleem.

Wat is dat probleem?
In het script komen namen voor.
Deze namen zijn uniek.
Indien je dus twee maal hetzelfde script hebt werkt het niet meer.

Derhalve dien je ieder script te voorzien van unieke namen.
Dus eerst uitvogelen welke die namen zijn.
Dan kun je wel dezelfde naam gebruiken, doch dien je een letter toe te voegen.
Nu is de naam dus wederom uniek.
Wel deze gewijzigde naam ook aanpassen in de aanroep.

hendrikius · 22 jun 2006

?????

Bedoel je de namen die je zelf moet invullen of de img's die in de eerste slideshow staan?

Wat bedoel je met namen?

peter vazed · 22 jun 2006

hendrikius zei:
Bedoel je de namen die je zelf moet invullen of de img's die in de eerste slideshow staan?

Wat bedoel je met namen?

De namen welke in het script gebruikt worden.

Dus bij function en var
maar ook je plaatjesnamen waarschijnlijk.

Post anders het script.

hendrikius · 22 jun 2006

Hier is de gehele code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">

var speed=100
var size=15
var cf1="0"
var cf2="0"

function animate(){

var f1=new Array()
f1[1]="0"
f1[2]="15"
f1[3]="35"
f1[4]="55"
f1[5]="95"
f1[6]="100"
f1[7]="130"
f1[8]="140"
f1[9]="190"
f1[10]="230"
f1[11]="240"
f1[12]="256"
f1[13]="240"
f1[14]="220"
f1[15]="190"
f1[16]="120"
f1[17]="90"
f1[18]="70"
f1[19]="30"
f1[20]="10"
f1[21]="0"

var f2=new Array()
f2[1]="0"
f2[2]="15"
f2[3]="35"
f2[4]="55"
f2[5]="75"
f2[6]="95"
f2[7]="100"

cf1=(cf1==21)?1:++cf1
cf2=(cf2==7)?1:++cf2

document.forms[0].menuBg.style.backgroundColor="rgb(256," + f1[cf1] + ",2)"
document.forms[0].menuBg.style.color="rgb(0," + f2[cf2] + ",256)"
document.forms[0].menuBg.style.fontWeight="bold"
document.forms[0].menuBg.style.fontSize=size
setTimeout("animate()",speed)

}
window.onload=animate
</script>

<style type="text/css">
marquee {letter-spacing: 3px}
</style>
<script type="text/javascript">
function previewImage()
{
tindex = document.f.colortheme.selectedIndex;
var previewImage = document.f.colortheme.options[tindex].value;
document.getElementById('PREVIEW').src = previewImage;
return false;
}
</script>

<style type="text/css">
body {background-color: gold}
h1 {font-size: 50}
h1 {color: red}
marquee {color: black}
</style>
<title>Sunweb Tours</title>
<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 1px solid black;
border-left-width: 0;
background-color: red;
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: orange;
border: 1px solid black;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: gold;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>
</head>
<body>
<form>
<SELECT name="menuBg" onchange="javascript:window.location=this.value">
<option value="http://www.websonic.nl">Last minutes</option>
<option value="http://www.websonic.nl">Istanboel - vanaf 290 euro</option>
<option value="http://www.websonic.nl">Costa Dorada - vanaf 240 euro</option>
<option value="http://www.websonic.nl">Alicante - vanaf 180 euro</option>
<option value="http://www.websonic.nl">Tunesië - vanaf 360 euro</option>
<option value="http://www.websonic.nl">Dublin - vanaf 88 euro</option>
<option value="http://www.websonic.nl">Albufeira - vanaf 210 euro</option>
<option value="http://www.websonic.nl">Aberdeen - vanaf 121 euro</option>
</select>
</form>

<h1 align="center" h1 direction=up">Sunweb Tours</h1>
<p>
<marquee>Welkom... op de website van.... Sunweb Tours....de beste.....goedkoopste.....grootste.....reisbureau.....van...België...Laat...uw... e-mail... adres... achter... als... u... wekelijks... de...allerlaatste...Last Minutes...wilt...ontvangen...</marquee>
<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---SPANJE---</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Ibiza</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Mallorca</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">Costa Brava</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">Benidorm</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">Costa del Sol</a></li>
<li><a href="http://javascriptkit.com/">Ibiza</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Costa Dorada</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">Gran Canaria</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">Costa Blanca</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">Tenerife</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---GRIEKENLAND---</a></div>
<ul class="submenus" style="width: 10em">
<li><a href="">Kreta</a></li>
<li><a href="">Samos</a></li>
<li><a href="">Rhodos</a></li>
<li><a href="">Athene</a></li>
<li><a href="">Saliniki</a></li>
<li><a href="">Gnossos</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---ITALIË---</a></div>
<ul class="submenus">
<li><a href="">Venetië</a></li>
<li><a href="">Rome</a></li>
<li><a href="">Sicilië</a></li>
<li><a href="">Toscane</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---PORTUGAL---</a></div>
<ul class="submenus" style="width: 11em">
<li><a href="">Albufeira</a></li>
<li><a href="">Alvor</a></li>
<li><a href="">Armaçao</a></li>
<li><a href="">Carvoeiero</a></li>
<li><a href="">Lagos</a></li>
<li><a href="">Praia da Luz</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---TURKIJE---</a></div>
<ul class="submenus" style="width: 11em">
<li><a href="">Bitez</a></li>
<li><a href="">Gümbet</a></li>
<li><a href="">Kusadasi</a></li>
<li><a href="">Alanya</a></li>
<li><a href="">Antalya</a></li>
<li><a href="">Kemer</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---TUNESIË---</a></div>
<ul class="submenus" style="width: 11em">
<li><a href="">Djerba</a></li>
<li><a href="">Hammamet</a></li>
<li><a href="">Monastir</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---EILANDEN---</a></div>
<ul class="submenus" style="width: 9em">
<li><a href="">Caribië</a></li>
<li><a href="">Hono***u</a></li>
<li><a href="">Hawaï</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">---AZIË---</a></div>
<ul class="submenus" style="width: 8em">
<li><a href="">Thailand</a></li>
<li><a href="">Sri Lanka</a></li>
<li><a href="">Bombay</a></li>
</ul>
</li>
</ul>

<left><marquee direction="up" scrollAmount='2' style="width:'125';height:'40'">
Opgelet! Vlucht Zavemtem - Samos werd met één uur vertraagd<p>Vlucht Luik - Alicante werd geannuleerd...Alle passagiers met deze bestemming kunnen de eerstvolgende trein naar Alicante nemen via Milaan
</marquee>
<div id="clearmenu" style="clear: left"></div>

<p style="font: normal 11px Arial"><br />
<a href="http://www.javascriptkit.com"></a></p>
<h3 align="center">Mallorca/Hotel Ima Plaza</h3>
<table border="1" bgcolor="red" align="center">
<tr>
<td>
<form method="post" name="f" id="f">
<select name="colortheme" id="colortheme" onChange="previewImage()" size="4">
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19006.jpg">Zwembad
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19007.jpg">Hotel
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16898.jpg">Slaakkamer
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16897.jpg">Bar
</select>
</form>
</td>
<td valign="center" width="300" align="center"><img src="image40/begin.gif" border="0" id="PREVIEW" alt="preview image"/></td>
</tr>
</table>
<p align="center">
Fraai vernieuwd hotel. Modern en bezit alle comfort voor een aangename en relaxe vakantie
</p>
<p>
<table align="center">
<ul>
<li>Overdekt zwembad</li>
<li>Ruime bar</li>
<li>Luxe restaurant</li>
<li>Aparte Kinderkamers</li>
<li>Sauna en Turks bad</li>
<li>Luxe hotelkamer</li>
</ul>
</table>

</body>
</html>

peter vazed · 22 jun 2006

Hier heb je de twee scripts:

PHP:

<script type="text/javascript">
function previewImage()
{
tindex = document.f.colortheme.selectedIndex;
var previewImage = document.f.colortheme.options[tindex].value;
document.getElementById('PREVIEW').src = previewImage;
return false;
}
</script>

<script type="text/javascript">
function previewImage1()
{
tindex = document.f1.colortheme1.selectedIndex;
var previewImage1 = document.f1.colortheme1.options[tindex].value;
document.getElementById('PREVIEW1').src = previewImage1;
return false;
}
</script>

en de code in de tabel:

PHP:

<td>
<form method="post" name="f" id="f">
<select name="colortheme" id="colortheme" onChange="previewImage()" size="4">
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19006.jpg">Zwembad
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19007.jpg">Hotel
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16898.jpg">Slaakkamer
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16897.jpg">Bar
</select>
</form>
<br>

<form method="post" name="f1" id="f1">
<select name="colortheme1" id="colortheme1" onChange="previewImage1()" size="4">
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19006.jpg">Zwembad-1
<option value="http://www.sunweb.be/images/accommodaties/Plaatje19007.jpg">Hotel-1
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16898.jpg">Slaakkamer-1
<option value="http://www.sunweb.be/images/accommodaties/Plaatje16897.jpg">Bar-1
</select>
</form>
</td>

Zoals je ziet: wat uniek moet zijn moet je aanpassen.
Bij de unieke namen heb ik gewoon een 1 er achter gezet.

hendrikius · 22 jun 2006

Werkt niet!

Sorry,

Maar jouw script werkt niet, ik krijg nog steeds errors.

Toch bedankt.

Hendrikius

peter vazed · 22 jun 2006

hendrikius zei:
Sorry,

Maar jouw script werkt niet, ik krijg nog steeds errors.

Toch bedankt.

Hendrikius

Wat nou: niet werken.
In Arachniphilia werkt het in IE view wel.
Ook in FF nadat ik de file had opgeslagen geen probleem.

Dus................
link in IE gezet: grf#rhy@&j

Yep, werkt niet.
Geen errors, doch wel een melding van gevaarlijke dinges.
Ook de style werkte niet van het puldown menu.
Maar door bovenin de browser te klikken dat ik het toesta, werkt het wel.

Even online gezet:
http://www.zeepoort.nl/tesje/hendrikius.html
Kijk even of je nu ook errors krijgt.

Dus de conclusie:
bekijk je ontwerpen in IE en FF

hendrikius · 23 jun 2006

Verwijderen

Oké,

Bedankt.

Maar wil je het nu van het net halen.

Ik gebruik namelijk foto's die niet van mij zijn.

P.S Het werkt inderdaad, maar nu plakken de 3 slideshows aan elkaar.

Kan ik ze ook apart plaatsen? En hoe doe ik dat dan, lukt me niet tot nu toe.

Bedankt voor je hulp en steun.

Hendrikius

peter vazed · 23 jun 2006

hendrikius zei:
Oké,

Het werkt inderdaad, maar nu plakken de 3 slideshows aan elkaar.

Kan ik ze ook apart plaatsen? En hoe doe ik dat dan, lukt me niet tot nu toe.

Gewoon:
een nieuwe tabel aanmaken.
In iedere cel een show zetten.

////

http://www.zeepoort.nl/tesje/hendrikius.html

even 4 stuks gemaakt,
tevens logo opgeduikeld en achtergrond gekozen.

Ziet er gelijk een stuk frisser uit.

hendrikius · 28 jun 2006

Slideshow

Sorry,

Was een weekje in verlof.

Bedankt Peter,

Hier ben ik iets mee.

With kind regards

Hendrikius

Slideshow tabel

hendrikius

Gebruiker

peter vazed

Meubilair

hendrikius

Gebruiker

peter vazed

Meubilair

hendrikius

Gebruiker

peter vazed

Meubilair

hendrikius

Gebruiker

peter vazed

Meubilair

hendrikius

Gebruiker

peter vazed

Meubilair

hendrikius

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy