donderdag 29 augustus 2013

Basis blog: Bestaande Combo Link Box aanpassen (javascript)

Deel 2

Er zijn tegenwoordig veel bestaande scripts die u gewoon kunt overnemen en aanpassen. Als u weet welke delen van de code u aan kan passen is het erg eenvoudig om een code eigen te maken. In dit geval pakken we een script van javascriptkit.com om aan te passen. Maak nu een kopie van het script hier onder:


<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{document.getElementById("demo").innerHTML=Date();}
</script>
</head>
<body>
<form  name="take">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%"><select name="take2" size="5">
        <option selected value="http://www.javascriptkit.com">JavaScript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">JavaScript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free JavaScripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>
      </select>
<script>
<!--
/*Combo Link Box script- By JavaScript Kit
(www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
function taking()
{location=
document.take.take2.options[document.take.take2.selectedIndex].value}
//-->
</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Take Me There!" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

U ziet nu dit resultaat:

Dit is het bestaande javascript wat wij aan gaan passen. We beginnen met het zoeken van de tekst uit de Combo Link Box. Die kunnen we vinden in het deel van de code wat hier onder staat. Alles tussen de opening en sluiting van de option is de tekst die u ook echt ziet. Dik gedrukt in het voorbeeld.:

        <option selected value="http://www.javascriptkit.com">JavaScript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">JavaScript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free JavaScripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>

Deze code gaan we nu wijzigen door de dik gedrukte onderdelen in de Combo Link Box te vervangen voor onze eigen tekst. Bijv:

       <option selected value="http://www.javascriptkit.com">Blogger vivarium</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">Blogger creatief</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Vivariumfotografie</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Typografie</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Air display</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">Corel office</option>
        <option value="http://www.cnn.com">Microsoft office</option>
        <option value="http://www.microsoft.com">Javascript</option>
        <option value="http://www.netscape.com">Behance</option>

U ziet nu dit resultaat:



Nu gaan we zoeken naar de verwijzende links. Deze staan in de aanhef voor de naam van de links in de Combo Link Box. Deze ziet u hier dikgedrukt:

       <option selected value="http://www.javascriptkit.com">Blogger vivarium</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">Blogger creatief</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Vivariumfotografie</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Typografie</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Air display</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">Corel office</option>
        <option value="http://www.cnn.com">Microsoft office</option>
        <option value="http://www.microsoft.com">Javascript</option>
        <option value="http://www.netscape.com">Behance</option>

Nu gaan we ze linken naar de juiste pagina’s:

<option selected value="http://vivariumlovers.blogspot.nl/">Blogger vivarium</option>
        <option value="http://sylvanainfo.blogspot.nl/">Blogger creatief</option>
        <option value="http://vivariumlovers.blogspot.nl/2013/07/10-tips-voor-vivariumfotografie.html">Vivariumfotografie</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/typografie-voor-doe-het-zelvers.html">Typografie</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/gebruik-uw-tablet-als-tweede-scherm-met.html">Air display</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/corel-office-versus-microsoft-office.html">Corel office</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/corel-office-versus-microsoft-office.html">Microsoft office</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/08/basis-blog-javascript-in-html.html">Javascript</option>
        <option value="http://www.behance.net/sylvanastienstra">Behance</option>

In wat u in de Combo Link Box ziet is niks veranderd, maar de functies van het doorlinken zijn wel veranderd. U kunt nu de nieuwe functies van de Combo Link Box uitproberen. 

Nu we de Combo Link Box hebben aangepast kunnen we ook de link nog een eigen naam geven. De tekst op de link is nu “Take Me There!” en dit gaan we veranderen naar “Breng mij”. Hiervoor moeten we eerst “Take Me There!” opzoeken in de code. Die vinden we hier:

</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Take Me There!" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>

Deze veranderen wij nu in Breng mij:

</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Breng mij" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>

U ziet nu dit resultaat:


U hebt nu uw eigen Combo Link Box aangepast door de juiste wijzigingen in de code. Als u meer wilt weten over hoe u javascript moet lezen, dan kunt u ook het eerste deel lezen.