simpele image viewer werkt prima, maar text opmaak help

Status
Niet open voor verdere reacties.
H

hannekie

Nieuwe gebruiker
Lid geworden
28 apr 2011
Berichten
1
Ik heb een simpele imageviewer gezocht op internet, gevonden en naar mijn wensen aangepast. Alleen de tekst staat nu in een textarea en kan ik dus niet opmaken, dit zou ik wel graag willen, weet iemand daar misschien een oplossing voor?

Hierna volgt de code
[JS]
<html>
<head>
<title>slide show</title>
<script language="JavaScript">
<!--
//
// NOTICE: To my knowledge this script works with
// Netscape 3.0+ and Internet Explorer 4.0+. By
// using this script you agree that I am not
// responsible for any type of damage it causes.
// To use this script freely, you must leave this
// comment intact.
//

// Browser checker

Browser_Name = navigator.appName;
Browser_Ver = parseInt(navigator.appVersion);
if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd";
else Browser_Gen = "<3rd";

if (Browser_Gen == '>=3rd') {


num_of_slides = 5; // Declare the number of slides in your show
slide_num = 1; // Which slide loads ups first

// Description of each slide
desc1 = "een";
desc2 = "twee";
desc3 = "drie";
desc4 = "vier";
desc5 = "vijf";
}

// These functions alter the slide_num accordingly
function firstslide(){
slide_num = 1;
changeslide();
}
function prevslide(){
slide_num = slide_num - 1;
if(slide_num < 1){
slide_num = num_of_slides;
}
changeslide();
}
function nextslide(){
slide_num = slide_num + 1;
if(slide_num > num_of_slides){
slide_num = 1
}
changeslide();
}
function lastslide(){
slide_num = 5;
changeslide();
}


// This function changes the slide and the description box according to the slide_num
function changeslide(){

// Changes the slide
eval('document.picbox.src = "pic' + slide_num + '.jpg"');

// Changes the description box
eval('document.descform.descbox.value = " ' + eval('desc' + slide_num) + '"');


}
// end hiding contents -->
</script>
</head>




<body onload="changeslide()">
<table>
<tr>
<td rowspan="2"><img src="pic1.jpg" name="picbox" ></td>
<td>
<table>
<tr>
<td align=center><a href="javascript:prevslide()"><img src="vorige.jpg" border=0></a></td>
<td align=center><a href="javascript:nextslide()"><img src="volgende.jpg" border=0></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<form name="descform">
<textarea name="descbox" rows=3 cols=30 wrap=virtual onFocus="this.blur()"></textarea>
</form>
</td>
</tr>
</table>
</body>
</html>
[/JS]
 
Je kunt dit oplossen door de textarea in je stylesheet op te nemen. Als je niet weet hoe dit moet dan raad ik je aan om te zoeken op Textarea CSS.
Je kunt het bijvoorbeeld zo tussen je <head> tags plaatsen:

<style type="text/css">
textarea{
border: 1px solid #cecece; // (kleurcode, voorbeeld is lichtgrijs)
background-color: red // (achtergrond kleur kan, je eigen invullen.
}
</style>

Als ik goed begrijp wat je wilt dan is bovenstaand een oplossing.
 
mocht je geen tekstbox willen maar een divje waar je alles mee kan, heb ik hem hier toegevoegd hoef je alleen nog maar het tekstveldje weg te halen.

Code: 
<html>
<head>
   <title>slide show</title>
   <script language="JavaScript">
   <!--
   //
   //  NOTICE: To my knowledge this script works with
   //  Netscape 3.0+ and Internet Explorer 4.0+.  By 
   //  using this script you agree that I am not     
   //  responsible for any type of damage it causes. 
   //  To use this script freely, you must leave this
   //  comment intact.
   //
 
   //  Browser checker
 
   Browser_Name = navigator.appName;
   Browser_Ver  = parseInt(navigator.appVersion);
   if((Browser_Name == "Netscape" && Browser_Ver >= 3) || (Browser_Name == "Microsoft Internet Explorer" && Browser_Ver >= 4)) Browser_Gen = ">=3rd";
   else Browser_Gen = "<3rd";
 
   if (Browser_Gen == '>=3rd') {
   
 
   num_of_slides = 5;    // Declare the number of slides in your show
   slide_num = 1;        // Which slide loads ups first
 
   // Description of each slide
   desc1 = "een";
   desc2 = "twee";
   desc3 = "drie";
   desc4 = "vier";
   desc5 = "vijf";
   }
 
   //  These functions alter the slide_num accordingly
   function firstslide(){
     slide_num = 1;
     changeslide();
   }
   function prevslide(){
     slide_num = slide_num - 1;
     if(slide_num < 1){
       slide_num = num_of_slides;
     }
     changeslide();
   }
   function nextslide(){
     slide_num = slide_num + 1;
     if(slide_num > num_of_slides){
       slide_num = 1
     }
     changeslide();
   }
   function lastslide(){
     slide_num = 5;
     changeslide();
   }
 
 
   //  This function changes the slide and the description box according to the slide_num
   function changeslide(){        
 
     //  Changes the slide
     eval('document.picbox.src = "pic' + slide_num + '.jpg"');
 
     //  Changes the description box    
    eval('document.descform.descbox.value = " ' + eval('desc' + slide_num) + '"');
	eval('document.getElementById("box").innerHTML = " ' + eval('desc' + slide_num) + '"');
 
   }
   // end hiding contents -->
   </script>
</head>
 
 
 
 
<body onload="changeslide()">
    <table>
  <tr>
    <td rowspan="2"><img src="pic1.jpg" name="picbox" ></td>
    <td>
        <table>
            <tr>
                <td align=center><a href="javascript:prevslide()"><img src="vorige.jpg" border=0></a></td>
                <td align=center><a href="javascript:nextslide()"><img src="volgende.jpg" border=0></a></td>
            </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td>
        <form name="descform">
            <textarea name="descbox" rows=3 cols=30 wrap=virtual onFocus="this.blur()"></textarea>
        </form>
		<div id="box" style="border:1px solid black;width:100px;height:100px;color:red;">.</div>
    </td>
  </tr>
</table>
</body>
</html>
 
Hoi hannekie,
simpele image viewer werkt prima
Klik om te vergroten...
Weet je dat heel zeker? Doet ie het ook in Firefox, Chrome en Opera bijvoorbeeld?
Wat ik zie, is nl. een zwaar verouderd script met een browser-sniffer die checkt op alleen Netscape en IE. :shocked:
Kan je een link geven naar een testpagina?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan