[javascript] linked random image - Softwareontwikkeling

maandag 23 augustus 2004 22:09

Acties:

Verwijderd

Topicstarter

we kennen allemaal wel die javascritpjes die een random image of random bakgroundimage op je site plaatsen. Echter waar ik niet uitkom (en kan het ook nergens vinden) is het volgende.

Stel ik heb 4 random images A-B-C-D. Als image 'A' van gekozen is dan wil ook dat daar aangelinkte images zeg 'a' en 'aa' en 'aaa' automatische gekozen worden.

Wil nl een verschillende kleuren layouts per sectie, dus voor sectie "algemeen" een random kleur , en voor 'projecten' een random kleur. Mijn template bestaat uit 4 images, welke ik dus alle vier random moet verwisslen, maar wel zo dat je alle vier van dezelfde kleur blijven.

Beetje wazig omschreven, maar hoop dat het duidelijk is. Enig ideee hoe dit aan te pakken

maandag 23 augustus 2004 22:13

Acties:

gorgi_19

Kruimeltjes zijn weer op :9

Zie P&W FAQ - HTML / javascript /css, etc...

Javascript hoort thuis in Webdesign & Graphics

[ Voor 44% gewijzigd door gorgi_19 op 23-08-2004 22:13 ]

Digitaal onderwijsmateriaal, leermateriaal voor hbo

maandag 23 augustus 2004 22:24

Acties:

Koeniepoenie

Je moet dan 1 random getal als uitgangspunt nemen, en daar op verder borduren.

code:

var namen = ['blauw','wit','rood'];
var kleuren = ['blue','#fff','red'];

var getal = Math.round(Math.random() * namen.length-1);

Hier heb je dus een willekeurige kleur.

En als ik het juist heb begrepen, wil je dus bij een willekeurige achtergrondkleur, ook bijbehorende plaatjes hanteren.

Je kunt dan mbv JS alle img tags doorlopen en dan een stukje extra aan de src toevoegen.

code:

function fixSrc() {
    getal = Math.round(Math.random() * namen.length-1);
    img = document.getElementsByTagName('a');
    for (var i=0, j = img.length;i<j;i++) {
        if (img[i].class == 'blaat') { // welke class moeten de img tags hebben
            tmp = img[i].src.split('.');
            img[i].src = tmp[0]+'_'+namen[getal]+tmp[1];
        }
    }
    document.body.bgColor = kleuren[getal];
}
window.onload = fixSrc;

Je hebt dan een array 'namen', waar zeg maar de kleuren namen in staan, deze worden dan aan de 'src' van de plaatjes toegevoegd.

[ Voor 10% gewijzigd door Koeniepoenie op 23-08-2004 22:25 ]

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

dinsdag 24 augustus 2004 07:43

Acties:

Verwijderd

Dat zou ik gewoon met CSS oplossen, met een klasse op de BODY.

HTML:

<body class="Theme1">
    <div id="MainMenu">...</div>
    <div id="Content">...</div>
    <div id="Sidebar">...</div>
    ...etc

Cascading Stylesheet:

body.Theme1 #MainMenu {
    background:#CCC url(gfx/theme1-menu.gif);
}

body.Theme2 #MainMenu {
    background:#CCC url(gfx/theme2-menu.gif);
}

...etc

Door verschillende klasses aan de BODY toe te kennen kun je zo over de hele pagina kleuren en (background) images veranderen.
Of slaat dit de plank volledig mis?

dinsdag 24 augustus 2004 12:50

Acties:

Verwijderd

Topicstarter

werkt dit ook met een combinatie van background images en normale images?

[ Voor 39% gewijzigd door Verwijderd op 24-08-2004 12:50 ]

dinsdag 24 augustus 2004 13:22

Acties:

Verwijderd

Verwijderd schreef op 24 augustus 2004 @ 12:50:
werkt dit ook met een combinatie van background images en normale images?

Ja, maar dan breid je het uit met bijvoorbeeld het volgende:

HTML:

<body class="Theme1">
    [img]"..."[/img]
    [img]"..."[/img]
    [img]"..."[/img]
    ...etc

Cascading Stylesheet:

.Theme1 img.IMG-Theme2,
.Theme1 img.IMG-Theme3 {
    display:none;
}

.Theme2 img.IMG-Theme1,
.Theme2 img.IMG-Theme3 {
    display:none;
}

etc...

Snap je een beetje wat ik bedoel?

[ Voor 21% gewijzigd door Verwijderd op 24-08-2004 13:23 ]