Varför vill man göra detta?
Tänk dig att du t.ex har en webbsida som använder en CSS stilmall för att sköta design och layout. På sidan finns följande div-tagg innanför <body>:
filnamn: index.html
<div id="pageHeader">Titel här</div>som innehåller en bakgrundsbild med följande kod inkluderad i stilmallen:
filnamn: styles.css
#pageHeader {
background-image: url(/images/headers/bigblue.png);
}Då har alla undersidor med det div-ID samma bakgrundsbild och det kan vara lite krångligt att ändra manuellt. Då kom jag på att man kan ange i koden för den aktuella webbsidan en sökväg till den bild man vill ha som bakgrundsbild som då används istället för originalbilden.
Detta är användbart i följande exempel: Du har t.ex en webbsida om ett populärt resmål men vill även ha en undersida som innehåller historia om resmålet. Då tycker du att det hade passat med en annan bild som visar hur området såg ut förr.
Hur Javascriptet fungerar
Skriptet fungerar som så att det söker igenom den aktuella webbsidan efter ett unikt ID som innehåller en sökväg till en bild som ska byta ut den som redan visas på sidan. Om inget ID hittas så lämnas originalet oförändrad.
Placera följande kod som inkluderar skriptet innan taggen :
<script type="text/javascript" src="changeheader.js"></script>Här är koden för skriptet:
filnamn: changeheader.js
//
// cross browser getElementById()
// -- väldigt smidigt sätt men det finns andra implementeringar --
function getObject(id) {
var object = null;
if( document.layers ) {
object = document.layers[id];
} else if( document.all ) {
object = document.all[id];
} else if( document.getElementById ) {
object = document.getElementById(id);
}
return object;
}
/**
* En funktion för cross-browser kompatiblititet när vi lägger till
* events på sidan.
* Den stödjer endast javascript funktioner som har 'on'
* framför (t.ex onLoad).
*/
function addEvent(element, evType, func, useCapture)
{
// Firefox?
if (element.addEventListener)
{
element.addEventListener(evType, func, useCapture);
return true;
}
// Internet Explorer?
else if (element.attachEvent)
{
var ret = element.attachEvent("on"+evType, func);
return ret;
}
else
{
// Visa ett meddelande för besökaren att webbläsaren
// måste uppgraderas för att stödja javascript
// funktionalitetet fullt ut.
var msg = "Your webbrowser doesn't support the Javascript used on this page.\n";
msg += "Please upgrade to be able to use full functionality.\n\n";
msg += "//Staff";
alert(msg);
}
}
//
// Change the headerbackground image
// -- Här är den specifika koden som ändrar bakgrunden --
//
// Copyright © 2008 - Waschman
// License: Open Source
//
function changeHeader()
{
// The div-header
headerBox = getObject("headerBox");
// The div that contains the path
headerPlaceholder = getObject("dynamicHeaderImage");
// Did we fint the right object?
if (headerPlaceholder == null) {
/*alert("Skriptet vet inte vilken bild som ska användas som sidhuvud!\nVar vänlig kontakta support");*/
return false;
}
// Get the path
pathToImage = headerPlaceholder.innerHTML;
// uncomment to hide placeholder if no inline-css is used
//headerPlaceholder.style.display = "none";
// change image
headerBox.style.backgroundImage = "url("+ pathToImage +")";
}
//
// Body onload
// -- Denna kod kör funktionen “changeHeader” vid body onLoad --
addEvent(window, "load", changeHeader);Så, det var koden och nu återstår bara att lägga in följande kodsnutt innanför <body> som aktiverar ändringen. Tänk på att bara lägga in denna kod på de sidor som du vill ska ha en specifik bakgrundsbild som "header".
filnamn: historia.html
<div id="dynamicHeaderImage" style="display: none">/images/headers/new_header_red.png</div>Det är här ni anger vilken ny bild ni vill använda. För att se ett exempel kan ni ladda ner ett komprimerat zip-paket med några testfiler.
(Tillägg 25/7-09) Flytande ramar - IFrame
Om man vill kunna komma åt dynamicHeaderImage som är placerad i en iframe, från huvudsidan, kan man använda följande changeheader.js istället.
Varning!
Observera att koden inte riktigt fungerar som den ska. Allt fungerar förutom att man måste ladda om index sidan manuellt för att bakgrundsbilden ska visas. Detta för att changeHeader() körs vid body onload(). Om något vet hur man fixar detta så skriv gärna en kommentar.
Filnamn: changeheader.js
Beskrivning: Används endast för de som använder iframes. Inte testad med vanliga ramar.
//
// cross browser getElementById()
// -- väldigt smidigt sätt men det finns andra implementeringar --
function getObject(id) {
var object = null;
if( document.layers ) {
object = document.layers[id];
} else if( document.all ) {
object = document.all[id];
} else if( document.getElementById ) {
object = document.getElementById(id);
}
return object;
}
function getIframeObject(oIframe, id) {
var newIframe = getObject(oIframe);
var innerDoc = newIframe.contentDocument || newIframe.contentWindow.document;
if( innerDoc.layers ) {
object = innerDoc.layers[id];
} else if( innerDoc.all ) {
object = innerDoc.all[id];
} else if( innerDoc.getElementById ) {
object = innerDoc.getElementById(id);
}
return object;
}
/**
* En funktion för cross-browser kompatiblititet när vi lägger till
* events på sidan.
* Den stödjer endast javascript funktioner som har 'on'
* framför (t.ex onLoad).
*/
function addEvent(element, evType, func, useCapture)
{
// Firefox?
if (element.addEventListener)
{
element.addEventListener(evType, func, useCapture);
return true;
}
// Internet Explorer?
else if (element.attachEvent)
{
var ret = element.attachEvent("on"+evType, func);
return ret;
}
else
{
// Visa ett meddelande för besökaren att webbläsaren
// måste uppgraderas för att stödja javascript
// funktionalitetet fullt ut.
var msg = "Your webbrowser doesn't support the Javascript used on this page.\n";
msg += "Please upgrade to be able to use full functionality.\n\n";
msg += "//Staff";
alert(msg);
}
}
//
// Change the headerbackground image
// -- Här är den specifika koden som ändrar bakgrunden --
//
// Copyright © 2008 - Waschman
// License: Open Source
//
function changeHeader()
{
// The div-header
headerBox = getObject('headerBox');
// The div that contains the path
headerPlaceholder = getIframeObject('iframeContent', 'dynamicHeaderImage');
// Did we fint the right object?
if (headerPlaceholder == null) {
//alert("Skriptet vet inte vilken bild som ska användas som sidhuvud!\nVar vänlig kontakta support");
return false;
}
// Get the path
pathToImage = headerPlaceholder.innerHTML;
// uncomment to hide placeholder if no inline-css is used
//headerPlaceholder.style.display = "none";
// change image
headerBox.style.backgroundImage = "url("+ pathToImage +")";
}
//
// Body onload
// -- Denna kod kör funktionen “changeHeader” vid body onLoad --
addEvent(window, "load", changeHeader);Använd denna kod för att visa iframe:
<iframe id="iframeContent" name="iframeContent"></iframe>Koden är nästan likadan som den förra men funktionen 'changeHeader' har modifierats och en ny funktion 'getIframeObject' har lagts till.
Lycka till!
