Foto wisselen en bijbehorende tekst aanpassen in een <textarea>

Status
Niet open voor verdere reacties.
S

Shurlock

Gebruiker
Lid geworden
7 jan 2007
Berichten
7
Hallo allen,

Ik zit met een probleem binnen Java script.
De bedoeling is om via een 'onmouseover' statement binnen een kolom met iconen een script te activeren dat:
- de grote foto van het betreffende icoon projecteert. Dat deel lukt wel, mits ik de laatste regel van 'function (ShowLargeFoto(ChangeToFoto)' en de gehele 'function getText(tekstfile)' weglaat.

Om de bijbehorende tekst weer te geven in een <textarea name="fileContents"> lukt mij niet.
Het stukje script dat ik daartoe wil gebruiken voorkomt dat de fotowisseling plaatsvindt.
Wie weet hier een oplossing voor?

Code tot dusver:

Code: 
<script>
var foto0 = new Image();
var foto1 = new Image();

foto0.src = "images/foto0.jpg";
foto1.src = "images/foto1.jpg";

var tekst = "images/foto";
var tekstfile = tekst + "0.txt";

function ShowLargeFoto(ChangeToFoto) {
   eval("document['fotos'].src = foto" + ChangeToFoto + ".src");
   tekstfile = tekst + ChangeToFoto + ".txt";
  document.getElementByName(fileContents).innerHTML = getText(tekstfile);

function getText(tekstfile) {
	File file = new File();
	BufferedReader reader = null;
	try {
		reader = new BufferedReader(new FileReader(tekstfile));
		String text = null;
		String savetext=null;
			            		
		while ((text = reader.readLine()) != null) {
			savetext += text;
		}
		return(savetext);
	}
}

</script>

HTML: 
<body>
<div style="position: absolute; top: 0px; left: 9px; width: 162px; height: 860px; z-index: 2">
	<a onmouseover="ShowLargeFoto('0')" href="#"><img align="center" src="images/foto0_small.jpg" width=75 height=100></a><br>Foto0<br><br>
	<a onmouseover="ShowLargeFoto('1')" href="#"><img align="center" src="images/foto1_small.jpg" width=75 height=100></a><br>Foto1<br><br>
</div>

<div class="center" style="position: absolute; left: 500px; width: 800px; top:6px; height:740px">
		<img border="1" src="images/foto0.jpg" name=fotos width="auto" height="630">
</div>

<div style="position: absolute; left: 1450px; width: 400px; top:16px; height:740px; border: solid yellow 4px;">
	<textarea name="fileContents" cols="47" rows="48"></textarea>	
</div>

</body>
 
Dit is geen Java maar JavaScript ;-)
 
Hoi, Het lijkt erop dat je een oud boek of oude website gebruikt.
De html heb ik voor je opgepoetst zodat deze werkt en je dus kan richten op de Javascript :)
De style hoort in een apart style.css bestand.

Code: 
[B]html[/B]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Foto thumbs</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="foto-thumbs">
    <a onmouseover="ShowLargeFoto('0')" href="#">
        <img src="images/foto0_small.jpg" width="75" height="100">
    </a><br>Foto0<br><br>
    <a onmouseover="ShowLargeFoto('1')" href="#">
        <img src="images/foto1_small.jpg" width="75" height="100">
    </a><br>Foto1<br><br>
</div>
<div id="foto-groot">
    <img id="fotos" src="-" width="800" height="630">
</div>
<div id="foto-tekst">
    <textarea id="fileContents" cols="47" rows="48"></textarea>
</div>
<script src="javascript.js"></script>
</body>
</html>

[B]Bestand style.css[/B]

body, textarea {
    font: normal 14px/1.4 sans-serif;
}
img {
    width: 100%;
    height: auto;
    margin: auto;
    border: 0;
}
a {
    text-decoration: none;
}
#foto-thumbs {
    position: absolute;
    top: 0px;
    left: 9px;
    width: 162px;
    height: 860px;
    z-index: 2;
}
#foto-groot {
    position: absolute;
    top: 6px;
    left: 500px;
    width: 800px;
    height:740px;
}
#foto-groot img {
    border: 2px solid black;
}
#foto-tekst {
    position: absolute;
    top: 16px;
    left: 1450px;
    width: 400px;
    height: 740px;
    border: 4px solid yellow;
}

[B]Bestand javascript.js[/B]

function ShowLargeFoto(fotoNummer) {
    // gebruik DOM image objext
    // zie: www.w3schools.com/jsref/dom_obj_image.asp
    var fotoGroot = document.querySelector("#fotos");
    fotoGroot.src = "images/foto" + fotoNummer + ".jpg";
    var tekstfile = "images/foto" + fotoNummer + ".txt";
    document.querySelector("#fileContents").innerHTML = getText(tekstfile);
}

function getText(tekstfile) {
    // gebruik AJAX om bestand te lezen
    // zie: www.w3schools.com/xml/ajax_intro.asp
    // .....
}

Zoals je ziet zijn er 2 functies nodig, verder niets.
Suc6 met het script. Aan jou de eer om de tweede functie te maken. Have fun :D
 
Laatst bewerkt:
Zo te zien is je eerste functie ShowLargeFoto niet afgesloten
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan