13. oktober 2008 - 23:10Der 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)
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>
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; }
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?
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
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
-- 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:
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 :)
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 ...
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.