Notifikationer

Markér alle som læst Log ud

c-sharp Nybegynder

09. maj 2007 - 08:52 Der er 6 kommentarer og
1 løsning

Udtone indholdet i en div i IE6 (Part 2)

Jeg stillede følgende spørgsmål for en ugestid siden:

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

Jokkejensen smed noget kode der lige var det jeg manglede :)
MEN koden virker ikke i IE6. Er der nogen der kan fortælle mig hvad jeg skal gøre for at få det til at virke i IE6?

Problemet i IE6 er at den div der bliver lagt ovenpå ikke dækker mere end den første linie og altså ikke hele div'en der skal udtones.

Synes godt om

mclemens Nybegynder

09. maj 2007 - 10:16 #1

Altså, hvis det skal være dynamisk så er det
javascript og ikke css som i nedenstående:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.curs {cursor:pointer;}
#content,#hus {width:100%;}
</style>

<script type="text/javascript">
function opc(e,o){
e=document.getElementById(e);
if(e.filters)e.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";
e.style.opacity = o/100;
}
</script>

</head><body>

<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>
</div>

<br><br>
<span class="curs" onclick="opc('content',50);">Toning content</span>
<br>
<span class="curs" onclick="opc('content',100);">Fjern toning content</span>
<br><br>

<div id="hus">
hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>
</div>

<br><br>
<span class="curs" onclick="opc('hus',25);">Toning hus</span>
<br>
<span class="curs" onclick="opc('hus',100);">Fjern toning hus</span>
</body></html>

- Skal det bare være statisk er css nok:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.curs {cursor:pointer;}
#content,#hus {width:100%;}
#content {filter:alpha(opacity=50);opacity:0.50;}
#hus {filter:alpha(opacity=25);opacity:0.25;}
</style>

</head><body>

<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>
</div>

<br><br>

<div id="hus">
hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

09. maj 2007 - 10:19 #2

Forkert formuleret:
Altså, hvis det skal være dynamisk så er det
javascript og ikke css som i nedenstående:

Skal nærmere være:
Altså, hvis det skal være dynamisk så er css
ikke nok, der skal lidt javascript til også:

(det er jo css som javascriptet tilføjer, lol)

Synes godt om

c-sharp Nybegynder

09. maj 2007 - 12:52 #3

Hej mclemens, og tak for dit svar!

Der er et lille problem med den løsning du har foreslået. Løsningen jeg fik af Jokke var baseret på en div som blev lagt ovenpå det der skulle udtones, det havde så også den smarte egenskab at det disablede alt der lå under det div, Den funktion kunne være fed at bibeholde :-) (Det kunne du jo selvfølgelig ikke vide)

Har du en idé til hvordan det kunne gøres?

Synes godt om

mclemens Nybegynder

09. maj 2007 - 15:29 #4

Hvad med at lade et img element dække det hele som her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.curs {cursor:pointer;}
#content,#hus {width:100%;position:relative;}
.transpng {position:absolute;top:0;left:0;}
</style>

<script type="text/javascript">
function opc(e,o){
e=document.getElementById(e);
if(e.filters)e.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";
e.style.opacity = o/100;
if(imgs=e.getElementsByTagName("img")){
chk=true;
for(i=j=0;i<imgs.length;i++)if(imgs[i].getAttribute("class")=="transpng"){
j=i;chk=false;
}
if(o!=100&&chk==true){
f=document.createElement("img");
f.setAttribute("src","http://www.eksperten.dk/img/flag_blue.gif");
f.setAttribute("class","transpng");f.setAttribute("className","transpng");
f.style.width=e.offsetWidth+"px";
f.style.height=e.offsetHeight+"px";
e.appendChild(f);
}
}
if(o==100&&chk==false){
imgs[j].parentNode.removeChild(imgs[j]);
}
}
</script>

</head><body>

<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>
</div>

<br><br>
<span class="curs" onclick="opc('content',50);">Toning content</span>
<br>
<span class="curs" onclick="opc('content',100);">Fjern toning content</span>
<br><br>

<div id="hus">
hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>
</div>

<br><br>
<span class="curs" onclick="opc('hus',25);">Toning hus</span>
<br>
<span class="curs" onclick="opc('hus',100);">Fjern toning hus</span>
</body></html>

( ret lige f.setAttribute("src","http://www.eksperten.dk/img/flag_blue.gif");
til et transparent png eller gif billede, 1x1 px bør være nok)

Synes godt om

c-sharp Nybegynder

10. maj 2007 - 09:05 #5

Jeg takker mange gange for hjælpen!

Der er et lille problem og det er at den først bliver udtonet et par sekunder efter at siden er loadet, det havde set pænere ud hvis den var udtonet fra starten (lige som med løsningen i css).

Synes godt om

mclemens Nybegynder

10. maj 2007 - 09:11 #6

Vedrørende løsningen med css burde thesurfers have virket,
jeg kan dog godt se at IE6 ikke lige ville sluge den :-/

"at den først bliver udtonet et par sekunder efter at siden er loadet,"
- Det skulle vel ikke tage et par sekunder ?-) Istedet for
at kalde på window.onload kan du vel kaste et <script type="text/javascript">opc('content',50);</script> ind
lige efter curs, så burde den slå igennem stort set med det
samme (forudsat at du ikke bruger et tungt transparent billede).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.curs {cursor:pointer;}
#content,#hus {width:100%;position:relative;}
.transpng {position:absolute;top:0;left:0;}
</style>

<script type="text/javascript">
function opc(e,o){
e=document.getElementById(e);
if(e.filters)e.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity="+o+")";
e.style.opacity = o/100;
if(imgs=e.getElementsByTagName("img")){
chk=true;
for(i=j=0;i<imgs.length;i++)if(imgs[i].getAttribute("class")=="transpng"){
j=i;chk=false;
}
if(o!=100&&chk==true){
f=document.createElement("img");
f.setAttribute("src","http://www.eksperten.dk/img/flag_blue.gif");
f.setAttribute("class","transpng");f.setAttribute("className","transpng");
f.style.width=e.offsetWidth+"px";
f.style.height=e.offsetHeight+"px";
e.appendChild(f);
}
}
if(o==100&&chk==false){
imgs[j].parentNode.removeChild(imgs[j]);
}
}
</script>

</head><body>

<div id="content">
content<br>content<br>content<br>content<br>content<br>content<br>
</div><script type="text/javascript">opc('content',50);</script>

<div id="hus">
hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>hus<br>
</div><script type="text/javascript">opc('hus',50);</script>

</body></html>

Synes godt om

mclemens Nybegynder

10. maj 2007 - 09:12 #7

Tak for point forresten :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS