9 svar · 821 visningar · startad av aasah
I min CSS har jag bl.a. följande definition:
#cw td.vit {
background:url(vitRuta.gif);
color:black;
font-weight: bold;
padding:5px;
margin:0
}
Bakgrundsbilden är helt enkelt en vit ruta med svart kant. Skulle jag kunna åstadkomma samma effekt om jag istället skrev:
#cw td.vit {
background:url(transparentRuta.gif);
background-color: #fff;
color:black;
font-weight: bold;
padding:5px;
margin:0
}
Förutsatt att transparentRuta.gif var just transparant?
Och skulle det i så fall vara något så när enkelt att byta bakgrundsfärgen temporärt (via JavaScript)?
Prova.
Som svar, det ska funka. Varför har du en genomskinlig bild, är den till för att ge en ram? Om det är så kan du göra allt det med lite css-kod.
#cw td.vit {
background-color: #fff;
color: #000;
font-weight: bold;
padding:5px;
margin:0;
[b]border: 1px solid #000;[/b]
}
skogga skrev:
Prova.
Som svar, det ska funka. Varför har du en genomskinlig bild, är den till för att ge en ram? ...
Nej, den finns där för att vissa rutor måste ha bakgrundsbilder eftersom de innehåller svängande pilar (det bildar ett korsord). Men jag vill kunna markera aktuellt ord, helst utan att behöva ha dubbel uppsättning bakgrundsbilder, och i stället bara ändra bakgrundens färg...
Aha, okej. Men är bara bilden genomskinlig så ska det funka att endast ändra bakgrundsfärgen via CSS+Javascript.
document.getElementById('MinRuta').style.backgroundColor = '#AAAAAA';
Tyvärr verkar det inte funka... :( Frågan är varför...
Om man trycker i någon vit ruta, och sedan går in i den översta radens textfield i den undre tabellen (bredvid "Change this letter"-knappen), så borde den ruta jag tryckt på bli blå... Eller? :q Hur som helst vill den inte... :( Webbsidan
(Eftersom jag testar gäller detta alla rutor utom den med svängande pil. Den är fortfarande statiskt vit.)
/*utdrag ur min CSS - vitRutaT.gif är transparant.*/
#cw td.vit {
background:url(http://www.tydal.nu/aasah/Lab/IntCW/vitRutaT.gif); /*test (aasah/img/CWs/vitRuta.gif)*/
background-color:#ffffff /*test */
color:black;
font-weight: bold;
border:1px solid black;
padding:5px;
margin:0
}
//I JS block
function markLetter() {
var td = document.getElementById('currentPos');
var pos = td.innerHTML;
var cwVisiblePos = document.getElementById('td_'+pos);
cwVisiblePos.style.backgroundColor = '#336699';
}
function unmarkLetter() {
var td = document.getElementById('currentPos');
var pos = td.innerHTML;
var cwVisiblePos = document.getElementById('td_'+pos);
cwVisiblePos.style.backgroundColor = '#ffffff';
}
//I ren HTML-kod
<tr><td id="currentPos">-</td>
<td><input type="text" id="wordBoxLetter" value="" size="1" disabled onFocus="markLetter()" onBlur="unmarkLetter()"> <!-- -->
<input type="button" class="buttonColorG" id="wordBoxLetterButton"
onclick="addLetter()" value="Change this letter!" disabled>
</td>
</tr>
Håller på att kolla lite på din kod där, jag upptäckte ett fel i din css-kod:
#cw td.vit {
background:url(http://www.tydal.nu/aasah/Lab/IntCW/vitRutaT.gif); /*test (aasah/img/CWs/vitRuta.gif)*/
[b]background-color:#ffffff /*test */[/b]
color:black;
font-weight: bold;
border:1px solid black;
padding:5px;
margin:0
}
Den fetmarkerade raden har ingen avslutande semikolon ";" vilket gör att värdet color inte kommer att funka.
Vad gäller färgen så borde det vad jag ser funka, men jag ska kolla lite mer på detta om en stund.
skogga skrev:
Håller på att kolla lite på din kod där, jag upptäckte ett fel i din css-kod:...
Den fetmarkerade raden har ingen avslutande semikolon ";" vilket gör att värdet color inte kommer att funka.
Fixat nu. Se nedan.
Tack! Nu funkar det! :e
Vad var felet? Kan vara kul att få veta.
Det där ';'-et var felet. Att det inte verkade funka efter det berodde på kvalificerad klantighet från vänstertecknad... :r (Laddade upp fel fil...)