Avatar billede godlike2k Nybegynder
03. november 2003 - 17:10 Der er 14 kommentarer og
1 løsning

#enfarve udskiftet med #andenfarve

Hey alle!

Jeg har et lille projekt i gang, hvor jeg har lavet mig et billede.

Det er Dannebrog, hvor jeg i stedet for rød og hvid har brugt Sveriges blå og gule farver.

Selve idéen går ud på at jeg vil skifte den gule farve til hvid, og den blå farve til gul vha. CSS. Så det altså sker på klientens computer.


Flaget kan ses her: www.businet.dk/flag.gif

Men altså. Kan det lade sig gøre?

Har ledt efter funktion hvor man fx siger
change-color: #000000 #ffffff;
For at lave en farve fra sort til hvid.

NB! HUSK at det er på et givent billede farverne skal skiftes.

Med venlig hilsen, Lars!
Avatar billede bearhugx Nybegynder
03. november 2003 - 17:19 #1
du kan ikke bruge CSS til at ændre farverne på grafik-filer

så det kan ikke lade sig gøre -- desværre...
Avatar billede foxy_lady Nybegynder
03. november 2003 - 17:25 #2
Brug et billedbehandlingsprogram til det.. som bearhugx siger - det kan ikke lade sig gøre i css
Avatar billede cdc Novice
03. november 2003 - 17:32 #3
du kan lave det med 2 image, hvor du så styrer bg i cellen fra blå til gul og "korset" styres med en gennemsigtig gif hvor korset ikke er gennemsigtig.
Men det nemmeste er så at lave det med to giffer
Avatar billede roenving Novice
03. november 2003 - 18:01 #4
Eller måske sådan:

<html>
<head><title>Flag</title>
<style type="text/css">
.dug{background:#f00;}
.kors{background:#fff;}
</style>
<script type="text/javascript">
flag = 1;
function skift(){
    t = document.getElementsByTagName("TD");
    for(i=0;t.length>i;i++){
        switch (t[i].className){
            case "dug":
                t[i].style.background = (flag==1)?'blue':'red';
            break;
            case "kors":
                t[i].style.background = (flag==1)?'yellow':'white';
            break;
        }
    }
    flag = Math.abs(flag-1);
}
</script>
</head>
<body>

<table style="width:220px;border: 1 solid #000000" cellspacing="0" cellpadding="0">
  <tr style="height:60px">
    <td width="80px" class="dug">&nbsp;</td>
    <td width="20px" class="kors">&nbsp;</td>
    <td width="120px" class="dug">&nbsp;</td>
  </tr>
  <tr style="height:10px"><td colspan="3" class="kors" style="height:10px">&nbsp;</td></tr>
  <tr style="height:60px">
    <td width="80px" class="dug">&nbsp;</td>
    <td width="20px" class="kors">&nbsp;</td>
    <td width="120px" class="dug">&nbsp;</td>
  </tr>
</table>
<button onclick="skift()">Skift flag</button>
</body>
</html>
Avatar billede sansalvador Nybegynder
04. november 2003 - 13:52 #5
roenving og /cdc .. Jeg er selv i gang med projektet sammen med godlike (Lars). Og I undviger hans spørgsmål :) Flaget var kun et eksempel. Og spørgsmålet lød på, hvordan man udskiftede #XXXXXX farver, ved brug af fx CSS, PHP eller noget helt trejde.

Kan man ikke smide et filter på, et ActiveX-object på et billede (???), hvor dette filter ændrer farver efter en forudbestemt indstilling?
Avatar billede sansalvador Nybegynder
04. november 2003 - 13:55 #6
http://guilds.camelotherald.com/realms/Kay/

Jeg har her fundet et eksempel på noget, man kunne bruge det på:
Et landområde er blevet indtaget, og dette landområde skal skifte farve fra én farve til en anden. Kan se der er billede på billede (noget det I, roen og cdc, nævner). Men hvordan skaffer man sådan en overordnet styring af alle de billeder?!
Avatar billede roenving Novice
05. november 2003 - 21:06 #7
Så må du lave eet grundbillede med start-farverne på, og derefter eet gif-billede for hver eneste landområde i hver eneste mulige farve (resten som transparent !-) og derefter lægge dem præcis ovenpå hinanden på det sted, de hører hjemme ...

-- hvilket også er den måde, det gøres på på linket !-)
Avatar billede sansalvador Nybegynder
05. november 2003 - 21:11 #8
Det tænkte jeg nok.

Og det gøres vha. af koordinater? Skal man bruge koordinater med udgangspunkt i vinduet eller billedet? I så fald billedet, hvordan gør man det? :)
Avatar billede roenving Novice
05. november 2003 - 22:02 #9
Man lægger alle de 'nye' billeder ind relativt efter de koordinater, som kortet har, men sætter deres display til 'none' :

<img src="omraade.gif" style="position:absolute;left:XXpx;top:YYpx;width:Xpx;height:Ypx;display:none;">
Avatar billede sansalvador Nybegynder
05. november 2003 - 22:09 #10
Okay. Hvad giver display?
Avatar billede roenving Novice
05. november 2003 - 22:28 #11
display:none; betyder at der ikke er nogle spor af elementet, når du så bruger position:absolute; skal display ændres til: block; når elementet skal vises ...

-- derfor skal du have en id på alle dine billeder (id="denmarkBlue" !-) som du kan tage fat i en en javascript-funktion:

document.getElementById('denmarkBlue').style.display='block';

Visibility viol betyde, at der er eet spor efter elementet: det vil optage plads, men det betyder ikke noget, når man bruger absolut positionering, men jeg bruger dog altid display, når jeg skjuler/viser absolutte !-)
Avatar billede sansalvador Nybegynder
06. november 2003 - 13:09 #12
Se, det er jo noget jeg/vi kan bruge.

Men lige én ting mere, inden jeg får Godlike til at give dig point. (skal også bruge et svar btw)

Ser du... Hvis nubaggrundsbilledet rykker sig. Altså Europakortet bliver flyttet lidt nedad, hvis der skal nogen reklamer ovenover. Så passer alle de hidtil satte koodinater jo ikke.

For jeg går ud fra at:
img src="omraade.gif" style="position:absolute;left:XXpx;top:YYpx;width:Xpx;height:Ypx;display:none;">
Giver koordinatet ift. vinduet, og ikke billedet... right? Er det et problem man må leve med, eller er der en mulighed for en løsning?
Avatar billede roenving Novice
06. november 2003 - 18:09 #13
Iøvrigt har jeg glemt at give den ene løsningsmulighed, for I kan nøjes med at lægge eet <img>-tag ekstra for hver region, og så ændre dets .src hvis I skal bruge et med en anden farve !-)

-- jeg har ikke selv leget med den, men har fået hvisket i ørerne, at det skulle placere sig i forhold til omkransende elementer, som var positioneret, men så flytter vi bare problemet fra de enkelte images til det omkransende element, men det er jo selvfølgelig enklere at løse ...

Men man kan jo benytte sig af en positionering onload
<body ... onload="posDiv()">:

<script type="text/javascript">
function posDiv(){
var div, divIDs = ['img1',15,23,'img2',38,23,'img3',125,34,'img4',234,345,'img5',212,233,'img6',399,333];
  elm = document.getElementById('europaKort');
  for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
  for(i=0;divIDs.length>i;i+=3){
    div = document.getElementById(divIDs[i]);
    div.style.left = divIDs[i+1] + zx + "px";
    div.style.top = divIDs[i+2] + zy + "px";
  }
}
</script>

-- så betyder sekvensen:

'img1',15,23

elementet img1 skal ligge 15 px fra venstre kant af det omgivende billede og 23 px fra toppen !-)
Avatar billede roenving Novice
06. november 2003 - 18:10 #14
-- og velbekomme '-)
Avatar billede roenving Novice
10. november 2003 - 02:36 #15
-- og takker for points ;~}
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



IT-JOB