Avatar billede ettrup1987 Nybegynder
10. december 2012 - 13:41 Der er 10 kommentarer og
1 løsning

Skift billede i min div box nå jeg trykker på den farve?

Hej Eksperter

Er igang med en side hvor jeg har 5 huse der har hver sin farve? og hvis du trykker på den ene  farve (f.eks rød) skal huset skifte til den farve og hvis du trykker skal på blå den den skifte til blå:
har lavet 5 billeder med 5 farver på huset?

har bare ingen ide om hvordan jeg skifter det i javascript?

på forhånd tak ;)
Avatar billede claes57 Ekspert
10. december 2012 - 14:04 #1
på de farvede felter laver du et javascript i stil med
onclick="document.getElementById('huset').src = 'images/blaa.jpg';"
hvis billed-feltet har id=huset, og det blå hus billede ligger som images/blaa.jpg
Avatar billede ettrup1987 Nybegynder
10. december 2012 - 14:08 #2
<div id="huset"><img src="hvid_con.png" />
</div>


<div id="farve_valg_huset">
<p>Vælg din farve på huset:</p>
    <a href=""><div id="red" onclick="document.getElementById('huset').src = 'green_con.png';"></div></a>
    <a href=""><div id="blue"></div></a>
    <a href=""><div id="green"></div></a>
</div>

virker ikke? hvad gør jeg forkert?
Avatar billede claes57 Ekspert
10. december 2012 - 14:24 #3
ret fra
<div id="huset"><img src="hvid_con.png" />
</div>

til
<img id="huset" src="hvid_con.png" />
Avatar billede ettrup1987 Nybegynder
10. december 2012 - 14:38 #4
Det virker :D thanks skriv et svar hvis du vil have point ;)
Avatar billede claes57 Ekspert
10. december 2012 - 16:12 #5
bare luk selv...
Avatar billede claes57 Ekspert
10. december 2012 - 16:16 #6
du kan reducere noget kode fra
<a href=""><div id="red" onclick="document.getElementById('huset').src = 'green_con.png';"></div></a>

hvis du har en farvefirkant (billede) fx green.png, så kan det bare være
<img src="green.png" width="50" height="50" border="0" onclick="document.getElementById('huset').src = 'green_con.png';" />
så er a href og div sparet.
Avatar billede ettrup1987 Nybegynder
10. december 2012 - 16:33 #7
1000 tak ;)
Avatar billede ettrup1987 Nybegynder
10. december 2012 - 16:47 #8
ved du os hvordan jeg gør hvis har en png fil med forskellige slags tage hvordan jeg får dem på os? de skulle jeg gerne komme til at ligge oven på billede eller hvad man siger?
Avatar billede claes57 Ekspert
10. december 2012 - 17:01 #9
det bliver lidt mere tricky - men med 'style=...' kan man fjerne det gamle tag (hvis der er et), og tilsvarende placere et nyt.
du har fra starten med billedet af huset
<img id="huset" src="hvid_con.png" />
via css skal du så have et andet billede lagt ovenpå (fysisk samme sted) hvor alt på nær taget er gennemsigtigt.
Du kan evt styre placeringen via z-index
http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

Det er den korte forklaring - jeg har ikke noget brugbart eksempel på, hvordan det kan laves i praksis. Du kan evt prøve at skrive en intern besked til http://www.eksperten.dk/profil/olebole som er genial til websites avanceret.
Avatar billede olebole Juniormester
10. december 2012 - 23:37 #10
Tak, Claes  *o)

Efter en intern besked foreslår jeg, vi tager den her i tråden, så andre kan få glæde af en evt. løsning. Som det første vil jeg lige bede spørger lægge et link, så jeg kan se et af de billeder, vi taler om - og gerne i et eksempel, som ligner det, du skal bruge. Det gør det meget lettere at finde en præcis løsning  =)
Avatar billede olebole Juniormester
17. december 2012 - 19:08 #11
Hmmmmmm ... ettrup1987 er tydeligvis bare tidsspilde!
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