Søg
Avatar billede sansalvador Nybegynder
07. juni 2003 - 21:58 Der er 6 kommentarer og
1 løsning

skygge på en <layer>

Hejsa..

Jeg står og roder med noget dthml, og er interesseret i at smide en skygge på et layer.. er dette muligt?
Avatar billede roenving Novice
07. juni 2003 - 22:04 #1
Prøv dette (3 filer: html, shader.js og shader.css):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>

<!--
<META NAME="Keywords" CONTENT="nøgle">
<META NAME="Robots" CONTENT="ALL">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store">
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=xx">
-->

<link rel="stylesheet" type="text/css" href="shader.css">
<script language="javascript" type="text/javascript" src="shader.js"></script>


</head>

<body onresize onload>
Testside<p>

<div class="shadeHolder">


<img class="shadeIMG" src="eksperten_logo_new.gif">

</div>

</body>

</html>
-----------------------------------------
og shader.js
-----------------------------------------
var startOpacity = 25; // Sæt selv start-opaciteten
var d=document;
function gA(o,tN){return o.getElementsByTagName(tN)}
function pI(s){return parseInt(s)}
function doShade(tbl) {
    var w, h, a, offset, opac, cont = (d.all)? tbl.parentElement : tbl.parentNode;
    w=pI(tbl.offsetWidth); h=pI(tbl.offsetHeight);
    a = new Array();
    var steps = (d.all && !window.createPopup)? 1 : 4; // Antal skygge-steps
    for (var i=1; i<steps+1; i++) {
        offset = i + "px";
        opac = startOpacity / i;
        a[a.length] = '<img class="shader" src="spacerblaa.gif" ';
        a[a.length] = 'style="width:'+w+'px;height:'+h+'px;left:'+offset+';top:'+offset+';z-index:'+i+';';
        if (d.all) a[a.length] = 'filter:alpha(opacity='+opac+')">';
        else a[a.length] = '-moz-opacity:'+(opac/100)+'">';
    }
    cont.innerHTML += a.join("");
}

function initShades() {
    if (d.layers) return; //bemærk dur ikke i NN4
    var aTbl = gA(d,"TABLE");
    for (var i=0; i<aTbl.length; i++) {
        if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
    }
    var aImg = gA(d,"IMG");
    for (var i=0; i<aImg.length; i++) {
        if ( aImg[i].className=="shadeIMG" ) doShade( aImg[i] );
    }
}
window.onload = initShades;
-----------------------------------------
shader.css
-----------------------------------------
.shadeHolder {
    position: relative;
}
.shadeTBL {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}
.shader {
    position: absolute;
    background-color: #000080;
}
.shadeIMG {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}

-- her er det lavet som skygge på billeder, men bare en lille anelse tilretning ...
Avatar billede brokkehoved Nybegynder
07. juni 2003 - 22:09 #2
Umiddelbart lyder det fint! Men er det ikke ret browser-specifikt??? Jeg mener: Hvilke browsere og browserversioner virker det med?

Flis Jessup
Avatar billede roenving Novice
07. juni 2003 - 22:12 #3
Se her, den skulle klare nogle stykker:

http://www.eksperten.dk/spm/342379

citat: Det virker i IE5.5+, NS6+ og Mozilla. Opera skulle kunne forstå det fra version 7 ... version 6 var en ussel bruser, der er skiftet ud af de fleste.
I IE4 til og med 5.0 burde den lave en hård, massiv skygge ... har ikke testet.
Avatar billede sansalvador Nybegynder
07. juni 2003 - 22:12 #4
Den virker måske ok til billeder.. Men til layers er den ik så god .......!

Kan man fixe den, så den virker til layers?
Avatar billede sansalvador Nybegynder
07. juni 2003 - 22:20 #5
Intet af dem virker til layers .... Kun til tabeller, tekst, billeder osv ....


........?
Avatar billede roenving Novice
07. juni 2003 - 22:23 #6
-- tror desværre du har ret ;-(
Avatar billede sansalvador Nybegynder
19. september 2003 - 16:49 #7
...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
25 min siden Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I dag 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »