Hej, Jag håller på att försöka bygga en fadnings effect till en TD. Den genomskinlighet ska ändras genom en mouse over. Koden jag har försökt använda mig av ser ut såhär Varför inte använda Fade filtret? Har skrivit ett litet exempel: Jag har inte möjlighet att testa en webbläsare som inte stödjer filter. Men för att slippa felmeddelanden då. Tro jag du kan skriva: Hej, Det där fungerade bra fast jag inser att jag har gett dig lite för lite fakta. Jag har bilder i bakgrunden som jag vill ha ett fadande lager ovanpå. Skulle behöva göra en bild av alla länkar sen lägga en tabell över den bilden som ska fungera som knappar. Men eftersom jag har mellanrumm mellan varje knapp färgas även dom kanterna enligt din struktur. Finns det ett sätt att göra detta på lika lätt som du gjorde det där exemplet? Till att börja med vill jag kritisera din HTML och CSS implementation: Bara en fråga. Kommer Folk som inte har css 2 eller HTML 4.1 att kunna se sidan som den ska se ut? En annan sak jag har försökt med idag är att få en DIV att anpassa höjden till webbläsaren. Med en tabell hade det varit väldigt lätt att göra men DIV är det mycket svårare att göra. Om jag skulle vilja göra såhär med en DIV Vad menar du med folk som inte har HTML 4.1 eller CSS 2? Jag har nu designat om sidan lite och anpassat den. Du skall ALLTID ha en alt-text till bilder om det ingår i navigeringsfunktion. Alt-texter bör annars förekomma för bilder som presenterar något föreställer ett motiv. Bilder som inte behöver alt-text är bilder som är relaterad till layout. Lite intressant läsning: Jag tror jag kan ha förklarat lite dåligt. Jag vill att det fadas fram ett genomskinligt vitt lager över bilden då man far över den sen fadas det bort när man tar bort musen. Är det något sånt här du är ute efter? Ja, fast har löst det med en annan kod som jag hittade och gjorde om lite så att det blev bra.Fade av en td
if(Do == "FadeIn")
{
var timer = 0;
function countup()
{
if(timer < 50)
{
Hem.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + timer + ")"
timer += 1;
setTimeout("countup()",100);
}
}
countup();
}
har testat allt käns det som men får det inte att fungera. tdn blir helt vit och sen kommer dett ett javascript fel efter 1 sekund. Hur ska jag göra för att få en fungerande fade, det här kanske inte är ett så bra sätt heller. Tacksam för svar.
//MVH ViktorSv: Fade av en td
<HTML>
<HEAD>
<TITLE>BasicImage Transition</TITLE>
<STYLE type="text/css">
THEAD TD {
background-color: rgb(75%, 75%, 100%) ;
filter: progid:DXImageTransform.Microsoft.Fade(duration=0.2,overlap=1.0)
}
THEAD TD.Faded {
background-color: rgb(50%, 50%, 100%) ;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT>
function fadeIn(e) {
e.filters[0].Apply();
e.className="Faded";
e.filters[0].Play();
}
function fadeOut(e) {
e.filters[0].Apply();
e.className="";
e.filters[0].Play();
}
</SCRIPT>
<DIV>
BasicImage Filter
</DIV>
<TABLE>
<THEAD>
<TR>
<TD onmouseover="fadeIn(this)" onmouseout="fadeOut(this)">First name</TD>
<TD onmouseover="fadeIn(this)" onmouseout="fadeOut(this)">Last name</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Anna</TD>
<TD>Andersson</TD>
</TR>
<TR>
<TD>Bert</TD>
<TD>Bengtsson</TD>
</TR>
<TR>
<TD>Carolin</TD>
<TD>Carlsson</TD>
</TR>
<TR>
<TD>Daniel</TD>
<TD>Davidsson</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Sv:Fade av en td
<code>
<SCRIPT>
function fadeIn(e) {
if (e.filters) {
e.filters[0].Apply();
e.className="Faded";
e.filters[0].Play();
} else {
e.className="Faded";
}
}
function fadeOut(e) {
if (e.filters) {
e.filters[0].Apply();
e.className="";
e.filters[0].Play();
} else {
e.className="";
}
}
</SCRIPT>
</code>
Jag tror annars det finns risk att du får att filters är undefined.Sv: Fade av en td
Här är tabellen
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="13" height="100%"></td>
<td background="Design/Meny/Hem.png" style="cursor: pointer;" id="Hem" onmouseover="fadeIn(this)" onmouseout="fadeOut(this)" onclick="frame.location.href='start.asp'" width="39" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Nyheter.png" style="cursor: pointer;" onmouseover="fadeIn(this)" onclick="frame.location.href='Nyheter.asp'" width="55" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Produkter.png" style="cursor: pointer;" onclick="frame.location.href='Produkter.asp'" width="63" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Erbjudanden.png" style="cursor: pointer;" onclick="frame.location.href='Erbjudanden.asp'" width="80" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Natforsorjning.png" style="cursor: pointer;" onclick="frame.location.href='Natforsorjning.asp'" width="83" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Aterforsaljare.png" style="cursor: pointer;" onclick="frame.location.href='Aterforsaljare.asp'" width="82" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Skivor.png" width="49" style="cursor: pointer;" onclick="frame.location.href='Skivor.asp'" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Tips.png" width="39" style="cursor: pointer;" onclick="frame.location.href='Tips.asp'" height="100%"></td>
<td width="5" height="100%"></td>
<td background="Design/Meny/Lankar.png" width="49" style="cursor: pointer;" onclick="frame.location.href='Lankar.asp'" height="100%"></td>
<td width="13" height="100%"></td>
</tr>
</table>Sv:Fade av en td
Tabeller är till för att presentera data i ett tabellliknade format. Använd istället DIV eller SPAN element.
Varför inte ange marginaler i CSS för dina TD istället för att lägga in tomma kolumner?
Navigera ALDRIG med hjälp av javascript.
Som jag har förstått det använder du tabellen som en toolbar. Där varje cell är ramen runt en knappen.
Kunde vara bra om du gav en länk så man får se hur menyn ser ut.
En början utan fade effekt kan se ut då här:
<code>
<DIV class="toolbar">
<DIV>
</DIV>
<DIV>
</DIV>
<DIV>
</DIV>
</DIV>
</code>
Ladda ner HTML 4.1 specen och CSS 2 från www.w3c.orgs hemsida. Läs på lite om CSS. Försök få önskat utsende på HTML koden jag givit dig med css. Så skall jag försöka hjälpa dig efter jobbet imorgon.Sv: Fade av en td
Sv:Fade av en td
<div style="height:100;"></div>
<div style="height:*;"></div>
<div style="height:50;"></div>
Så blir det ju inte samma sak som med en tabell.
Nu är frågan. Varför använda DIV om det nu är så svår anpassat? Ska testa att köra spans och se hur det går. Hör av mig snart.Sv:Fade av en td
Om du kör med en en webbläsare som stödjer HTML 1.1 och saknars helt stöd för CSS kommer sidan tyvärr inte se ut som du har tänkt det. Däremot bör mitt förslag fungera aldelesutmärkt att använda. Bilderna komer att vara synliga och när man klickar på dem kommer navigeringen att fungera.
Jag anser att det är viktigare att sidan fungerar, än att det ser snyggt ut, och att layout skall bara kompletera funktionaliteten för att göra sidan behaglig att använda och attraktiv för besökarna.
Om man utformar sidan utefter specifikation och rekomendationer får man ofta en sida som funger.
Om du följer specifikationerna och rekomendationerna får du en sida som kommer fungera. Mycket av problemen med olika weblässare beror just på webläsaren eller utvecklare inte följt specifikationerna och/eller rekomendationerna.
Mycket av kärnan i HTML standarden finns kvar i version 4.1. Men i HTML 4.1 standarden har man markerat det layoutmässiga attributer som ersatts med CCS som deprikerade. Det ger ett bra underlag för att skapa en sida som fungera i många läsare och kommer fortsätta att fungera.
W3C har rekomenderat HTML 4.1 sedan 24 December 1999. XHTML är en anpassning av tagarna i HTML 4.1 att även uppfylla XML specifikationen.
CSS 1 har rekomenderat sedan 17 December 1996. Om du däremot använder specifikation 2 kan du se om CSS 1 funktionalitet ersatts i 2'an och försöka undvika den.
En viktiga aspekt som ofta inte tas hänsyn till är besökare med funktionshinder. Jag har i mitt senaste skolprojekt kom i kontakt med användare med nedsatt synförmåga(blinda). Dessa besöker använder en skärmläsare för att kunna "se" sidan. Då spelar utföradet av layouten
Jag förväntar mig att utvecklare tar sitt ansvar. Oavsett de är hobbysnickare eller proffisionella.Sv: Fade av en td
Menysystemet ser nu ut såhära.
<code>
<div class="Menu">
<span width="39" height="16"></span>
<span class="Button" width="55" height="16"></span>
<span class="Button" width="63" height="16"></span>
<span class="Button" width="80" height="16">
</span>
<span class="Button" width="83" height="16">
</span>
<span class="Button" width="82" height="16">
</span>
<span class="Button" width="49" height="16">
</span>
<span class="Button" width="39" height="16">
</span>
<span class="Button" width="49" height="16">
</span>
</div>
</code>
Om det är så att jag måste ändra span till DIV i menyn eftersom resten av sidan är i DIV nu så kan du ju säja till.Sv:Fade av en td
Hur är det menyn animeras med fade? Hur ser en oaktiv knapp ut och hur ser en aktiv knapp ut? Kan du inkludera din CSS kod för menyn? Sv: Fade av en td
http://www.w3.org/TR/WAI-WEBCONTENT/ på engelska
http://w3c.sics.se/resources/office/translations/WAI-WEBCONTENT.html på svenska.
Jag har inte själv läst dem utan bara skummat igenom dem, men det verkar vara bra riktlinjer hittils.
//Anna-KarinSv: Fade av en td
Lite CSS kod
<code>
.Menu {background-color: #F1F0F0; width: 600; height: 16;}
.Button {padding: 0,0,0,1px;}
</code>Sv:Fade av en td
<code>
<HTML>
<HEAD>
<TITLE>BasicImage Transition</TITLE>
<STYLE type="text/css">
BODY {
background-color: green ;
}
DIV.Menu SPAN {
background-color: rgb(100%, 100%, 100%) ;
}
DIV.Menu IMG {
opacity: 0.6;
filter: alpha(opacity=60);
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT>
var intervalID;
var head = new Node(null, null, null);
function Node(style, next, opacity, finalOpacity) {
this.style = style;
this.next = next;
this.opacity = opacity;
this.finalOpacity = finalOpacity;
}
function firstNode() {
return head.next;
}
function find(list, element) {
for ( var node = list; node != null; node = node.next )
{
if ( node.style == element ) {
return node;
}
}
return null;
}
function setOpacity(style, opacity) {
style.opacity = (opacity / 100);
style.MozOpacity = (opacity / 100);
style.KhtmlOpacity = (opacity / 100);
style.filter = "alpha(opacity=" + opacity + ")";
}
function fade() {
var previous = head;
for ( var node = firstNode(); node != null; node = node.next )
{
var d = node.finalOpacity - node.opacity;
if ( d < 0 ) {
node.opacity-=5;
if ( node.opacity <= node.finalOpacity ) {
node.opacity = node.finalOpacity;
previous.next = node.next
}
setOpacity(node.style, node.opacity);
} else if ( d > 0 ) {
node.opacity+=5;
if ( node.opacity >= node.finalOpacity ) {
node.opacity = node.finalOpacity;
previous.next = node.next
}
setOpacity(node.style, node.opacity);
} else {
previous.next = node.next;
}
previous = node;
}
if (!head.next) {
if (intervalID) {
clearInterval(intervalID);
intervalID = null;
}
}
}
function addToFade(e, opacity, finalOpacity) {
var s = e.style;
var node = find(firstNode(), s);
if (node) {
node.finalOpacity = finalOpacity;
} else {
head.next = new Node(s, head.next, opacity, finalOpacity);
}
//Starts fading
fade()
if (!intervalID) {
intervalID = setInterval("fade()", 20);
}
}
function fadeIn(e) {
addToFade(e, 60, 100);
}
function fadeOut(e) {
addToFade(e, 100, 60);
}
</SCRIPT>
<DIV class="Menu">
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
<SPAN>
</SPAN>
</DIV>
</BODY>
</HTML>
</code>Sv: Fade av en td