Avatar billede peterpeter Seniormester
16. maj 2003 - 22:35 Der er 65 kommentarer og
1 løsning

Automatisk skygge på -

Hej Alle
Jeg er ved at lave en side med mange billeder samt nogle tabeller.
Jeg kunne godt tænke mig at sætte en lille smule skygge på billeder samt på nogle af tabellerne.

Kan det lade sig gøre ??

Er der noget specielt CSS kode, der gør at der kommer skygge på ???

Det skal være en lille og diskret skygge.

PS: Jeg regner med at det er nemmest med CSS, men er der andre måder at automatisere det på ???

Mange tak.
Avatar billede roenving Novice
16. maj 2003 - 22:39 #1
Ikke noget cross-browser, men olebole har lavet noget flot (her tilpasset tabeller:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> TITLE </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadeHolder {
    position: relative;
}
.shadeTBL {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}
.shader {
    position: absolute;
    background-color: #000080;
}
</style>
<script type="text/JavaScript">
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="test_img/t.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 initShadeTBLs() {
    if (d.layers) return;
    var aTbl = gA(d,"TABLE");
    for (var i=0; i<aTbl.length; i++) {
        if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
    }
}
window.onload = initShadeTBLs;
</script>
</head>
<body>

<div class="shadeHolder">
    <table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur<br>
            adipisicing elit, sed do eiusmod tempor incididunt<br>
            ut labore et dolore magna aliqua.</td>
    </tr>
    </table>
</div>

<br><br>

<div class="shadeHolder">
    <table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
    <tr>
        <td>Ut enim ad minim veniam, quis nostrud<br>
            exercitation ullamco laboris nisi ut aliquip ex<br>
            ea commodo consequat. Duis aute irure dolor in<br>
            reprehenderit in voluptate velit esse cillum</td>
    </tr>
    </table>
</div>

</body>
</html>

hth
jes
Avatar billede roenving Novice
16. maj 2003 - 22:40 #2
Undskyld mine alt for korte formuleringer:

Du kan ikke lave noget crossbrowser med css, som lægger skygge på ...

men ovenstående skulle kunne alt hvad du er interesseret i, måske skal det tilpasses en anelse til billeder m.v.
Avatar billede doggy82 Praktikant
16. maj 2003 - 22:41 #3
yup - olebole rules !
se evt. her http://www.eksperten.dk/spm/342379
men det går nok ikke hvis det er på en masse billeder !
Se skyggen i brug her: http://home21.inet.tele.dk/doggy82/brown/start.htm
(P.S. siden er ikke helt "klar")
Avatar billede peterpeter Seniormester
16. maj 2003 - 22:44 #4
Det ser da fantastisk ud........

Crossbrowser ??? Hvad betyder det ??
Avatar billede peterpeter Seniormester
16. maj 2003 - 22:45 #5
Okay, nu vil jeg til at anvende olebole's script.

Kan jeg sætte koden i en ekstern fil, eller skal det ind på hver side ??
Avatar billede viciodk Praktikant
16. maj 2003 - 22:46 #6
Crossbrowser = at det virker i alle browsere: Netscape, Internet Explorer, Mozilla, Opera; både i de nyeste og næstnyeste versioner. Du kan evt. læse hele mit spørgsmål til OleBole her: http://www.eksperten.dk/spm/342379
Avatar billede roenving Novice
16. maj 2003 - 22:48 #7
Du bliver nødt til at lægge div'er omkring alle de ting, du skal have skygge på, dvs. i hver fil.

scriptet og css-filen kan lægges som externe filer du linker til.

mvh
jes
Avatar billede doggy82 Praktikant
16. maj 2003 - 22:49 #8
Men altså der er nok meget som skal rettes til hvis du vil ha' det på dine billeder ! - det ved jeg ikke lige om du kan finde ud af.
Men ellers lad spørgsmålet stå åbent - det ku' jo være at olebole lige kiggede forbi :-)
Avatar billede viciodk Praktikant
16. maj 2003 - 22:50 #9
Det gør han uden tvivl - i grunden tilhører pointene fra dette spørgsmål ham :)
Avatar billede peterpeter Seniormester
16. maj 2003 - 22:53 #10
Roenving: Okay, det forstår jeg. Er det ikke nok at ligge olebole's kode som en ekstern fil og så henvise til denne ??

Doggy82: Det virker ikke på billeder ?? - Øv, ja det skulle det gerne.
Avatar billede doggy82 Praktikant
16. maj 2003 - 22:56 #11
Øhh jeg ved sgu ikke hvor eller hvordan man kan få det til at virke
- men olebole tryller da bare noget nyt frem som han plejer ;-)
Avatar billede viciodk Praktikant
16. maj 2003 - 23:07 #12
peterpeter -> Du kan putte billedet i en tabel med border=0 og samme dimensioner som billedet.
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:09 #13
JA, OK - Det havde jeg også tænkt på. Men jeg har faktisk lavet alle siderne, så jeg leder efter en løsning som ovennævnte, men bare hvor det også virker på billeder...

Tror I kun det er OleBole der kan klare den ??
Avatar billede roenving Novice
16. maj 2003 - 23:11 #14
Det skulle gerne virke på billeder, men koden skal tilpasses en anelse, f.eks. skl følgende fordobles til også at gælde <IMG>s:

function initShadeTBLs() {
    if (d.layers) return;
    var aTbl = gA(d,"TABLE");
    for (var i=0; i<aTbl.length; i++) {
        if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
    }
}

Men kan du ikke lægge et link el.lign. så kunne det jo være vi kunne finde den.

-- og PS! Jo, du kan godt lægge scriptet og css som hver sin eksterne fil ...
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:14 #15
Ja ja der er da andre end olebole som kan klare det,
men da han har skrevet koden har han jo nemmest ved at rette det til.
Avatar billede roenving Novice
16. maj 2003 - 23:17 #16
Som du kan se, er hver tabel lagt i en div, som i virkeligheden er det som styrer skyggen, så::

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] );
    }
}


Det er linjen her, som finder div'en:

cont = (d.all)? tbl.parentElement : tbl.parentNode;

hth
jes
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:18 #17
Okay, nu går det stærkt - men det er virkelig fedt med denne Store Bededags hjælp ;-)
Jeg er jo ikke mesteren, så jeg skal lige have styr på det hele.

Først skal jeg lige have lavet min eksterne fil.

SKAL det laves i to filer eller kan man nøjes med én, med jscript og css i på samme tid ??  - I givet fald, skal jeg så bare ikke kopiere det øverste kode ind i denne eksterne fil ??
Avatar billede roenving Novice
16. maj 2003 - 23:18 #18
-- og der skal tilføjes en class i style-delen (kun for læselighed, så du kan kopiere direkte ;-)
Avatar billede roenving Novice
16. maj 2003 - 23:19 #19
to forskellige een skal hentes via et style-tag og een via et script-tag ...
Avatar billede roenving Novice
16. maj 2003 - 23:20 #20
Det smarte er her, at de har et *højt* z-index ...

.shadeTBL {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}

.shadeIMG {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:24 #21
OKAY, det er virkelig fedt dette her, men det går altså ret stærkt....

Min style.css fil kommer til at se således ud, ikke ??

.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;
}
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:26 #22
hov - du skal også lige huske en gif-fil på 1x1 pixel :-)

'<img class="shader" src="test_img/t.gif" '
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:29 #23
øh - Hvor ??          (sorry)
Avatar billede roenving Novice
16. maj 2003 - 23:30 #24
>>peterpeter, der mangler en } før .shadeIMG
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:31 #25
btw så læg mærke til at kanten nede i hjørnet af skyggen ikke så godt kan ses fordi jeg bruger en ternet baggrund på http://home21.inet.tele.dk/doggy82/brown/start.htm

roenving hvis du har det i brug så smid lige et link :-)
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:31 #26
Yep - Det er hermed rettet, men .js filen ?? Hvordan er det så lige den skal se ud ??  Jeg kan ikke lige finde ud af, hvad der skal med og hvad der ikke skal ???
Avatar billede roenving Novice
16. maj 2003 - 23:31 #27
Du skal have en fil, som er selve billedet i skyggen (--selv om det virker uden <:=)
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:32 #28
lol Koden *er* der, men du skal lave gif-filen :-)
Avatar billede roenving Novice
16. maj 2003 - 23:33 #29
-----------------Hele .js-filen-------------------------
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="test_img/t.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 = initShadeTBLs;
-----------------------fil slut-----------------------------
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:35 #30
og ja det virker uden, men skyggen bliver mer' kraftigt med :-)
- men bare glem det så. Der er jo nok at rode med
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:36 #31
Ja, desværre - Jeg forstår ikke lige......

Jeg skal lave en .js fil som kaldes hver gang man viser et billede og i denne .js fil skal der være et gif billede ?? - Er det korrekt forstået ??
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:36 #32
Fedt - med koden
Avatar billede roenving Novice
16. maj 2003 - 23:37 #33
Nej -- du inkluderer .js-filen i <head> på alle dine sider:

<script language="javascript" type="text/javascript" src="shader.js"></script>

så findes funktionerne du har brug for på siderne ...
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:39 #34
Jep + jeg inkluderer css filen, ikk ?
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:39 #35
Jeg beklager jeg ikke lige følger så godt med, men tro mig, jeg prøver virkelig......  ;-)
Avatar billede doggy82 Praktikant
16. maj 2003 - 23:40 #36
Glem nu bare den gif ind til videre
- det er ikke nødvendigt for at få det til at virke
Avatar billede roenving Novice
16. maj 2003 - 23:43 #37
<style type="text/css" src="default.css"></style>
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:44 #38
Jep
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:45 #39
Det er da sådan, ikk ?

<link rel="stylesheet" type="text/css" href="shader.css">
Avatar billede roenving Novice
16. maj 2003 - 23:49 #40
Du må bruge begge syntakser, og du kan endda tilføje til et eksisterende style-tag:

<style type="text/css>
@import url(shader.css);
//resten af dine styles til siden
</style>
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:55 #41
Okay, nu må I ikke grine, men nu burde den være der !

css og .js filen er lavet.
Jeg har lavet en testside med et enkelt billede, jeg referer til begge eksterne filer, MEN - hmmmmm, det virker ikke.

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

</head>
<body>

Testside<p>

<div class="shadeIMG">

<img src="processer.jpg">

</div>

</body>
</html>
Avatar billede peterpeter Seniormester
16. maj 2003 - 23:57 #42
Jeg ved ikke om det er overflødigt, men mine eksterne filer ser således ud:

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;
}

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="test_img/t.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 = initShadeTBLs;
Avatar billede roenving Novice
17. maj 2003 - 00:01 #43
Bemærk, at vi søger efter calss'en shadeIMG:

      if ( aImg[i].className=="shadeIMG" ) doShade( aImg[i] );

så det skal være:

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

</head>
<body>

Testside<p>

<div class="shadeHolder">


<img class="shadeIMG" src="processer.jpg">

</div>

</body>
</html>
Avatar billede peterpeter Seniormester
17. maj 2003 - 00:07 #44
Virker det hos dig ?
Avatar billede peterpeter Seniormester
17. maj 2003 - 00:11 #45
Det burde da være rigtigt !! - Jeg kan ikke finde fejlen...
Avatar billede roenving Novice
17. maj 2003 - 00:14 #46
Sidste linje i .js-filen:


window.onload = initShades;

-- en manglende konsekvens-rettelse -- undskyld ;-|
Avatar billede roenving Novice
17. maj 2003 - 00:16 #47
Jeg er zq imponeret over oleboles ideer -- det er f... flot ...
Avatar billede peterpeter Seniormester
17. maj 2003 - 00:17 #48
SUPER
Avatar billede roenving Novice
17. maj 2003 - 00:17 #49
-- og så hedder det: endnu engang !-]
Avatar billede peterpeter Seniormester
17. maj 2003 - 00:27 #50
PERFEKT - Det er bare perfekt.

roenving, du har været en fantastisk hjælp - Jeg er virkelig meget taknemmelig for din hjælp, det var præcist dette jeg havde brug for.
Tak til jer andre også, men specielt dig roenving - super.

Jeg bliver desværre nødt til at slukke nu, men du må gerne lige tilføje lidt oplysninger om det med gif'en - doggy82 , målet er at få min skygge til at ligne den du referede til ;-) 

Håber I får en rigtig god week-end allesammen ;-)
Avatar billede roenving Novice
17. maj 2003 - 00:36 #51
Du kan lave en 1*1 gif i Windows Paint (alle tegne-programmer, jeg kender kan...):

Billede-->Attributter-->Bredde:1, Højde:1, Pixel
Farver-->Rediger Farver-->Vælg farven

Gem som... og vælg GIF -- jeg brugte spacerblaa.gif, den skal jo også bruges til så meget andet ...
Avatar billede peterpeter Seniormester
17. maj 2003 - 12:26 #52
Lige kort -

TAK
OK, så har jeg lavet GIF'en, MEN:
Hvor skal den placeres ?
Hvad bruges den til ?
Bliver der refereret til den ?

Hvad gør jeg nu ?
Avatar billede roenving Novice
17. maj 2003 - 12:29 #53
I den kode, som er pastet her er der en linje, som siger:

        a[a.length] = '<img class="shader" src="test_img/t.gif" ';

-- det som står inde i src="" skifter du ud med navnet på din gif -- så kan du for den sags skyld lave en lyserød skygge *g*
Avatar billede peterpeter Seniormester
17. maj 2003 - 12:31 #54
OKAY, nu er jeg med.
Jeg laver f.eks. en rød GIF, kaldet red.gif

Ændrer linien til:
a[a.length] = '<img class="shader" src="red.gif" ';

- og min skygge bliver nu rød !

OK ??
Avatar billede roenving Novice
17. maj 2003 - 12:34 #55
Exactly !-}
Avatar billede peterpeter Seniormester
17. maj 2003 - 12:35 #56
Hvad så med farveovergangen på skyggen ?? Den tonede del ??

Pyt - Jeg prøve mig frem.

Mange mange tak og hav en rigtig god week-end.
Avatar billede roenving Novice
17. maj 2003 - 12:36 #57
ilm
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:24 #58
Er du der roenving ??

Nu sidder jeg og arbejder med ovenstående, men jeg er desværre stødt på et problem !!

Nogle af mine billeder er placeret i en tabel CELLE. Hvordan ligger jeg skygge på lige præcis denne celle således, at det ser ud til, at det er billedet der ligger skygge ???

Jeg syntes kun jeg kan komme til at ligge skygge på selve tabel'len ???
Avatar billede roenving Novice
18. maj 2003 - 17:28 #59
Hvis du har flere celler -- f.eks. ved siden af hinanden -- med billeder i, tror jeg det nemmeste er at sætte en tabel rundt om, men jeg kan ikke lige gennemskue alle konsekvenser ... måske skal cell-padding sættes højere ?-)
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:34 #60
Virkelig fedt du er der !

Jeg viser 6 billeder på hver side og det har jeg lavet som én tabel, med en masse rækker og kolonner i, således at det står med 3 billeder i hver række.

Cellerne er tilpasset billederne helt præcist og de omkring liggende celler udgør margen'en.
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:35 #61
Det kunne godt være jeg skulle prøve at lave de celler der indeholderne billederne, om til enkelte tabel'ler ??
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:38 #62
........og så ligge skyggen på tabel'en som olebole's oprindelige ??
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:41 #63
Møj, det kan ikke lade sig gøre...Der kommer sådan nogle mærkelige dobbeltskygger !!!
Avatar billede roenving Novice
18. maj 2003 - 17:50 #64
Hvis du nu fjerner de div'er, som ligger rundt om billederne og kun bibeholder div'er rundt om tabellerne i cellerne ...
Avatar billede peterpeter Seniormester
18. maj 2003 - 17:54 #65
Jamen, det har jeg heller ikke.

De eneste DIV jeg har , er dem rundt om den ny tabel i den "gamle" celle.

????
Avatar billede peterpeter Seniormester
18. maj 2003 - 23:07 #66
Hmmm.....
Jeg har lige fået en idé, måske skulle jeg hellere styre billedernes placering ved hjælp af css (top/left). Så kunne jeg nemt få skyggerne på med ovenstående script !!
Er der nogle fordele/ulemper jeg skal være opmærksom på ??

Jeg opretter det lige som et nyt spørgsmål, roenving.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester