Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Annimated rollover

None
16 antwoorden
  • Ik heb nu animated rollover buttens gemaakt: Voorbeeld

    De html versie van me site is dit:

    [quote:de56507457]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!–
    body {
    background-color: #333333;
    }
    .style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    }
    –>
    </style></head>

    <body>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="800" height="600" valign="top" background="images/main_bg.gif"><table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/header_logo.gif" width="800" height="126"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/bt_1.gif" width="134" height="30"><a href="home.html"><img src="images/bt_2.gif" width="80" height="30" border="0"></a><a href="news.html"><img src="images/bt_3.gif" width="80" height="30" border="0"></a><a href="aboutus.html"><img src="images/bt_4.gif" width="111" height="30" border="0"></a><a href="gallary.html"><img src="images/bt_5.gif" width="105" height="30" border="0"></a><a href="links.html"><img src="images/bt_6.gif" width="86" height="30" border="0"></a><a href="contactus.html"><img src="images/bt_7.gif" width="128" height="30" border="0"></a><img src="images/bt_8.gif" width="77" height="30"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/header_logo2.gif" width="800" height="10"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr valign="top">
    <td width="238"><table width="238" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="13"><img src="images/bs_3l.gif" width="17" height="54"></td>
    <td width="180"><img src="images/bs_3.gif" width="180" height="54"></td>
    <td width="41"><img src="images/bs_3r.gif" width="41" height="54"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="index.html"><img src="images/main_nav_button_home.gif" width="180" height="15" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="news.html"><img src="images/main_nav_button_news.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="aboutus.html"><img src="images/main_nav_button_aboutus.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="draver.html"><img src="images/main_nav_button_draver.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books.html"><img src="images/main_nav_button_books.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/naturalhorsemanship.html"><img src="images/main_nav_button_naturalhors.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/training.html"><img src="images/main_nav_button_training.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/other"><img src="images/main_nav_button_other.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="gallary.html"><img src="images/main_nav_button_gallary.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="links.html"><img src="images/main_nav_button_links.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="contactus.html"><img src="images/main_nav_button_contactus.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/os_1l.gif" width="17" height="40"></td>
    <td width="180"><img src="images/os_1.gif" width="180" height="40"></td>
    <td width="41"><img src="images/os_1r.gif" width="41" height="40"></td>
    </tr>
    </table></td>
    <td width="562"><table width="562" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/bs_4.gif" width="562" height="64"></td>
    </tr>
    </table>
    <table width="562" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><table width="540" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="272" valign="top"><p class="style1">Hallo,<br>
    <br>
    Dit is de homepage. </p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><img src="images/os_2.gif" width="562" height="55"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/footer.gif" width="800" height="52"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
    [/quote:de56507457]

    En dit is wat adobe imageready heeft aangemaakt (van de home button):

    [quote:de56507457]<html>
    <head>
    <title>Untitled-5</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!– ImageReady Preload Script (Untitled-5) –>
    <script type="text/javascript">
    <!–

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    home_01_over = newImage("images/home_01-over.gif");
    preloadFlag = true;
    }
    }

    // –>
    </script>
    <!– End Preload Script –>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
    <!– ImageReady Slices (Untitled-5) –>
    <a href="#"
    onmouseover="changeImages('home_01', 'images/home_01-over.gif'); return true;"
    onmouseout="changeImages('home_01', 'images/home_01.gif'); return true;"
    onmousedown="changeImages('home_01', 'images/home_01-over.gif'); return true;"
    onmouseup="changeImages('home_01', 'images/home_01-over.gif'); return true;">
    <img name="home_01" src="images/home_01.gif" width="180" height="19" border="0" alt=""></a>
    <!– End ImageReady Slices –>
    </body>
    </html>
    [/quote:de56507457]

    Zouden jullie mij kunnen helpen met de tekst van de button in het html te krijgen.

    Avlast bedankt.

    Mvgr. Bas
  • van <script> tot en met </script> zet je in de head van je document; na je style bijv.

    van <a href=….> tot en met </a> zet je op de plek waar je het wil hebben in de body.

    t.
  • Ok bedankt, ik ga het even proberen.

    Mvgr. Bas
  • van <a href=….> tot en met </a> dat is me gelukt om in m'n body te zetten. Het icoontje verschijnt weer in me layout.

    Alleen de van <script> tot en met </script>
    [quote:be75e8c95b]<script type="text/javascript">
    <!–

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    links_01_over = newImage("images/links_01-over.gif");
    preloadFlag = true;
    }
    }

    // –>
    </script>[/quote:be75e8c95b]
    bedoel je dan onder </style></head>

    Want dat lukt me niet, de site wordt overigens in Dreamweaver gemaakt.

    Mvgr. Bas
  • In de head betekent ergens tussen <head> en </head>.
  • Ik heb het nu op de plek van "hier" geplaatst.

    Hier
    –>
    </style></head>

    Maar als ik 'm opsla en in explorer open gebuurd er niks. :-?
  • Doet het eens in notepad, wellicht werkt je programma tegen
  • DW heeft eens insert FW html knopje :)

    En anders naar code view, plakken, refreshen.

    Waar je wel voor moet zorgen is dat het pad naar de afbeeldingen klopt.

    t.
  • Ik heb dat nu ook geprobeerd, alleen zonder resultaat.

    Hier het voorbeeld:

    [quote:fc11469993]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!–
    body {
    background-color: #333333;
    }
    .style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    }
    [b:fc11469993]<script type="text/javascript">
    <!–

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    links_01_over = newImage("images/links_01-over.gif");
    preloadFlag = true;
    }
    }

    // –>
    </script>[/b:fc11469993]
    –>
    </style></head>

    <body>
    <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td width="800" height="600" valign="top" background="images/main_bg.gif"><table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/header_logo.gif" width="800" height="126"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/bt_1.gif" width="134" height="30"><a href="home.html"><img src="images/bt_2.gif" width="80" height="30" border="0"></a><a href="news.html"><img src="images/bt_3.gif" width="80" height="30" border="0"></a><a href="aboutus.html"><img src="images/bt_4.gif" width="111" height="30" border="0"></a><a href="gallary.html"><img src="images/bt_5.gif" width="105" height="30" border="0"></a><a href="links.html"><img src="images/bt_6.gif" width="86" height="30" border="0"></a><a href="contactus.html"><img src="images/bt_7.gif" width="128" height="30" border="0"></a><img src="images/bt_8.gif" width="77" height="30"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/header_logo2.gif" width="800" height="10"></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr valign="top">
    <td width="238"><table width="238" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="13"><img src="images/bs_3l.gif" width="17" height="54"></td>
    <td width="180"><img src="images/bs_3.gif" width="180" height="54"></td>
    <td width="41"><img src="images/bs_3r.gif" width="41" height="54"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="index.html"><img src="images/main_nav_button_home.gif" width="180" height="15" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="news.html"><img src="images/main_nav_button_news.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="aboutus.html"><img src="images/main_nav_button_aboutus.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="draver.html"><img src="images/main_nav_button_draver.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books.html"><img src="images/main_nav_button_books.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/naturalhorsemanship.html"><img src="images/main_nav_button_naturalhors.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/training.html"><img src="images/main_nav_button_training.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="books/other"><img src="images/main_nav_button_other.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="gallary.html"><img src="images/main_nav_button_gallary.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif"width="17" height="19"></td>
    <td width="180">[b:fc11469993]<a href="#"
    onmouseover="changeImages('links_01', 'images/links_01-over.gif'); return true;"
    onmouseout="changeImages('links_01', 'images/links_01.gif'); return true;"
    onmousedown="changeImages('links_01', 'images/links_01-over.gif'); return true;"
    onmouseup="changeImages('links_01', 'images/links_01-over.gif'); return true;">
    <img name="links_01" src="images/links_01.gif" width="180" height="19" border="0" alt=""></a>[/b:fc11469993]</td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/main_nav_button_1l.gif" width="17" height="19"></td>
    <td width="180"><a href="contactus.html"><img src="images/main_nav_button_contactus.gif" width="180" height="19" border="0"></a></td>
    <td width="41"><img src="images/main_nav_button_1r.gif" width="41" height="19"></td>
    </tr>
    <tr>
    <td width="13"><img src="images/os_1l.gif" width="17" height="40"></td>
    <td width="180"><img src="images/os_1.gif" width="180" height="40"></td>
    <td width="41"><img src="images/os_1r.gif" width="41" height="40"></td>
    </tr>
    </table></td>
    <td width="562"><table width="562" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/bs_4.gif" width="562" height="64"></td>
    </tr>
    </table>
    <table width="562" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><table width="540" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td height="272" valign="top"><p class="style1">Hallo,<br>
    <br>
    Dit is de homepage. </p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p>
    <p class="style1">&nbsp;</p></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><img src="images/os_2.gif" width="562" height="55"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    <table width="800" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="images/footer.gif" width="800" height="52"></td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>
    [/quote:fc11469993]
  • Is er niemand die me ermee kan helpen?
  • je hebt je script nu ín je stylesheet gezet…

    Probeer het script echt wat zorgvuldiger te plaatsen.

    zet hem na </style> en voor </head>.
  • Oh, het html gedeelte ben ik nog niet zo sterk in, dus vandaar dat ik even laat zien wat ik doe. Het is dan neem ik aan voor jullie makkelijker om de fout te zien.
    Ik ga het even proberen.

    Mvgr. Bas
  • Hij doet 't dan nog steeds niet. Ik heb het met de button "news" geprobeerd.

    Dit is wat ik nu gedaan heb.

    [quote:abd8d35522]<script type="text/javascript">
    <!–

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    news_01_over = newImage("images/news_01-over.gif");
    preloadFlag = true;
    }
    }

    // –>
    </script>[/quote:abd8d35522]

    Deze regel heb ik nu tussen: </style>
  • 1) Kun je de pagina online zetten?
    2) Waarom gebruik je niet de 'Insert rollover image'-functie in Dreamweaver?
    3) Is het niet een idee om je eerst eens wat te verdiepen in het bouwen van een site, voordat je aan de gang gaat? Superdeluxe programma's gebruiken zonder kennis van zaken voorspelt niet veel goeds…
  • Ik heb de site voor je online gezet: De Site

    Dit is 1 van de de rollover buttons: Voorbeeld

    De reden dat ik de rollover button in adobe imageready gemaakt heb is dat ik daar een duidelijke tutorial van had gevonden.
    En ik wist nog niet dat die functie er ook was in dreamweaver.

    Het maken van een layout en het online zetten is niet het probleem. En met dreamweaver kan ik ook wel aardig overweg nu.

    Ik heb in de help functie van dreamweaver iets gevonden over hoe je een rollover maakt in dreamweaver, ik ga dat zo even proberen.

    Mvgr. Bas
  • Ik wil even zeggen dat het eindelijk gelukt is.

    Mvgr. Bas

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.