CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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!

Synes godt om

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...

Synes godt om

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

Synes godt om

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

Synes godt om

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"> </td>
<td width="20px" class="kors"> </td>
<td width="120px" class="dug"> </td>
</tr>
<tr style="height:10px"><td colspan="3" class="kors" style="height:10px"> </td></tr>
<tr style="height:60px">
<td width="80px" class="dug"> </td>
<td width="20px" class="kors"> </td>
<td width="120px" class="dug"> </td>
</tr>
</table>
<button onclick="skift()">Skift flag</button>
</body>
</html>

Synes godt om

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?

Synes godt om

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?!

Synes godt om

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 !-)

Synes godt om

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? :)

Synes godt om

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;">

Synes godt om

sansalvador Nybegynder

05. november 2003 - 22:09 #10

Okay. Hvad giver display?

Synes godt om

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 !-)

Synes godt om

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?

Synes godt om

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 !-)

Synes godt om

roenving Novice

06. november 2003 - 18:10 #14

-- og velbekomme '-)

Synes godt om

roenving Novice

10. november 2003 - 02:36 #15

-- og takker for points ;~}

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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