Bildförstoring Javascript

Har precis börjar lite smått med javascript, och har fått en uppgift där man ska kunna klicka på en miniatyrbild som sedan öppnas i full storlek i ett nytt fönster.

Krav på funktion är att den ska vara generell och fungera på sidans alla bilder.

Så har skapat två versioner av bilden en som heter "bild.jpg" och en som heter "stor_bild.jpg", så det ska alltså ändras från "bild.jpg" till "stor_bild.jpg".

Har fått tipsa om att använda funktionen "split()", "this" och "window.open()". Men jag vet inte vart jag ska börja, och skulle behöva tips på hur jag bör lägga upp det och vad jag bör tänka på.

Tack på förhand :)

//Martina

känns lite som en skoluppgift av något slag?
Men lite tips (vilket du borde redan förstå om man kollar på http://www.webforum.nu/showthread.php?t=185331):
document.getElementsByTagName("img"), window.onload loopar du igenom allabilder och binder onlcick på dom så få du en metod där this refererar till den aktuella bilden som klickas på.

du vet ju om källan på alla bilder, split vet jag inte vad du vill använda dig av om den lilla bilden heter i stil med bild.jpg så vill du ju bara lägga på "stor_" + bildensorginal_namn

Får inte ihop det ändå, ända sättet jag får det till att fungera är såhär, men så ska jag ju inte lösa uppgiften :(

<img src="bild.jpg" alt="min bild" id="bild" onclick="changeValue()">

function changeValue()
{
    document.getElementById("bild").src = window.open("bild_stor.jpg");
}

sen säger du sätt bildens källa till vad window.open generera... det är inte riktigt rätt ;)

<img src="bild.jpg" alt="min bild" id="bild" onclick="changeValue(this)">

function changeValue(el)
{
    window.open(el.src.replace(/\.jpg/, "_stor.jpg"));
}

så hämta du ut bildens källa och ersätter .jpg med _stor.jpg

läs om window.open: https://developer.mozilla.org/en/DOM/window.open

Tusen tack! :)

Fick inte lov att ha onclick i html-filen. Men varför kan jag inte gå igenom alla bilder med klassen "bild", med en for-loop, på samma sätt som jag gick igenom alla stycken med klassen "external"? :q

       
var bild = document.getElementsByTagName("img");
for(var i = 0; i < bild.length; i++)
{ 
  if(bild[i].className = "bild")
  {
    bild[i].onclick = changeValue;
  }  
}

Det kan du ju. Om du vill du sa alla bilder på sidan och då gå det fortare att hitta alla element som är en bild

Men det fungerar inte? :q

<img src="bild.jpg" alt="Min bild" class="bild" name="bild">

function changeValue(el)
{
  window.open(el.src.replace(/\.jpg/, "_stor.jpg"));
}

function init()
{
  var bild = document.getElementsByTagName("img");
  for(var i = 0; i < bild.length; i++)
  { 
    if(bild[i].className = "bild")
    {
      bild[i].onclick = changeValue;
    }  
  }
}

för din if fråga är fel, du använder dig bara av ett = om du skall sätta ett värde, om du jämför värden så är det == eller === ( === är även mot typ av objekt)

och:

function changeValue(el)
{
  window.open(el.src.replace(/\.jpg/, "_stor.jpg"));
}

kräver el som en inparameter, men du sätter onclick med javascript, då är det this som du vill ha som referens:

function changeValue(){
    window.open(this.src.replace(/\.jpg/, "_stor.jpg"));
}

Tack så jätte mycket! :)