Avatar billede eyes Nybegynder
28. januar 2005 - 11:42 Der er 8 kommentarer og
1 løsning

skifte billede ved onclick

kan det lade sig gøre at lave en funktion der skifter mellem to billeder ved onclick?

når det ene er synligt og klikkes på udskiftes det med det andet og omvendt.
Avatar billede ldanielsen Nybegynder
28. januar 2005 - 11:49 #1
Utestet:

<img src="billede1.gif" onclick="skiftBillede(this);">

<script>
var billedIndex = 0;
function skiftBillede(objBillede){
  billedIndex = (billedIndex == 0) ? 1 : 0;
  objBillede.src = (billedIndex == 0) ? "billede1.gif" : "billede2.gif";
  }
</script>
Avatar billede roenving Novice
28. januar 2005 - 11:52 #2
-- og endnu simplere (selv om ldanielsens metode kan være at foretrække i en hel del situationer !-)

<image src="pic1.jpg" onclick="this.src=(this.src.indexOf('1.jpg')>0)?'pic2.jpg':'pic1.jpg';"
Avatar billede eyes Nybegynder
28. januar 2005 - 12:46 #3
hvis jeg billedet ligger i en div tag og jeg iforvejen har et onclick hvordan gør jeg så?

<div onclick=TogglePanel("[ID]")><img src="billede1.gif"></div>
Avatar billede eyes Nybegynder
28. januar 2005 - 12:47 #4
vil det nemmeste ikke være at give billedet et id og tilgå dette? i onclick på divtagget?
Avatar billede ldanielsen Nybegynder
28. januar 2005 - 13:14 #5
Fordelen ved at bruge onclick på billedet er at du med this får en direkte reference til billedet.

Men du kan godt have en onClick på begge, blot vil billedet så kun skifte hvis du rammer det, ikke hvis du klikker i div'en, men ved siden af billedet.

Er dette acceptabelt? ellers kan du gøre sådan:
<div onclick="TogglePanel('[ID]'); skiftBillede('myImage');"><img src="billede1.gif" id="myImage"></div>

<script>
var billedIndex = 0;
function skiftBillede(strID){
  var objBillede = document.getElementById(strID);
  billedIndex = (billedIndex == 0) ? 1 : 0;
  objBillede.src = (billedIndex == 0) ? "billede1.gif" : "billede2.gif";
  }
</script>
Avatar billede roenving Novice
30. januar 2005 - 13:54 #6
-- og man kan stadig bruge den direkte metode:

<div onclick="TogglePanel('[ID]');this.firstChild.src=(this.firstChild.src.indexOf('1.jpg')>0)?'billede2.jpg':'billede1.jpg';"><img src="billede1.gif"></div>
Avatar billede eyes Nybegynder
02. februar 2005 - 11:20 #7
har fået det løst
brugte en nemmere metode

  var ArrowImg = document.getElementById(id+"arrow");
  if (s=="none") {
  ArrowImg.src="arrow_left.gif";
  } else {
  ArrowImg.src="arrow_down.gif";
  }

S er en status på om divtag som enten er åbent eller lukket
Avatar billede ldanielsen Nybegynder
02. februar 2005 - 12:01 #8
OK

Så kan du jo benytte den "smarte" syntaks:
var ArrowImg = document.getElementById(id+"arrow");
ArrowImg.src = (s=="none") ? "arrow_left.gif" : "arrow_down.gif";
Avatar billede ldanielsen Nybegynder
02. februar 2005 - 12:02 #9
Eller helt kort:

document.getElementById(id+"arrow").src = (s=="none") ? "arrow_left.gif" : "arrow_down.gif";
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