Avatar billede laursen73 Nybegynder
13. oktober 2008 - 23:10 Der er 13 kommentarer og
1 løsning

Skifte billede i en anden celle på samme side med mouseclick

Hvis nu man har en stor celle øverst på sin side med et billede og noget tekst i og en masse små nedenunder der hver har et billede og tekst, kan man så få det store billede til at skifte ved at klikke på de små billeder der ligger nedenunder og i så fald kan nogle hjælpe med et script til det eller henvise til hvor jeg finder et. (har ledt og ledt og søger åbenbart de forkerte steder)

På forhånd tak :)
Avatar billede skovenborg Nybegynder
13. oktober 2008 - 23:28 #1
Helt enkelt kan det gøres nogenlunde sådan:

Hvis det er din celle med det store billede:
<td>
<img src="stortbillede.jpg" alt="Stor version af et billede" id="pictureBig">
</td>

Og her et par af de små billeder:
<img src="billede1.jpg" onclick="changePicture('pictureBig','billede1Big.jpg');">
<img src="billede2.jpg" onclick="changePicture('pictureBig','billede2Big.jpg');">

I din head-sektion skal du også have et lille script:
<script type="text/javascript">
function changePicture(imgID,imgSrc) {
document.getElementById(imgID).src = imgSrc;
}
</script>
Avatar billede roenving Novice
13. oktober 2008 - 23:37 #2
Skovenborg har fat i det meste, men det kan absolut forbedres ...

Er det de samme billeder, eller har du dem i en lille og stor udgave (hvilket absolut kan anbefales !-)

-- men f.eks.

<div id="stortBillede">
<img src="billede_1.jpg"><br>
<span>Her er en tekst</span>
</div>

<div class="etLilleBillede" onclick="visStort(this);">
<img src="billede_1_thumb.gif"><br>
<span>Her er en tekst</span>
</div>

-- og så funktionen:

function visStort(elm){
  var trg = document.getElementById(stortBillede");
  trg.getElementsByTagName("img")[0].setAttribute("src", elm.getElementsByTagName("img")[0].getAttribute("src").replace(/_thumb\.gif$/,".jpg"));
  trg.getElementsByTagName("span")[0].firstChild.nodeValue = elm.getElementsByTagName("span")[0].firstChild.nodeValue;
}

-- aspilut utestet og skrevet direkte ind her !-)
Avatar billede laursen73 Nybegynder
13. oktober 2008 - 23:44 #3
Det virkede :) hehe
kan man også gøre det så det er hele cellen (Cellen er størrere end det lille billede da der også er tekst i) som billedet ligger i?
Avatar billede laursen73 Nybegynder
13. oktober 2008 - 23:46 #4
nej jeg har dem ikke i en stor og lille udgave, det er bare forskellige billeder der skal komme (ikke tilfældige) i den store celle sammen med en tilhørende tekst lidt ala et "læs mere her" link
Avatar billede gunfar Nybegynder
13. oktober 2008 - 23:55 #5
som udenforstående  hvor er det man gør disse tiltag


<div id="stortBillede">
<img src="billede_1.jpg"><br>
<span>Her er en tekst</span>
</div>

<div class="etLilleBillede" onclick="visStort(this);">
<img src="billede_1_thumb.gif"><br>
<span>Her er en tekst</span>
</div>
beundrer jeres store viden om al mulig herinde
Avatar billede laursen73 Nybegynder
13. oktober 2008 - 23:57 #6
De virker begge 2 :)
som spurgt tidligere, men måske ikk så godt formuleret, kan man lave cellen (den lille) med det indhold til et link?
Avatar billede laursen73 Nybegynder
14. oktober 2008 - 00:00 #7
så uanset hvor du placerer musen i cellen og klikker så skifter billedet i den store celle
Avatar billede roenving Novice
14. oktober 2008 - 00:13 #8
Det gør onclick i mit eksempel ...

-- og som skrevet kan det absolut anbefales, at du laver en lille udgave (oh, et skrækscenarie oplevede jeg for nogle år siden hvor en af mine venners knægt havde taget en stribe billeder af de futtere han så godt kunne lide -- selvfølgelig på optimal opløsning, hvorfor de fyldte over 8 Mb hver -- og han havde 8 af dem på index-siden, load-tiden på forsiden var derfor på omkring 3 timer for en almindelig 2003-forbindelse faktisk ville det tage over 32 timer på en ikke ualmindelig 33,6 kb/s-forbindelse !-)

-- men hvis du bruger de samme billeder, bliver koden bare lidt simplere, da man så kan springe replace-tingen over:

  trg.getElementsByTagName("img")[0].setAttribute("src", elm.getElementsByTagName("img")[0].getAttribute("src"));
Avatar billede laursen73 Nybegynder
14. oktober 2008 - 00:23 #9
aha snedigt :)
ved godt det med billederne, de små billeder fylder skam heller ikke mere en et par kb.
Vi har en webmaster i min bowlingklub som, trods mange forklaringer stadig lægger billeder ud på forsiden og "resizer" dem med frontpage i design view, han kan ikke forstå at billedet stadig fylder 5mb hehe.
Men dit virkede helt efter hensigten, roenving :)
Så hvordan gør jeg nu så du får point? sorry min første gang herinde :)
Avatar billede skovenborg Nybegynder
14. oktober 2008 - 00:27 #10
dem kan roenving få. Hans løsning var trods alt den du brugte ;-)
Avatar billede skovenborg Nybegynder
14. oktober 2008 - 00:27 #11
nå, det var også det du mente, sorry. Jeg må snart i seng ;-)
Avatar billede laursen73 Nybegynder
14. oktober 2008 - 00:29 #12
hehe ja det skal jeg oz, aner bare ikke hvordan man giver point og afslutter :)
men 1000 tak for hjælpen alligevel :)
Avatar billede roenving Novice
14. oktober 2008 - 01:08 #13
Jamen, så lægger jeg et svar, så kommer der en boks ude til venstre, hvor du kan markere mit navn og derefter trykke på Acceptér, så får du uddelt point !-)

-- ønskede du at dele point, skulle du bare bede flere om at lægge et svar, så kunne du markere flere (begge/alle ?-) i boksen, så ville de blive fordelt ligeligt, skulle du ønske at fordele dem på alle måder, får du et Avanceret-link med flere svar ...

-- læs expfaq'en: http://expfaq.dk/behandling_af_svar#behandling_af_svar

Velbekomme '-)
Avatar billede roenving Novice
14. oktober 2008 - 16:14 #14
-- og tak for point ;~}
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