Thread: HTML Vraagje

  1. #1

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)

    HTML Vraagje

    Ik zit hier nu al even te prutsen, maar het lijkt me niet te lukken en daarom zet ik het hier:

    Ik heb volgend javascript gebruikt om een bannersysteem op een forum te hebben:

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -

    if (document.images) {
    ads = new Array(3);
    ads[0] = "http://www.iendracht.be/images/banners/vandenborrebert.gif";
    ads[1] = "http://www.iendracht.be/images/banners/lasfiestasbewegend.gif";
    ads[2] = "http://www.iendracht.be/images/banners/vandenborrebert.gif";
    }

    newplace = new Array(3);
    newplace[0] = "http://www.iendracht.be"
    newplace[1] = "http://www.lasfiestas.be"
    newplace[2] = "http://www.iendracht.be"

    var timer = null
    var counter = 0

    function banner() {
    timer=setTimeout("banner()", 36000);
    counter++;
    if (counter >= 3)
    counter = 0;
    document.bannerad.src = ads[counter];
    }

    function gothere() {
    counter2 = counter;
    window.location.href = newplace[counter2];
    }

    // - End of JavaScript - -->
    </SCRIPT>
    Vervolgens heb ik mijn headerafbeelding op mijn forum als background in een div geplaatst en hierop dan het javascript laten verschijnenen, ziet er als volgt uit:

    <div align="right" style="background-image: url(http://www.iendracht.be/forum/styles...ite_logo.jpg); height: 110px; width: 956px; "><a href="javascript:gothere()"><IMG SRC="http://www.iendracht.be/images/banners/lasfiestasbewegend.gif" NAME="bannerad" WIDTH="280" HEIGHT="60" BORDER="0"></a></div>
    Dit is het (beoogde) resultaat:

    Iendracht.be - Forum Eendracht Aalst -


    Nu is de vraag:

    Hoe krijg ik die banners enkele pixels meer naar beneden en naar echts, zodat ze niet zo tegen de rand plakken ?

    Dank op voorhand
    no votes  

  2. #2
    Scrimrage's Avatar
    Registered
    02/04/09
    Location
    leuven
    Posts
    1,109
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    1/99
    margin-right & margin-top

    maar normaal splits je layout & code op. Voor lay-out steek je alles in een css(cascading style sheet) bestand
    no votes  

  3. #3
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Quote Originally Posted by Scrimrage View Post
    This quote is hidden because you are ignoring this member. Show
    margin-right & margin-top

    maar normaal splits je layout & code op. Voor lay-out steek je alles in een css(cascading style sheet) bestand
    een id maken met margin-top en right en aan je a hangen idd. Trouwens verkeerde prefix , should have been HTML/JS
    Last edited by adrianhates; 14-06-2010 at 19:26.
    no votes  

  4. #4
    Drone's Avatar
    Registered
    28/05/03
    Location
    bmb
    Posts
    744
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    15/15
    Code:
    <div style="background-image: url(&quot;http://www.iendracht.be/forum/styles/serenity/theme/images/site_logo.jpg&quot;); height: 110px; width: 956px; position: relative;">
         <a href="javascript:gothere()" style="position: absolute; right: 10px; top: 10px; display: block;">
                <img src="http://www.iendracht.be/images/banners/forum/vandenborreforum.gif">
          </a>
    </div>
    Maar half en half getest dus niet 100% zeker.
    no votes  

  5. #5

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    Bedankt ! Zoals je kan zien lijkt dat wel te werken... Is die code deftig nu ? Want met een forum dat veel vernieuwd wordt is dat wel redelijk belangrijk neem ik aan ?

    Nog een vraagje: hoe kan ik dat javascript aanpassen zodat de eerste afbeelding die verschijnt random gekozen wordt ?
    no votes  

  6. #6
    Scrimrage's Avatar
    Registered
    02/04/09
    Location
    leuven
    Posts
    1,109
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    1/99
    JavaScript random() Method

    alle foto's in nen array, en dan random een nummerke daaruit nemen.
    no votes  

  7. #7

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    Probleem: bij sommigen worden de banners overeen weergeven...

    Zie screenshot:

    Imageshack - pic32757.jpg
    no votes  

  8. #8

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    Niemand die weet hoe dit komt ? Ik heb het nog nooit gehad maar bij sommigen is het dus wel zo ...

    Verder werden er steeds 3 banners weergegeven, maar nu moeten dat er dus drie zijn. Ik dacht dat ik alles correct had aangepast in het javascript, maar hij blijft er maar drie weergeven, wat doe ik verkeerd ?

    <head>
    <!-- INCLUDE ca_config.html -->
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-language" content="{S_USER_LANG}" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="resource-type" content="document" />
    <meta name="distribution" content="global" />
    <meta name="copyright" content="2005-2009 Iendracht.be" />
    <meta name="description" content="Supportersforum van Eendracht Aalst - Discussieer mee op Iendracht.be !" />
    <meta name="keywords" content="forum, eendracht, aalst, iendracht, supporters, sfeer, voetbal, oilsjt, ajuinen, football, soccer, belgium, opc, carnaval, ambiance, foto, video, wedstrijden, speler, interviews" />
    <meta name="robots" content="index, follow" />
    <meta name="revisit-after" content="1 days" />
    <!-- Forum, Eendracht, Aalst --><cmt>

    <link rel="shortcut icon" href="http://www.iendracht.be/images/favicon.ico" />
    <title>{SITENAME} - <!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{TOPIC_TITLE}</title>

    <link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="{T_THEME_PATH}/ie7.css" />
    <![endif]-->

    <script type="text/javascript">
    // <![CDATA[


    function popup(url, width, height, name)
    {
    if (!name)
    {
    name = '_popup';
    }

    window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
    return false;
    }

    function jumpto()
    {
    var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
    var perpage = '{PER_PAGE}';
    var base_url = '{A_BASE_URL}';

    if (page !== null && !isNaN(page) && page > 0)
    {
    document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * perpage);
    }
    }

    /**
    * Find a member
    */
    function find_username(url)
    {
    popup(url, 760, 570, '_usersearch');
    return false;
    }

    /**
    * Mark/unmark checklist
    * id = ID of parent container, name = name prefix, state = state [true/false]
    */
    function marklist(id, name, state)
    {
    var parent = document.getElementById(id);
    if (!parent)
    {
    eval('parent = document.' + id);
    }

    if (!parent)
    {
    return;
    }

    var rb = parent.getElementsByTagName('input');

    for (var r = 0; r < rb.length; r++)
    {
    if (rb[r].name.substr(0, name.length) == name)
    {
    rb[r].checked = state;
    }
    }
    }

    <!-- IF ._file -->

    /**
    * Play quicktime file by determining it's width/height
    * from the displayed rectangle area
    *
    * Only defined if there is a file block present.
    */
    function play_qt_file(obj)
    {
    var rectangle = obj.GetRectangle();

    if (rectangle)
    {
    rectangle = rectangle.split(',')
    var x1 = parseInt(rectangle[0]);
    var x2 = parseInt(rectangle[2]);
    var y1 = parseInt(rectangle[1]);
    var y2 = parseInt(rectangle[3]);

    var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
    var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
    }
    else
    {
    var width = 200;
    var height = 0;
    }

    obj.width = width;
    obj.height = height + 16;

    obj.SetControllerVisible(true);

    obj.Play();
    }
    <!-- ENDIF -->

    if(navigator.userAgent && navigator.userAgent.indexOf('Mac OS X') > 0)
    {
    document.write('<link rel="stylesheet" href="{T_THEME_PATH}/mac.css" type="text/css" />');
    }

    // ]]>
    </script>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -

    if (document.images) {
    ads = new Array(4);
    ads[0] = "http://www.iendracht.be/images/banners/forum/vandenborreforum.gif";
    ads[1] = "http://www.iendracht.be/images/banners/forum/lasfiestasforum.gif";
    ads[2] = "http://www.iendracht.be/images/banners/forum/becycleforum.gif";
    ads[3] = "http://www.iendracht.be/images/banners/laptopshop_banner_280x60.gif";
    }

    newplace = new Array(4);
    newplace[0] = "http://www.iendracht.be/component/content/article/42-vaste-paginas/676-van-den-borre-bert"
    newplace[1] = "http://www.lasfiestas.be"
    newplace[2] = "http://www.be-cycle.com"
    newplace[3] = "http://laptop-shop.be/"

    var timer = null
    var counter = 0

    function banner() {
    timer=setTimeout("banner()", 4500);
    counter++;
    if (counter >= 4)
    counter = 0;
    document.bannerad.src = ads[counter];
    }

    function gothere() {
    counter2 = counter;
    window.location.href = newplace[counter2];
    }

    // - End of JavaScript - -->
    </SCRIPT>

    </head>

    <BODY onload="banner()">

    <table border="0" cellspacing="0" cellpadding="0" width="{$CA_WIDTH}" id="maintable" align="center">
    <tr>
    <td id="logorow" align="center">

    <div style="background-image: url(http://www.iendracht.be/forum/styles...ite_logo.jpg); height: 110px; width: 956px; position: relative; border: 1px solid black;">



    <a href="javascript:gothere()" style="position: absolute; right: 10px; top: 10px;"><IMG SRC="http://www.iendracht.be/images/banners/forum/vandenborreforum.gif" WIDTH="280" HEIGHT="60" BORDER="0" NAME="bannerad"></a>

    </div>

    </td>




    <tr>
    <td class="navtd">
    <div class="navrow">
    <div class="navrow-right">
    <a href="{U_FAQ}">{L_FAQ}</a>
    <!-- IF U_RESTORE_PERMISSIONS --> • <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSI ONS}</a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH --> • <a href="{U_SEARCH}">{L_SEARCH}</a><!-- ENDIF -->
    <!-- IF not S_IS_BOT -->
    <!-- IF S_DISPLAY_MEMBERLIST --> • <a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a><!-- ENDIF -->
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT --> • <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- ENDIF -->
    </div>
    <!-- IF not S_IS_BOT -->
    <!-- IF S_USER_LOGGED_IN --><a href="{U_PROFILE}">{L_PROFILE}</a><!-- ENDIF -->
    <!-- IF S_USER_LOGGED_IN -->
    <!-- IF S_DISPLAY_PM --> • <a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->

    <!-- ELSEIF S_REGISTER_ENABLED --><a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
    &#8226 <b> <a href="http://www.iendracht.be"> Ga naar de website</a></b>
    &#8226 <b> <a href="http://www.iendracht.be/index.php/iendrachtbe/contacteer-ons"> Contacteer ons</a></b>
    <!-- ENDIF -->

    </div>


    <div class="navrow2"><b><div class="navrow-right">
    {CURRENT_TIME}
    </div>
    <a href="{U_INDEX}">{L_INDEX}</a><!-- BEGIN navlinks --> &#187; <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAM E}</a><!-- END navlinks -->
    </div>
    </td>

    </tr>

    <tr>
    <td id="contentrow">

    <!-- IF not S_IS_BOT && not $CA_SKIP_PM_NOTIFY && S_USER_LOGGED_IN && S_DISPLAY_PM -->
    <!-- IF S_USER_NEW_PRIVMSG -->
    <div class="pm-notify-new"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
    <!-- ELSEIF S_USER_UNREAD_PRIVMSG -->
    <div class="pm-notify-unread"><div class="pm-notify-header">{L_PRIVATE_MESSAGES}</div><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></div>
    <!-- ENDIF -->
    <!-- ENDIF -->

    <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
    <div class="pm-notify-new"><div class="pm-notify-header">{L_INFORMATION}</div>{L_BOARD_DISABLED}</div>
    <!-- ENDIF -->
    <center><!-- INCLUDE announcement_centre.html --></center>

    <!-- IF S_DISPLAY_SEARCH -->
    <p class="searchbar">
    <span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED} </a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_T OPICS}</a></span>
    <!-- IF S_USER_LOGGED_IN -->
    <span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
    <!-- ENDIF -->
    </p>
    <!-- ENDIF -->



    <br style="clear: both;" />

    </body>
    no votes  

  9. #9
    woony's Avatar
    Registered
    03/12/03
    Location
    Oostende
    Posts
    2,599
    iTrader
    78 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/10
    ik denk, heb het maar snel bekeken.

    hier

    Code:
    var timer = null
    var counter = 0
    
    function banner() {
    timer=setTimeout("banner()", 4500);
    counter++;
    if (counter >= 4)
    counter = 0;
    document.bannerad.src = ads[counter];
    }
    doe je uw counter + 1 nog voor je de eerste getoond hebt

    zal dus wss moeten uw counter opt einde zetten en niet int begin. van uw "loop"
    Code:
    function banner() {
    timer=setTimeout("banner()", 4500);
    if (counter >= 4) counter = 0;
    document.bannerad.src = ads[counter];
    counter++;
    }
    probeer da eens
    no votes  

  10. #10

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    Dat lost het inderdaad op.

    Wat ik nu wel heb is dat er een willekeurige link wordt toegewezen aan een afbeelding. En dat is uiteraard niet de bedoeling: Afbeelding 1 moet naar Link 1 gaan enzoverder...

    Dit was vroeger wel niet, maar ik zie niet in wat er nu verandert is ? Als ik op de vierde klik is er een soort van javascript error, er komt dan in de link op "undefined"

    Iemand een idee ? :-)
    no votes  

  11. #11

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    De links zijn niet willekeurig:

    Afbeelding 0 geeft Link 1 weer
    Afbeelding 1 geeft Link 2 weer
    Afbeelding 2 geeft Link 3 weer
    Afbeelding 3 is "Undefined"
    no votes  

  12. #12
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    undefined wilt zeggen dat er niks gevonden wordt of dat ge bvb een index in een array aanspreekt die geen waarde bevat.. Maar voor de rest kan ik echt niet volgen ze :

    Eerst dit :

    Quote Originally Posted by Jeroen07 View Post
    This quote is hidden because you are ignoring this member. Show
    Dat lost het inderdaad op.

    Wat ik nu wel heb is dat er een willekeurige link wordt toegewezen aan een afbeelding. En dat is uiteraard niet de bedoeling: Afbeelding 1 moet naar Link 1 gaan enzoverder...
    Dan dit :

    Quote Originally Posted by Jeroen07 View Post
    This quote is hidden because you are ignoring this member. Show
    De links zijn niet willekeurig:

    Afbeelding 0 geeft Link 1 weer
    Afbeelding 1 geeft Link 2 weer
    Afbeelding 2 geeft Link 3 weer
    Afbeelding 3 is "Undefined"
    eh?

    Ik dacht trouwens ook dat ge met 3 afbeeldingen werkte ipv 4?
    Arrays en hun indexen zijn zero based he Dus als ge ' new Array(3) ' doet , is het derde element in uw array gelijk aan het element in uw array met index 2.

    Die afbeeldingen 3 zou daar dus volgens mij gewoon niet mogen komen en heeft te maken met dat ge wss ergens een checkske doet als in ' <= ' terwijl het '<' moet zijn, oftewel uw maximum waarden verlagen met 1

    max = ( count( array ) - 1 )

    Code:
    var counter = 0;
    setTimeout("banner()", 4500);
    
    function banner() {
        if (counter == 3) counter = 0;
        document.bannerad.src = ads[counter];
        // hier uw link dan nog juist zetten
        counter++;
        setTimeout("banner()", 4500);
    }
    Als ge uw link array dan respectievelijk opbouwt met uw ads array dan kunt ge dezelfste counter var gebruiken voor uw index
    Last edited by adrianhates; 02-08-2010 at 20:00.
    no votes  

  13. #13

    Registered
    03/06/06
    Posts
    510
    iTrader
    0
    Mentioned
    0 Post(s)
    Het script was inderdaad oorspronkelijk bedoeld voor 3 banners en ik heb daar wat aan geprutst om zo 4 banners weer te geven. Maar blijkbaar niet goed genoeg, want de links zijn niet willekeurig (verkeerd gezegd in eerste topic) maar ze gaan dus eentje verder.

    Nu is mijn Javascript kennis te beperkt hiervoor, maar wat zou jij dan aanpassen in onderstaande code om die script deftig te krijgen voor 4 banners (en bv. 5 banners als dat later nodig zou zijn ?)

    HTML Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -
    
    if (document.images) {
    ads = new Array(4);
    ads[0] = "http://www.iendracht.be/images/banners/laptopshop_banner_280x60.gif";
    ads[1] = "http://www.iendracht.be/images/banners/forum/lasfiestasforum.gif";
    ads[2] = "http://www.iendracht.be/images/banners/forum/becycleforum.gif";
    ads[3] = "http://www.iendracht.be/images/banners/forum/vandenborreforum.gif";
    }
    
    newplace = new Array(4);
    newplace[0] = "http://www.iendracht.be/forum"
    newplace[1] = "http://www.laptop-shop.be/"
    newplace[2] = "http://www.lasfiestas.be"
    newplace[3] = "http://www.be-cycle.com"
    
    var timer = null
    var	 counter = 0
    
    function banner() {
    timer=setTimeout("banner()", 4500);
    if (counter >= 5) counter = 0;
    document.bannerad.src = ads[counter];
    counter++;
    }
    
    function gothere() {
    		counter2 = counter;
    		window.location.href = newplace[counter2];
    }
    
    // - End of JavaScript - -->
    </SCRIPT>
    no votes  

  14. #14
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    HTML Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Beginning of JavaScript -
    
    if (document.images) {
    ads = new Array(4);
    ads[0] = "http://www.iendracht.be/images/banners/laptopshop_banner_280x60.gif";
    ads[1] = "http://www.iendracht.be/images/banners/forum/lasfiestasforum.gif";
    ads[2] = "http://www.iendracht.be/images/banners/forum/becycleforum.gif";
    ads[3] = "http://www.iendracht.be/images/banners/forum/vandenborreforum.gif";
    }
    
    newplace = new Array(4);
    newplace[0] = "http://www.iendracht.be/forum"
    newplace[1] = "http://www.laptop-shop.be/"
    newplace[2] = "http://www.lasfiestas.be"
    newplace[3] = "http://www.be-cycle.com"
    
    var counter = 0;
    
    // banner oproepen na 4500 ms
    setTimeout("banner()", 4500);
    
    function banner() {
    if (counter == 4) counter = 0;
    document.bannerad.src = ads[counter];
    counter++;
    setTimeout("banner()", 4500);
    }
    
    function gothere() {
        window.location = newplace[counter];
    }
    
    // - End of JavaScript - -->
    </SCRIPT>
    Niet getest maar ik denk wel da da moet werken..
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in