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

Webprogrammeren & scripting

Opgelost: Beetje hulp nodig met CSS,Javascript,php??

leon de graaff
14 antwoorden
  • Heey,

    Ik loop een beetje tegen een probleem aan met mijn website: http://www.leondegraaff.nl

    Ik wil namelijk mijn header van verschillende foto's voorzien.

    Nu is het zo dat de foto van m'n header in m'n CSS zit geschreven zegmaar.

    Nu gebruikte ik voorheen een javascript wat per keer dat je de pagina vernieuwd die foto veranderde.

    Ik weet wel hoe ik dat in de html pagina moet schrijfen maar ik zou geen idee hebben hoe ik dat in de css gan plaatsen.

    Hier is het stukje css waar het om gaat [code:1:b14e43afec]/*–container–*/
    #wrapper {
    width: 960px;
    margin: 0 auto;
    }

    #header {
    width: 960px;
    height: 384px;
    float: left;
    background: url(images/header.png) no-repeat; <—–
    }

    #content {
    width: 960px;
    float: left;
    }

    #content #left-col {
    width: 600px;
    float: left;
    position: relative;
    padding-right: 30px;
    }

    #content #right-col {
    width: 300px;
    margin-top: 20px;
    float: left;
    position: relative;
    }

    #content #right-col #sidebar {
    width: 300px;
    float: left;
    position: relative;
    }

    #footer {
    width: 100%;
    float: left;
    color: #fff;
    background: #303030;
    padding-top: 20px;
    height: 40px;
    margin-top: 20px;
    }

    /*–header–*/[/code:1:b14e43afec]

    En hier is de header:
    [code:1:b14e43afec]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!–[if IE 6]>
    <link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/hack.css" type="text/css" />
    <![endif]–>
    <link rel="alternate" type="application
    ss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>
    </head>
    <body>
    <!–wrapper–>
    <div id="wrapper">
    <!–header–>
    <div id="header">


    <!–search–>

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <!–page-navigation–>
    <div id="menu">

    </div><!–page-navigation–>

    </div><!–header-end–>


    [/code:1:b14e43afec]

    Misschien wat veel info, maar beter te veel dan te weinig :)

    Wie o wie kan mij helpen met het integreren van een javascript dat er voor zorgt dat de header steeds gewijzigd word???
  • Simpelste oplossing lijkt me om dit stukje uit de CSS-file te halen:
    [code:1:9ee207218d]background: url(images/header.png) no-repeat;[/code:1:9ee207218d]
    en dan dmv javascript dat als inline CSS toe te laten passen, dus iets als:
    [code:1:9ee207218d]document.write('<div id="header" style="background: url(images/' +headerimage[x]+ ') no-repeat;">')';[/code:1:9ee207218d]
    Waarbij
  • Okee, :)

    Nou ben ik wat dat betreft echt een leek op het gebied van scripting, en dus al blij als ik iets vind wat ergens op lijkt :)

    Ik heb even het script op gezocht wat ik normaal gebruik voor de random banner:

    [code:1:d25e86fbfe]<!– TWO STEPS TO INSTALL RANDOM IMAGE:

    1. Copy the coding into the HEAD of your HTML document
    2. Add the last code into the BODY of your HTML document –>

    <!– STEP ONE: Paste this code into the HEAD of your HTML document –>

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    <!– Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.

    theImages[0] = '1.gif'
    theImages[1] = '2.gif'
    theImages[2] = '3.gif'
    theImages[3] = '4.gif'

    // do not edit anything below this line

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }

    // End –>
    </script>

    </HEAD>

    <!– STEP TWO: Copy this code into the BODY of your HTML document –>

    <BODY>

    <SCRIPT LANGUAGE="JavaScript">

    <!– This script and many more are available free online at –>
    <!– The JavaScript Source!! http://javascript.internet.com –>

    <!– Begin
    showImage();
    // End –>
    </script>

    <p><center>
    <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>

    <!– Script Size: 1.49 KB –>[/code:1:d25e86fbfe]

    Kan iemand me helpen met dit te integreren in de header :)
  • Wijzig in bovenstaand kant-en-klaar-script deze regel:
    [code:1:7ddf683984]document.write('<img src="'+theImages[whichImage]+'">');[/code:1:7ddf683984]
    naar
    [code:1:7ddf683984]document.write('<div id="header" style="background: url(images/' +theImages[whichImage]+ ') no-repeat;">')';[/code:1:7ddf683984]
    en in je HTML laat je het stuk
    [code:1:7ddf683984]
    <SCRIPT LANGUAGE="JavaScript">

    <!– This script and many more are available free online at –>
    <!– The JavaScript Source!! http://javascript.internet.com –>

    <!– Begin
    showImage();
    // End –>
    </script> [/code:1:7ddf683984]
    terugkomen in plaats van waar nu staat
    [code:1:7ddf683984]<div id="header"> [/code:1:7ddf683984]
  • Okee, dat heb ik dus gedaan en dat geeft niet veel soeps :)

    Dit is wat is wat ik er dan van gemaakt heb:
    [code:1:c7b45d14df]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!–[if IE 6]>
    <link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/hack.css" type="text/css" />
    <![endif]–>
    <link rel="alternate" type="application
    ss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>

    <SCRIPT LANGUAGE="JavaScript">

    <!– Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.

    theImages[0] = 'wp-content/themes/blue-black/images/header.png'


    // do not edit anything below this line

    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
    preBuffer[i] = new Image()
    preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<div id="header" style="background: url(images/' +theImages[whichImage]
    + ') no-repeat;">')';
    }

    // End –>
    </script>

    </head>

    <body>
    <!–wrapper–>
    <div id="wrapper">
    <!–header–>

    <SCRIPT LANGUAGE="JavaScript">

    <!– Begin
    showImage();
    // End –>
    </script>


    <!–search–>

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    <!–page-navigation–>
    <div id="menu">

    </div><!–page-navigation–>

    </div><!–header-end–>


    [/code:1:c7b45d14df]

    ivm het online houden van m'n site heb ik het weer terug verandert maar dit is het resultaat:
    [img:c7b45d14df]http://www.leondegraaff.nl/website/voorbeeld/voorbeeld1.jpg[/img:c7b45d14df]
  • Wat houdt "niet veel soeps" in? Staat de header niet goed, worden de afbeeldingen niet gevonden, etc? Pas als jij duidelijk bent in wat er aan de hand is, kan iemand op afstand een educated guess doen wat daarvan de oorzaak kan zijn en wat dan de oplossing is.

    Mijn eerste gok is overigens dat het pad naar de afbeeldingen niet klopt. In de stylesheet ga je uit van het pad vanaf de stylesheet, nu moet je uitgaan van het pad vanaf de opgevraagde pagina of simpelweg een absoluut pad ingeven.


    Edit: ik zie dat je jezelf verhuurt als websitebouwer. Ik zou het dan toch wel prettig vinden als je zelf ook wat moeite doet om het probleem uit te zoeken ipv alleen hier neer te plempen met de melding "hijdoetutnie". Je zou toch verwachten dat je een professional bent.
  • Ik heb een plaatje neergezet waar op staat wat er gebeurt :)

    Dus hier nog maar een keer dat plaatje.

    [img:661281b5f2]http://www.leondegraaff.nl/website/voorbeeld/voorbeeld1.jpg[/img:661281b5f2]

    wbt dat laatste :)

    Ik maak idd website's maar ik ben zeker geen programmeur, en ik geef ook niet snel op. Ik ben hier zelf al een tijdje mee bezig geweest, en zoals ik ook al had gezegd, gebruik ik het javascript vaker, maar lukt het me gewoon niet om het hier in te verwerken.

    dus sorry, maar de opmerking " alleen hier neer te plempen met de melding " hijdoetutniet" " komt echt helemaal nergens vandaan.

    Ik heb inmiddels heel wat websites en forums gemaakt en dat is me allemaal heel goed gelukt, mag ik dan nu een keer om hulp vragen ;)

    Edit:

    Ik heb inmiddels maar een extra website gemaakt, waar ik kan werken aan de header want alleen een plaatjes is niet erg handig.

    http://www.leondegraaff.nl/blog/

    zoals je ziet, laat hij de header niet.

    heb ook een directe link naar het plaatje gemaakt dus daar kan het niet aan liggen
    [code:1:661281b5f2]<!– Begin
    // Set up the image files to be used.
    var theImages = new Array() // do not change this
    // To add more image files, continue with the
    // pattern below, adding to the array.

    theImages[0] = 'http://www.leondegraaff.nl/blog/wp-content/themes/blue-black/images/header.png'


    // do not edit anything below this line[/code:1:661281b5f2]
  • weet niet waar je dats cript vandaan hebt, maar het is niet veel soeps.
    Zo worden regels niet afgesloten met een ; (overigens niet nodig in JS maar wel netjes vind ik dan).
    Wordt er een variabele j=0 gedeclareerd, en vervolgens niet gebruikt - wel een i die geen expliciete waarde krijgt (wel impliciet 0).
    En er staat een ' teveel op de cruciale regel waardoor de hele functie showImage niet wordt aangemaakt (zie error console in FF of foutmeldingen box in IE).

    Verander naar dit:
    [code:1:b653ab681f]function showImage(){
    document.write('<div id="header" style="background: url(images/' +theImages[whichImage]
    + ') no-repeat;">');
    } [/code:1:b653ab681f]Dus zonder een ' direct voor de laatste ;

    Vraag me overigens ook af, als je toch met PHP werkt, waarom het niet door PHP laten doen. Wanneer JS uitstaat, wordt de header nu niet zichtbaar.
  • Heb het geprobeerd, maar der is niet echt veel verschil.

    Wbt het php of js van mij mag het zeker php worden maar zou ik alleen daar helemaal niets voor weten :)

    Ik ga even zoeken of ik wat tegen kom, mocht ik der niet uit komen zal ik het hier wel weer laten weten, in de tussen tijd zijn alle suggesties welkom ;)
  • Okee wat ik nu heb gedaan is het volgende:

    ik heb m'n header herstelt naar z'n origineel.
    deze verwijst naar het css file:

    [code:1:63b55933a2]#header {
    width: 960px;
    height: 384px;
    float: left;
    background: <?php include "http://www.blog.leondegraaff.nl
    andomimage
    andomimage.php"; ?> no-repeat;
    }[/code:1:63b55933a2]


    daarna heb ik in
    andomimage/ een bestandje gemaakt met:

    [code:1:63b55933a2]<?php



    /*

    * Name your images 1.jpg, 2.jpg etc.

    *

    * Add this line to your page where you want the images to

    * appear: <?php include "randomimage.php"; ?>

    */



    // Change this to the total number of images in the folder

    $total = "1";



    // Change to the type of files to use eg. .jpg or .gif

    $file_type = ".jpg";



    // Change to the location of the folder containing the images

    $image_folder = "http://leondegraaff.nl/blog
    andomimage
    andom/";



    // You do not need to edit below this line



    $start = "1";



    $random = mt_rand($start, $total);



    $image_name = $random . $file_type;



    echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";



    ?>

    [/code:1:63b55933a2]

    in de map "randomimage" heb ik een mapje gezet "random"

    met daar in een afbeelding die heet: 1.jpg

    Maar helaas heeft het resultaat alleen dat ik iig wel een mooi uitgelijnde site heb maar nog geen header bg :)

    waar gaat het fout?




  • Ik heb even een rar file geupload met daar in de thema pagina's als iemand een ingeving heeft hoe je dit kan oplossen, dan kan je hier de bron codes vinden :)

    www.leondegraaff.nl/blue-black.rar
    • [*:428e598d72]Kun je überhaupt wel PHP uitvoeren binnen CSS? [*:428e598d72]Vooropgesteld dat 1 kan: de PHP geeft als resultaat [code:1:428e598d72]<img src="http://leondegraaff.nl/blog
      andomimage
      andom/1.jpg" alt="1" />[/code:1:428e598d72] Wat dus inhoudt dat je CSS-regel zou worden: [code:1:428e598d72]background: <img src="http://leondegraaff.nl/blog
      andomimage
      andom/1.jpg" alt="1" /> no-repeat;[/code:1:428e598d72] [/list:o:428e598d72]Ik mag hopen dat je inziet dat die output niet bepaald juist is.



  • Heb het probleem opgelost :) helaas via een ander forum :)

    Evengoed bedankt ;)

    dit is de oplossing

    Header.php:
    [code:1:2eba8885da]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <!–[if IE 6]>
    <link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/hack.css" type="text/css" />
    <![endif]–>
    <link rel="alternate" type="application
    ss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <style type="text/css">
    <!–
    #header
    {
    background: url('<?php include 'randomimage.php'; ?>') no-repeat;
    }
    –>
    </style>

    <?php wp_head(); ?>
    </head>
    <body>
    <!–wrapper–>
    <div id="wrapper">
    <!–header–>

    <div id="header">


    <!–search–>


    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    <!–page-navigation–>
    <div id="menu">

    </div><!–page-navigation–>

    </div><!–header-end–>


    [/code:1:2eba8885da]

    en randomimage.php:
    [code:1:2eba8885da]<?php



    /*

    * Name your images 1.jpg, 2.jpg etc.

    *

    * Add this line to your page where you want the images to

    * appear: <?php include "randomimage.php";

    */

    // Change this to the total number of images in the folder

    $total = "2";

    // Change to the type of files to use eg. .jpg or .gif

    $file_type = ".jpg";

    // Change to the location of the folder containing the images

    $image_folder = "images
    andom/";

    // You do not need to edit below this line

    $start = "1";

    $random = mt_rand($start, $total);

    $image_name = $random . $file_type;

    echo $image_folder . $image_name;
    [/code:1:2eba8885da]

  • Eigenlijk dus waar ik je ook al op wees.

    En zoals ze op PFZ ook al zeiden: het helpt als je duidelijk bent in wat het probleem is en volledig vertelt wat je al gedaan hebt (en dat ook klopt met de werkelijkheid).

    Ik klink misschien een beetje nukkig, maar ik help vooral graag mensen die zelf ook een beetje meewerken en duidelijk zijn.

Beantwoord deze vraag

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