Active Desktop
1. Wat heb je nodig?
2. Welke mappen/bestanden moet je aanmaken?
3. Javascript/CSS
4. (X)HTML
5. Instellen als achtergrond
6. Eindwoord
1. Wat heb je nodig?
Om de 'active desktop' heel de achtergrond te laten bedekken heb je Windows 2000 of Windows XP nodig (als het met andere versies ook kan meld het me even, heb het alleen op deze getest). Verder heb je basiskennis van (X)HTML, Javascript en misschien CSS nodig. Ook een beetje fantasie natuurlijk anders gaan alle achtergronden een beetje op elkaar lijken :).
 top
2. Welke mappen/bestanden moet je aanmaken?
Ik heb mijn wallpaper in het mapje 'Wallpaper' in Mijn Documenten, als ik het over het mapje 'Wallpaper' heb, heb ik het dus over het mapje waar jullie je wallpaper in hebben staan.
Voor deze tutorial maak ik gebruik van 1 map en 3 (hoofd)bestanden. Maak ze zo aan:
Wallpaper/
- images/
- - ...
- activedesktop.html
- boot.js
- style.css
Als je wil kan je ook alvast je achtergrond plaatje en de plaatjes voor je hokjes in de map images zetten.
top
3. Javascript/CSS
Open het bestand boot.js en zet daar het volgende in:
var reldir = 'D:\Mijn documenten\Wallpaper';
var thispage = reldir + '\activedesktop.html';
var f = new Array; // File
var p = new Array; // Parameters
var d = new Array; // Directory
var o = new Array; // Operator
Verander daarin de variable reldir naar de map waar jou desktop in komt/staat.
Zoals je misschien al ziet staat de uitleg achter de variables. f is de locatie waar het programma staat wat hij moet opstarten, p zijn de parameters die hij moet meegeven bij het opstarten (let hierbij op dat je er misschien een spatie voor moet doen), d is de map van waaruit hij het programma moet opstarten en o is wat hij met het programma moet doen (wij gebruiken alleen 'open').
Hier zijn een paar standaard programma's/acties:
// Edit
f[0] = reldir;
p[0] = '';
d[0] = '';
o[0] = 'open';
// My Computer
f[7] = 'C:\WINDOWS\explorer.exe';
p[7] = '/n, /select, "C:\"';
d[7] = '';
o[7] = 'open';
// My Network
f[8] = 'C:\WINDOWS\explorer.exe';
p[8] = '/n, /select, "\\Thoth"';
d[8] = '';
o[8] = 'open';
// My Documents
f[9] = 'D:\Mijn documenten';
p[9] = '';
d[9] = '';
o[9] = 'open';
// My Pictures
f[10] = 'D:\Mijn documenten\Mijn afbeeldingen';
p[10] = '';
d[10] = '';
o[10] = 'open';
// Half-life
f[11] = 'D:\Sierra\Half-Life\hl.exe';
p[11] = '';
d[11] = 'D:\Sierra\Half-Life';
o[11] = 'open';
Bij het toevoegen van locaties moet je erop letten dat je een dubbele backslash gebruikt anders ziet hij de backslash niet.
Bij My Network moet je Thoth veranderen in de netwerknaam van jou computer.
Geen van de bovenstaande stukjes code starten nog iets op, die functie komt nu:
function ShellExec(id)
{
var objShell = new ActiveXObject('Shell.Application');
objShell.ShellExecute(f[id], p[id], d[id], o[id], 1);
}
Je mag helemaal zelf weten wat je met je css doet, ik heb alleen dit gebruikt voor de transparantie van de hokjes (je hoeft alleen op IE te letten want windows parst de achtergrond met IE):
filter: alpha(opacity=75);
top
4. (X)HTML
Ook de (X)HTML ligt helemaal aan jou. Ik heb alleen een pngfix(.js) erin om PNG's met alpha transparantie te gebruiken. Daarvoor heb je het volgende stukje javascript nodig:
// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
En het volgende stukje code in de <head> van je achtergrond:
<!--[if gte IE 5.5000]>
<script language="javascript" type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Hier een voorbeeldje van een link om een programma op te starten:
<a href="javascript: ShellExec(11);">Half-life</a>
En een refresh 'knop' voorbeeld:
<a href="javascript: window.location.href = thispage;" style="position: absolute; top: 10px; right: 10px;"><img src="images/icon-refresh.png" alt="Refresh" /></a>
top
5. Instellen als achtergrond
Om de active desktop in te stellen als achtergrond ga je naar Configuratiescherm > Beeldscherm > Bureaublad > Bureaublad aanpassen ... > Website.
Daar druk je op de knop Nieuw..., daar zoek je het bestand activedesktop.html op en je drukt op Ok.
Twee keer op Ok drukken, naar je bureaublad gaan (windowstoets + D) en dan Rechtermuisknop > Sorteren op > Bureaublad iconen weergeven wegvinken.
Dan bij dat nieuwe vlak op je bureaublad op het pijltje naar beneden. Daar druk je op Over achtergrond spreiden.
Nu ga je weer naar de eigenschappen van je active desktop (het Website scherm). En daar zet je Bureaubladitems vergrendelen aan.
top
6. Eindwoord
Hopelijk kunnen jullie iets met de bovenstaande tutorial, als jullie iets niet snappen laat het me weten en als het vaak voorkomt voeg ik weer een stuk toe aan deze tutorial.
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.32) 