Alles voor de beginnende webdesigner

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

Topicstatus:
Niet open voor verdere reacties.
Pagina 39 van 67
  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
    Gerjan, 17 dec 2006
    #761
  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 :)
     
    mr. E, 17 dec 2006
    #762
  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
    ...Magic_Man..., 17 dec 2006
    #763
  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
     
    Gerjan, 17 dec 2006
    #764
  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>
     
    ...Magic_Man..., 18 dec 2006
    #765
  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.
     
    Dokter Gonzo, 18 dec 2006
    #766
  7. ...Magic_Man...

    ...Magic_Man... Active Member

    Berichten:
    176
    Leuk Bevonden:
    0
    Zou je het er even willen in zetten? als voorbeeld??? vast dank!
     
    ...Magic_Man..., 18 dec 2006
    #767
  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.
     
    Darkwing, 18 dec 2006
    #768
  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.
     
    Dokter Gonzo, 18 dec 2006
    #769
  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
    Midas-vb, 18 dec 2006
    #770
  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>
     
    Darkwing, 20 dec 2006
    #771
  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
    Midas-vb, 22 dec 2006
    #772
  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...
     
    Darkwing, 23 dec 2006
    #773
  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.
     
    Midas-vb, 23 dec 2006
    #774
  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.
     
    Gerjan, 23 dec 2006
    #775
  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.. )
     
    shorty_, 23 dec 2006
    #776
  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
     
    Gerjan, 23 dec 2006
    #777
  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
     
    shorty_, 23 dec 2006
    #778
  19. Gerjan

    Gerjan XBW.nl VIP XBW.nl VIP

    Berichten:
    6.685
    Leuk Bevonden:
    221
    Gerjan, 23 dec 2006
    #779
  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 :)
     
    Midas-vb, 23 dec 2006
    #780
Pagina 39 van 67
Topicstatus:
Niet open voor verdere reacties.

Deel Deze Pagina