1. Deze website gebruikt cookies. Door deze website verder te gebruiken, gaat u akkoord met ons gebruik van cookies. Leer Meer.

Alles voor de beginnende webdesigner

Discussie in 'PC, Handheld & Algemeen' gestart door dutch_badass, 28 apr 2005.

Topicstatus:
Niet open voor verdere reacties.
  1. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
    kan toch gewoon met een onmouseover scriptje?

    <a href= http://www.beerbommel.nl onMouseOver= "if (document.images) document..src= 'http://plaatje2';" onMouseOut= "if (document.images) document..src= 'http://plaatje1';"><img src="http://plaatje1" name= border=0></a>
     
    Laatst bewerkt: 17 dec 2006
  2. mr. E

    mr. E Giraffe XBW.nl VIP

    Berichten:
    1.101
    Leuk Bevonden:
    0
    Langejan: dan heb je voor ieder knopje waarop een andere tekst staat een ander plaatje nodig, toch? Bij die andere optie niet :)
     
  3. ...Magic_Man...

    ...Magic_Man... Active Member

    Berichten:
    176
    Leuk Bevonden:
    0
    Nou het werkt......... bedankt tot zo ver.
    Alleen is het probleem nu dat al mijn images verschuiven???? naar mate k verder naar beneden ga met de tekst ik wil ook een scroll blakje plaatsen aan de rechter kant van het zwarte venster. Iemand die mijn kan adviseren in hoe dit te doen??? Vast dank!
    [​IMG]
     
    Laatst bewerkt: 17 dec 2006
  4. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
    na je <head> tag in je html code:

    Code:
    <style type="text/css"> 
    td.scroll 
    { 
    width: 490px; 
    height: 500px; 
    border: 0px solid #001122; 
    font-family: verdana; 
    font-size: 10px; 
    color: #ccddee; 
    background-color: #203b54; 
    scrollbar-base-color: #242424; 
    scrollbar-3d-light-color: #242424; 
    scrollbar-arrow-color: #a0bbd4; 
    scrollbar-darkshadow-color: #484848; 
    scrollbar-face-color: #252525; 
    scrollbar-highlight-color: #727272; 
    scrollbar-shadow-color: #809bb4; 
    scrollbar-track-color: #727272; 
    } 
    </style> 
    waarden kan je uiteraard zelf veranderen

    en in de betreffende TD:

    Code:
    class="scroll"
    Dus dan is die td zoiets:

    Code:
    <td class="scroll" colspan="8" rowspan="4" align="left" valign="top" background="images/jouwachtergrondplaatje van dat vak.jpg">
    Zijn vast betere manieren, maar zo deed ik het
     
  5. ...Magic_Man...

    ...Magic_Man... Active Member

    Berichten:
    176
    Leuk Bevonden:
    0




    ZO IETS DUS ??? WAAR MOET DAN DE TD KOMEN???


    <html>
    <head>
    <title>aboutpage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .style3 {color: #FF0000}
    -->
    </style>
    </head>
    <style type="text/css">
    td.scroll
    {
    width: 490px;
    height: 500px;
    border: 0px solid #001122;
    font-family: verdana;
    font-size: 10px;
    color: #ccddee;
    background-color: #203b54;
    scrollbar-base-color: #242424;
    scrollbar-3d-light-color: #242424;
    scrollbar-arrow-color: #a0bbd4;
    scrollbar-darkshadow-color: #484848;
    scrollbar-face-color: #252525;
    scrollbar-highlight-color: #727272;
    scrollbar-shadow-color: #809bb4;
    scrollbar-track-color: #727272;
    }
    </style>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (aboutpage.ai) -->
    <table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="8">
    <img src="images/aboutpage_01.gif" width="1024" height="128" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="128" alt=""></td>
    </tr>
    <tr>
    <td colspan="6"><img src="images/aboutpage_02.gif" width="261" height="109" alt=""></td>
    <td rowspan="9" align="left" valign="top" bgcolor="#000000"><br></td>
    <td rowspan="10">
    <img src="images/aboutpage_04.gif" width="39" height="640" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="109" alt=""></td>
    </tr>
    <tr>
    <td rowspan="9">
    <img src="images/aboutpage_05.gif" width="59" height="531" alt=""></td>
    <td colspan="4" align="left" valign="top">
    <img src="images/aboutpage_06.gif" width="98" height="20" alt=""></td>
    <td rowspan="9">
    <img src="images/aboutpage_07.gif" width="104" height="531" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
    <td colspan="4">
    <img src="images/aboutpage_08.gif" width="98" height="16" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" align="left" valign="top">
    <img src="images/aboutpage_09.gif" width="85" height="21" alt=""></td>
    <td colspan="2" rowspan="4">
    <img src="images/aboutpage_10.gif" width="13" height="70" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
    <td colspan="2">
    <img src="images/aboutpage_11.gif" width="85" height="16" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="16" alt=""></td>
    </tr>
    <tr>
    <td rowspan="5">
    <img src="images/aboutpage_12.gif" width="4" height="458" alt=""></td>
    <td align="left" valign="top">
    <img src="images/aboutpage_13.gif" width="81" height="20" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/aboutpage_14.gif" width="81" height="13" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" align="left" valign="top">
    <img src="images/aboutpage_15.gif" width="82" height="22" alt=""></td>
    <td rowspan="3">
    <img src="images/aboutpage_16.gif" width="12" height="425" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img src="images/aboutpage_17.gif" width="82" height="403" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="232" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/aboutpage_18.gif" width="724" height="171" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="171" alt=""></td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="59" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="81" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="12" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="104" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="724" height="1" alt=""></td>
    <td>
    <img src="images/spacer.gif" width="39" height="1" alt=""></td>
    <td></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>
     
  6. Dokter Gonzo

    Dokter Gonzo Hunter S. Thompson

    Berichten:
    856
    Leuk Bevonden:
    0
    Nee, zo werkt het niet. Het eerste stukje code van LangeJan moet tussen <head> en </head>. En het tweede stukje code moet toegepast worden zoals LangeJan dat ook al heeft neer gezet. Kijk maar in zijn post hoe het moet.
    Ik kan het wel ff toelichten:
    Je moet de cell (<td>) in je table 'vertellen' dat hij de css code moet toepassen op zichzelf, en dat doe je door een class te benoemen.
     
  7. ...Magic_Man...

    ...Magic_Man... Active Member

    Berichten:
    176
    Leuk Bevonden:
    0
    Zou je het er even willen in zetten? als voorbeeld??? vast dank!
     
  8. Darkwing

    Darkwing Active Member

    Berichten:
    6.510
    Leuk Bevonden:
    25
    Dat is wel heel erg makkelijk of niet, een ander het werk laten doen... het wordt toch duidelijk uitgelegd, het lijkt me dat je met een beetje eigen inzet zoiets zelf ook wel kan.
     
  9. Dokter Gonzo

    Dokter Gonzo Hunter S. Thompson

    Berichten:
    856
    Leuk Bevonden:
    0
    Nee, dat doe ik niet. Dit is echt de basis van html. hier zijn gigantisch veel tutorials over te vinden. Zoek op google naar: html css tutorial.
     
  10. Midas-vb

    Midas-vb Active Member

    Berichten:
    262
    Leuk Bevonden:
    0
    Het is maar voor 1 plaatje, dus dit is voldoende, hij doet het alleen nog niet..
    Ik heb nu dit:
    Code:
    <a href="index.html" onMouseOver="if (document.images) document..src='images/enter.gif';" onMouseOut="if (document.images) document..src= 'images/enter.jpg';"><img src="images/enter.jpg" border="0"></a>
    Maar hij geeft niet plaatje 2 weer als de muis eroverheen gaat..

    @Mr. E: ik kwam er niet zo veel wijs uit en heb het ook nog niet geprobeerd :eek: maar als ik wat verder ben met het coderen enz zal ik het zeker nog eens proberen! :)

    Edit: het is gelukt :D
     
    Laatst bewerkt: 18 dec 2006
  11. Darkwing

    Darkwing Active Member

    Berichten:
    6.510
    Leuk Bevonden:
    25
    Nogal overdreven, het kan heel simpel, en werkt zelfs zonder link:

    HTML:
    <img src="plaatje1.gif" onmouseover="this.src='plaatje2.gif'" onmouseout="this.src='plaatje1.gif'" />
    Het kan eventueel ook in een link, maar dan moet je het plaatje een naam meegeven:

    HTML:
    <a href="#" onmouseover="plaatje.src='plaatje2.gif'" onmouseover="plaatje.src='plaatje1.gif'">
      <img name="plaatje" src="plaatje1.gif" />
    </a>
    
    Bij javascript rollover plaatjes is het wel handig het tweede plaatje vooraf te preloaden, anders wordt het plaatje pas ingeladen als je er met de muis overheen gaat, wat niet handig is. Daarvoor kun je de volgende code gebruiken tussen je <head> en </head> tags:

    HTML:
    <script language="javascript" type="text/javascript">
      var pic0 = new Image(); pic0.src = "plaatje2.gif";
    </script>
    
     
  12. Midas-vb

    Midas-vb Active Member

    Berichten:
    262
    Leuk Bevonden:
    0
    Ik heb een of ander geval gevonden waarin je de naam van de twee plaatjes en de link moest invullen en dan kwam de code eruit. Dit heb ik nu en het werkt:

    Head:
    HTML:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    
    image1 = new Image();
    image1.src = "images/enter.gif";
    
    // End -->
    </script>
    Body:
    HTML:
    <a href="main.html" onmouseover="image1.src='images/enter.gif';"
    onmouseout="image1.src='images/enter.jpg';">
    <img name="image1" src="images/enter.jpg" border=0></a>
    Hier kan je het zien nu: http://test.bst-online.nl/

    (check vooral ff mijn html skills)
     
    Laatst bewerkt: 24 dec 2006
  13. Darkwing

    Darkwing Active Member

    Berichten:
    6.510
    Leuk Bevonden:
    25
    Dat is dus precies hetzelfde als wat ik in mijn vorige post al uitlegde...
     
  14. Midas-vb

    Midas-vb Active Member

    Berichten:
    262
    Leuk Bevonden:
    0
    Klopt, zoals je in mijn vorige post ziet had ik toen deze oplossing al.
     
  15. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
    Mooi hoor, maar bij mij loopt die licht bruine horizontale lijn net helemaal recht door.

    Rondom het vak issie lager.
     
  16. shorty_

    shorty_ [B][u][F][u]

    Berichten:
    85
    Leuk Bevonden:
    0
    hoii..
    ik wil graag een eigen website openen..
    ik heb gelezen dat die van .TK gratis zijn..
    je hebt er 2 versies, eentje betaald en eentje gratis dus..
    kan ik nu eentje gratis openen, en later als die site helemaal af is, 'upgraden' naar eentje die betaald is..? ( misschien iemand hier ervaring mee )

    ( ik wil eerst met gratis site beginnen, omdat ik heeeeeeeeeeeeelemaal geen verstand heb om een site te bouwen, iemand gaat mij helpen.. drm drm.. )
     
  17. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
    .tk is toch alleen maar voor de domeinnaam? Je moet dus zelf nog een (gratis) host regelen..

    .tk sucks anyway :9 zooo 1998
     
  18. shorty_

    shorty_ [B][u][F][u]

    Berichten:
    85
    Leuk Bevonden:
    0
    oohw.. Ik wil gewoon een website openen met beetje informatie erop.. linkjes foto;s.. tekst..
    dus dan betaal ik alleen voor die domeinnaam bij .tk?
    En die host is zeker die ruimte waar je alles erop zet ?
    Als ik dit niet eens weet, kan ik er beter niet eens aan beginnen
     
  19. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
  20. Midas-vb

    Midas-vb Active Member

    Berichten:
    262
    Leuk Bevonden:
    0
    Je kijkt dan waarschijnlijk met IE toch? Dat heb ik hier ook in IE. En daar doet de rollover het ook niet trouwens..

    Maarja, ik word er niet goed van dat IE en Firefox niet gewoon hetzelfde werken enz. mss als ik alles klaar heb dat ik het nog ga opschonen en crossbrowser maken maar dat kan me nu de kont niet oxideren, voor die 10 bezoekers hoef ik het niet te doen :)
     
Topicstatus:
Niet open voor verdere reacties.

Deel Deze Pagina