Help a.u.b.

eastern · 13 apr 2007

Hallo Allemaal,

Waarschijnlijk een simpel probleem maar niet voor mij.
Begin net met dit, dus vandaar.

Hier een script met een layer (mijnlayer) die tevoorschijn komt als je met mouseOver op Pic1 gaat.
Nu mijn vraag hoe kan je de andere layer (mijn layer1) tevoorschijn halen als je met mouseOver op Pic2 gaat?

Bij voorbaat heel erg bedankt!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>DHTML Test</title>
<script language="JavaScript">

function getStyle( layer ) {
	if( document.getElementById ) {
		return document.getElementById( layer ).style
	} else if( document.all ) {
		return document.all[layer].style
	} else {
		return document[layer]
	}
}

xpositie = -490
klokje = null

function heen() {
	if ( xpositie < 10 ) {
		xpositie = xpositie + 5
		getStyle('mijnlayer').left = xpositie
		klokje = setTimeout( 'heen()', 10 )
	}
}
function terug() {
	if ( xpositie > -515 ) {
		xpositie = xpositie - 5
		getStyle('mijnlayer').left = xpositie
		klokje = setTimeout( 'terug()', 10 )
	}
}
function stop() {
	clearTimeout( klokje )
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
h3 {
	font-weight: normal;
	padding:5px;
	width: 250px;
	margin:3px;
	padding: 5px;
	font-size: 12px;
}
	
#mijnlayer {
	position: absolute;
	top: 390px;
	left: -600px;
	width: 500px;
	height: 160px;
	background-color: #FFFFFF;
	border: 2px solid #FF0000;
	padding: 5px;
	color:#333333;
	text-align:justify;
	font-size: 11px;	
}
#mijnlayer1 {
	position: absolute;
	top: 390px;
	left: -600px;
	width: 500px;
	height: 160px;
	background-color: #FFFFFF;
	padding: 5px;
	color:#333333;
	text-align:justify;
	font-size: 11px;	
}

-->
</style></head>

<body>

<p>&nbsp;</p>
<table width="60%" border="0" align="center">
  <tr>
    <td width="50">Pic1<a href="javascript:;" onMouseOver="stop();heen()" 		onMouseOut="stop();terug()"><img src="images/lnk.jpg" alt="pic" width="31" height="21" border="0"></a></td>

          <td width="50">Pic2<a href="javascript:;"><img src="images/lnk.jpg" alt="pic2" width="31" height="21" border="0"></a></td>
          <td>Met Mouseover op Pic1 zal er aan de linkerkant een tekstkader verschijnen 
          die naar rechts beweegt. Met Mouseout zal deze teruggaan. </td>
  </tr>
		</table>
      <div id="mijnlayer"> 
        moving layer
</div>
	  <div id="mijnlayer1"> 
        tweede moving layer
      </div>
</td>
  </tr>
</body>
</html>

peter vazed · 14 apr 2007

Dit is niet zo moeilijk.
Even kijken hoe het script werkt.

Dan nogmaals het script gebruiken.
Evenwel de variabelen (function)
en bijbehorende waardes aanpassen.
Dus andere naam geven.

Dan werkt het.
Krijg je een foutmelding, dan heb je iets niet goed gedaan, of verkeerde naam gegeven.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>DHTML Test</title>
<script language="JavaScript">

function getStyle( layer ) {
if( document.getElementById ) {
return document.getElementById( layer ).style
} else if( document.all ) {
return document.all[layer].style
} else {
return document[layer]
}
}

xpositie = -490
klokje = null


function heen0() {
if ( xpositie < 10 ) {
xpositie = xpositie + 5
getStyle('mijnlayer0').left = xpositie
klokje = setTimeout( 'heen0()', 10 )
}
}
function terug0() {
if ( xpositie > -515 ) {
xpositie = xpositie - 5
getStyle('mijnlayer0').left = xpositie
klokje = setTimeout( 'terug0()', 10 )
}
}
function stop0() {
clearTimeout( klokje )
}


function heen1() {
if ( xpositie < 10 ) {
xpositie = xpositie + 5
getStyle('mijnlayer1').left = xpositie
klokje = setTimeout( 'heen1()', 10 )
}
}
function terug1() {
if ( xpositie > -515 ) {
xpositie = xpositie - 5
getStyle('mijnlayer1').left = xpositie
klokje = setTimeout( 'terug1()', 10 )
}
}
function stop1() {
clearTimeout( klokje )
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h3 {
font-weight: normal;
padding:5px;
width: 250px;
margin:3px;
padding: 5px;
font-size: 12px;
}

#mijnlayer0 {
position: absolute;
top: 390px;
left: -600px;
width: 500px;
height: 160px;
background-color: #c0c0c0;
border: 2px solid #FF0000;
padding: 5px;
color:#333333;
text-align:justify;
font-size: 11px;
}
#mijnlayer1 {
position: absolute;
top: 390px;
left: -600px;
width: 500px;
height: 160px;
background-color: #e4e0c9;
padding: 5px;
color:#333333;
text-align:justify;
font-size: 11px;
}

-->
</style></head>

<body>

<p>&nbsp;</p>
<table width="60%" border="0" align="center">
<tr>
<td width="50">Pic1<a href="javascript:;" onMouseOver="stop0();heen0()" onMouseOut="stop0();terug0()"><img src="images/lnk.jpg" alt="pic0" width="31" height="21" border="0"></a></td>

<td width="50">Pic2<a href="javascript:;" onMouseOver="stop1();heen1()" onMouseOut="stop1();terug1()"><img src="images/lnk.jpg" alt="pic1" width="31" height="21" border="0"></a></td>
<td>Met Mouseover op Pic1 zal er aan de linkerkant een tekstkader verschijnen
die naar rechts beweegt. Met Mouseout zal deze teruggaan. </td>
</tr>
</table>
<div id="mijnlayer0">
moving layer
</div>
<div id="mijnlayer1">
tweede moving layer
</div>
</td>
</tr>
</body>
</html>

eastern · 14 apr 2007

Hallo Peter,

Bedankt voor je reactie,

Ik snap er niet veel van.
Zie de veranderingen die je hebt gemaakt maar.......
Stel dat ik 10 Layers wil gebruiken moet ik dan 10x het script plaatsen?
Met een beetje zoeken lees ik dat je variabelen kan maken????
Wil je me dat misschien uitleggen.
Misschien dat ik het dan beter begrijp.

Bedankt!

peter vazed zei:

Dit is niet zo moeilijk.
Even kijken hoe het script werkt.

Dan nogmaals het script gebruiken.
Evenwel de variabelen (function)
en bijbehorende waardes aanpassen.
Dus andere naam geven.

Dan werkt het.
Krijg je een foutmelding, dan heb je iets niet goed gedaan, of verkeerde naam gegeven.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>DHTML Test</title>
<script language="JavaScript">

function getStyle( layer ) {
if( document.getElementById ) {
return document.getElementById( layer ).style
} else if( document.all ) {
return document.all[layer].style
} else {
return document[layer]
}
}

xpositie = -490
klokje = null


function heen0() {
if ( xpositie < 10 ) {
xpositie = xpositie + 5
getStyle('mijnlayer0').left = xpositie
klokje = setTimeout( 'heen0()', 10 )
}
}
function terug0() {
if ( xpositie > -515 ) {
xpositie = xpositie - 5
getStyle('mijnlayer0').left = xpositie
klokje = setTimeout( 'terug0()', 10 )
}
}
function stop0() {
clearTimeout( klokje )
}


function heen1() {
if ( xpositie < 10 ) {
xpositie = xpositie + 5
getStyle('mijnlayer1').left = xpositie
klokje = setTimeout( 'heen1()', 10 )
}
}
function terug1() {
if ( xpositie > -515 ) {
xpositie = xpositie - 5
getStyle('mijnlayer1').left = xpositie
klokje = setTimeout( 'terug1()', 10 )
}
}
function stop1() {
clearTimeout( klokje )
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h3 {
font-weight: normal;
padding:5px;
width: 250px;
margin:3px;
padding: 5px;
font-size: 12px;
}

#mijnlayer0 {
position: absolute;
top: 390px;
left: -600px;
width: 500px;
height: 160px;
background-color: #c0c0c0;
border: 2px solid #FF0000;
padding: 5px;
color:#333333;
text-align:justify;
font-size: 11px;
}
#mijnlayer1 {
position: absolute;
top: 390px;
left: -600px;
width: 500px;
height: 160px;
background-color: #e4e0c9;
padding: 5px;
color:#333333;
text-align:justify;
font-size: 11px;
}

-->
</style></head>

<body>

<p>&nbsp;</p>
<table width="60%" border="0" align="center">
<tr>
<td width="50">Pic1<a href="javascript:;" onMouseOver="stop0();heen0()" onMouseOut="stop0();terug0()"><img src="images/lnk.jpg" alt="pic0" width="31" height="21" border="0"></a></td>

<td width="50">Pic2<a href="javascript:;" onMouseOver="stop1();heen1()" onMouseOut="stop1();terug1()"><img src="images/lnk.jpg" alt="pic1" width="31" height="21" border="0"></a></td>
<td>Met Mouseover op Pic1 zal er aan de linkerkant een tekstkader verschijnen
die naar rechts beweegt. Met Mouseout zal deze teruggaan. </td>
</tr>
</table>
<div id="mijnlayer0">
moving layer
</div>
<div id="mijnlayer1">
tweede moving layer
</div>
</td>
</tr>
</body>
</html>

peter vazed · 14 apr 2007

eastern zei:
Hallo Peter,

Ik snap er niet veel van>
Is het mogelijk dat jij er veranderingen in aan brengt die werken?

Misschien dat ik het dan beter begrijp.

Bedankt!

Doet het toch al.....
Kopieer de code, plak in je html editor en bekijk in browser.

Zie hoe de namen nu zijn voor layer0 en layer1
dan kom je er wel uit

eastern · 14 apr 2007

peter vazed zei:
Doet het toch al.....
Kopieer de code, plak in je html editor en bekijk in browser.

Zie hoe de namen nu zijn voor layer0 en layer1
dan kom je er wel uit

Hallo Peter,

Bedankt voor je reactie,

Ik snap er niet veel van.
Zie de veranderingen die je hebt gemaakt maar.......dan werkt het niet of doe ik iets fout!
Stel dat ik 10 Layers wil gebruiken moet ik dan 10x het script plaatsen?
Met een beetje zoeken lees ik dat je variabelen kan maken voor meer layers????
Wil je me dat misschien uitleggen.
Misschien dat ik het dan beter begrijp.

Bedankt!

peter vazed · 14 apr 2007

Het werkt wel.................
alleen in IE,
zie:
http://www.zeepoort.nl/tesje/moving-layer2.html

Maar in FF werkt het niet.

Wachten tot er een Jeroen of Egel langs komt
om het script te bekijken.

Ik kan wel scripts lezen en aanpassen, doch niet herschrijven.

En indien je dus 10 soortgelijke items wenst zou het mogelijk moeten zijn met een korte code welke met een variabele werkt.

Dus nu twee problemen;
* alleen in IE
* code voor meerdere keren

eastern · 14 apr 2007

peter vazed zei:
Het werkt wel.................
alleen in IE,
zie:
http://www.zeepoort.nl/tesje/moving-layer2.html

Maar in FF werkt het niet.

Wachten tot er een Jeroen of Egel langs komt
om het script te bekijken.

Ik kan wel scripts lezen en aanpassen, doch niet herschrijven.

En indien je dus 10 soortgelijke items wenst zou het mogelijk moeten zijn met een korte code welke met een variabele werkt.

Dus nu twee problemen;
* alleen in IE
* code voor meerdere keren

Bedankt Peter,

Inderdaad werkt hij niet in FF, vandaar mijn antwoord.
Ik hoop dat Jeroen, Egel of iemand anders me verder kan helpen.

Nogmaals bedankt!

peter vazed · 15 apr 2007

Even ter informatie:

* geef je vraag een passende titel, help werkt niet
* quotes hoeft niet in een korte opvolgende berichtgeving
* geef aan wat je al gedaan hebt
* geef het adres van de proefpagina zodat iemand kan kijken en gelijk de broncode kan nalopen

Info:
http://www.handleidinghtml.nl/
klik in het linker menu op Scripts voor wat info.

Krijg je nu geen respons meer op dit topic, stel dan een nieuwe vraag, rekening houdend met hetgeen ik hier boven aangaf.

Google geeft ook wel resultaten indien je
slide layer firefox invoert, maar soms is het toch zoeken voor je gevonden hebt wat van toepassing is.

Egel · 15 apr 2007

Kijk eens:

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Slides</title>
<script type="text/javascript">
// Egel 070415 ;)

var nrOfSlides = 2, max = 12;
var slide = new Array(), clock = new Array(), min = new Array();
function getSlides() {
 for (var i = 0; i < nrOfSlides; i++) {
  slide[i] = document.getElementById('mijnlayer' + i);
  min[i] = -slide[i].offsetWidth;
  slide[i].style.left = min[i] + 'px';
  clock[i] = false;
  };
 };
window.onload = getSlides;

function startSlide(nr,pm) {
 if (clock[nr]) clearTimeout(clock[nr]);
 var str = 'moveSlide(' + nr + ',' + pm + ')';
 clock[nr] = setInterval(str,100);
 };

function moveSlide(nr,pm) {
 pm += slide[nr].offsetLeft;
 if (pm < min[nr]) pm = min[nr];
 if (pm > max) pm = max;
 slide[nr].style.left = pm + 'px';
 if (pm == min[nr] || pm == max) clearTimeout(clock[nr]);
 };

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
body {
background-color: #FFFFFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
h3 {
font-weight: normal;
padding:5px;
width: 250px;
margin:3px;
padding: 5px;
font-size: 12px;
}


span {
padding: 5px;
text-align: right;
font-size: 11px;
}

#mijnlayer0 {
position: absolute;
top: 70px;
border: 2px solid #FF0000;
background-color: #c0c0c0;
color: #333;
}

#mijnlayer1 {
position: absolute;
top: 100px;
background-color: #e4e0c9;
color: #333;
}

-->
</style></head>

<body>
<span id="mijnlayer0">cabrio 2tone<br><img src="cabrio-2tone-1.jpg" width="585" height="439"></span>
<span id="mijnlayer1">escort 1987<br><img src="cabrio-geel-fr.jpg" width="512" height="384"></span>

<table width="60%" border="0" align="center">
<tr>
<td width="50">cabrio 2tone<a href="javascript:void(0)" onmouseover="startSlide(0,12)" onmouseout="startSlide(0,-18)"><img src="plusmin.gif" width="46" height="20" alt=""></a></td>

<td width="50">escort  1987<a href="javascript:void(0)" onmouseover="startSlide(1,12)" onmouseout="startSlide(1,-18)"><img src="plusmin.gif" width="46" height="20" alt=""></a></td>
<td>Met Mouseover op Pic1 zal er aan de linkerkant een tekstkader verschijnen die naar rechts beweegt. Met Mouseout zal deze teruggaan.</td>
</tr>
</table>
</body>
</html>

met nrOfSlides = 2 geeft je het aantal slides op die mijnlayer0, mijnlayer1 enz heten. max = 12 is het aantal pixels links van het scherm bij helemaal uitschuiven.

In de style van een #mijnlayer hoef je alleen maar de top op te geven, de left wordt automatisch gedaan.

Vr.Gr. Egel.

eastern · 16 apr 2007

Beste Egel,

Onwijs bedankt voor je reaktie en natuurlijk de oplossing

Het werkt als een trein!!!!!!

Ga me nu verdiepen in Javascript want vindt dit wel een uitdaging!

Nogmaals bedankt!

PS

Peter ook nog bedankt!

Egel · 16 apr 2007

Graag gedaan!

Als je niet wilt dat de foto's zichtbaar zijn bij het laden van de pagina kun je nog left: -999px; in de style (van de span) zetten. Bij het laden worden ze dan links net buiten beeld klaargezet.

Vr.Gr. Egel.

Help a.u.b.

eastern

Gebruiker

peter vazed

Meubilair

eastern

Gebruiker

peter vazed

Meubilair

eastern

Gebruiker

peter vazed

Meubilair

eastern

Gebruiker

peter vazed

Meubilair

Egel

Terugkerende gebruiker

eastern

Gebruiker

Egel

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy