16. maj 2003 - 22:35Der 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å ???
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>
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
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 :-)
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...
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 ...
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] ); } }
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 ??
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 ???
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 ;-)
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 ???
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 ?-)
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.
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.
Synes godt om
Ny brugerNybegynder
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.