Till Startsidan

Skaffa webbhotell?
Läs JavaScript.nu's jämförelse av webbhotell.
Med priser från
9 kr / månad.

Genom ett samarbete får alla JavaScript.nu-
besökare dessutom 100 kr i rabatt vid beställning.


HJÄLP! Spara kryssade bilder i en array

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]


Forum / HJÄLP! Spara kryssade bilder i en array
 Hej!
Jag har fastnat totalt!
Vill att de bilder(en större version av dem) som kryssats i checkbox ska sparas i en array, för att föra över dem till ett bildspel på en annan sida.

HUR GÖR JAG???
Skulle verkligen uppskatta hjälp.

Tack


KODEN FÖR SIDA 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uppgift 6</title>
<link rel="stylesheet" type="text/css" href="style6.css" />
<script type="text/javascript">
var picIx;
var windowSmall = null;
var xpicBig = new Array();
var xpic = new Array();
xpic[0] = "butterfly_small";
xpic[1] = "boats_small";
xpic[2] = "church_small";
xpic[3] = "flower_small";
xpic[4] = "glass_small";

function showPict(show,nr){
var imgText = document["image" + nr].alt;
document.getElementById("picText" + nr).innerHTML = imgText;

if(show)
document.getElementById("BigPic"+nr).style.visibility = "visible";
else
document.getElementById("BigPic"+nr).style.visibility = "hidden";


box[picIx].style.zIndex = 10;
var z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
}
z = 9;
for (var i=picIx+1; i<box.length; i++){
box[i].style.zIndex = z;
z = z - 1;
}
}

function init(){
box = document.getElementsByName("popup")
for (var i=0; i<box.length; i++){
box[i].style.left = 5*i+"px";
}
picIx = 0;
}

function checkedPic(nr){
if(document.xbox.kryss[nr].checked)
var imgUrl = "pics/" + xpic[nr] + "1.jpg";

else
var imgUrl = "pics/" + xpic[nr] + "0.jpg";
document.getElementById("image" + nr).src = imgUrl;
}

function newWindow(width,height,filename){
var windowProp = "resizable=yes,width=" + width; + ",height=" + height;

if(windowSmall !=null)if(windowSmall.closed ==false) windowSmall.close();
windowSmall = window.open(filename,"Bildspel", windowProp);
}

function showSlides(nr){
// while (xpicBig.length > 0)xpicBig.pop(); //rensar arrayen
for (var i=0; i<xpic.length; i++){ //KOLLA UPP NAMNET!!! EV. FEL(BIG)
var url = xpic[i].src; //url:en till valda bilder





var filename = substring(lastIndexOf("."))//.jpg
var filename = substring(url.)


var filename = xpicBig[i].src; //namnen på bilderna
}
newWindow(width="450",height="350","slideshow.htm");
}


</script>
</head>
<body onload="init();">
<form name="xbox" action="">
<div id="pics">
<h1> Sommarens Bilder </h1>
<div id="a11"onmouseover="showPict(true, 0);" onmouseout="showPict(false, 0);">
<img id="image0" src="pics/butterfly_small0.jpg" alt="En fjäril." />
<div id="BigPic0" class="box" name="popup"><img src="pics/butterfly.jpg" alt="En fjäril." width="200px" height="150px" />
<label><p />
<input name="kryss" type="checkbox" onclick="checkedPic(0,0);" />
<span id="picText0" />
</label>
</div>
</div>
<div id="a11" onmouseover="showPict(true, 1);" onmouseout="showPict(false, 1);">
<img id="image1" src="pics/boats_small0.jpg" alt="Båtar vid stranden." />
<div id="BigPic1" class="box" name="popup"><img src="pics/boats.jpg" alt="Båtar vid stranden." width="200px" height="150px" />
<label><p />
<input name="kryss" type="checkbox" onclick="checkedPic(1,1);" />
<span id="picText1" />
</label>
</div>
</div>
<div id="a11" onmouseover="showPict(true, 2);" onmouseout="showPict(false, 2);">
<img id="image2" src="pics/church_small0.jpg" alt="En kyrka i Spanien." />
<div id="BigPic2" class="box" name="popup"><img src="pics/church.jpg" alt="En kyrka i Spanien." width="200px" height="150px" />
<label><p />
<input name="kryss" type="checkbox" onclick="checkedPic(2,2);" />
<span id="picText2" />
</label>
</div>
</div>
<div id="a11" onmouseover="showPict(true, 3);" onmouseout="showPict(false, 3);">
<img id="image3" src="pics/flower_small0.jpg" alt="Somrig blomma." />
<div id="BigPic3" class="box" name="popup"><img src="pics/flower.jpg" alt="Somrig blomma." width="200px" height="150px" />
<label><p />
<input name="kryss" type="checkbox" onclick="checkedPic(3,3);" />
<span id="picText3" />
</label>
</div>
</div>
<div id="a11" onmouseover="showPict(true, 4);" onmouseout="showPict(false, 4);">
<img id="image4" src="pics/glass_small0.jpg" alt="Snart ett nytt glas." />
<div id="BigPic4" class="box" name="popup"><img src="pics/glass.jpg" alt="Snart ett nytt glas." width="200px" height="150px" />
<label><p />
<input name="kryss" type="checkbox" onclick="checkedPic(4,4);" />
<span id="picText4" />
</label>
</div>
</div>
<div id="slideShowBtn">
<input type="button" value="Visa bildspel" onclick="showSlides();" />
</div>
</div>
</form>
</body>
</html>


KODEN FÖR SIDA 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Uppgift 6</title>
<link rel="stylesheet" type="text/css" href="style6.css" />
<script type="text/javascript">

var xpicBig = window.opener.xpicBig;
var showSlide;
var showSlide;
var imgText;

function initShow() {
var HTMLcode = "<select name='menuPic' onchange='showPict()'>"; //Gör så att när jag väljer i menyn anropas showPict 'menupic'=rullista i menyn
for (var i=0; i<xpicBig.length; i++) { //Loop för att se vilka/hur många filer som är förkryssade
var HTMLcode = HTMLcode + "<option>" + xpicBig[i] + "</option>"; //Lägger till en optiontag, för varje fil som loopen räknar upp
} // End for
var HTMLcode = HTMLcode + "</select>";
document.getElementById("menu").innerHTML = HTMLcode; //Visar var funktionen ska visas
document.showForm.menuPic.selectedIndex = 0; // första optiontaggen ska visas i menyn
showSlide = document.getElementById("ShowedPic"); //vart bilden ska visas
showSlide.src = "pics/" + xpicBig[0];
} // End initShow

function PrevPic() {
var i = document.showForm.menu.selectedIndex; // Index för den bild som visas
if (i > 0) { // Om ej första bild redan visas
document.showForm.menu.selectedIndex = i-1; // Subtrahera 1 från menyvalet, så att menyn uppdateras
showSlide.src = "pics/" + xpicBig[i-1]; // Visa föregående bild
} // End if
} // End PrevPic

function NextPic() {
var i = document.showForm.menu.selectedIndex; // Index för den bild som visas
if (i < xpicBig.length-1) { // Om ej sista bild redan visas
document.showForm.menu.selectedIndex = i+1; // Addera 1 till menyvalet, så att menyn uppdateras
showSlide.src = "pics/" + xpicBig[i+1]; // Visa nästa bild
} // End if
} // End NextPict

function showPict(){
showSlide.src = "pics/" + xpicBig[document.showForm.menu.selectedIndex]; //Tar reda på vad jag valt i menyn
}//End showPict

function textBox(){
var imgText = new Array("En fjäril.","Båtar vid stranden.","En kyrka i Spanien.","Somrig blomma.","Snart ett nytt glas.");

}//End textBox

</script>
</head>
<body onload="initShow()";>
<h2> Bildspel</h2>
<div id="picSlideShow">
<img id="showedPic" alt="Bilderna i bildspelet." src="pics/white.jpg" onmouseover="textBox"; />
<form id="showForm" action="">
<input type="button" value="Bakåt" onclick="prevPic()"; />
<span id="menu">här ska menyn ligga</span>
<input type="button" value="Framåt" onclick="nextPic()"; />
</form>
</div>
</body>
</html>

CSS:EN

@charset "UTF-8";


body{background-color:#cef589; font-family:Bradley Hand ITC, sans-serif; font-size:xx-large; color:#ef309c;
width:700px; margin-left:auto; margin-right:auto; }

#pics{position:relative; display:inline-block;}

#a11{position:relative; display:inline-block;}

#BigPic0,
#BigPic1,
#BigPic2,
#BigPic3,
#BigPic4{position:absolute; visibility:hidden; display:inline-block;}
#BigPic div img{float:left; height:150px;}

.box{background-color:#f9fad6; color:#333333; border:2px ridge #333333; text-align:left; font-size:large;
height:200px; width:200px; padding:6px; left:170px; top:50px;}

#picSlideShow{width:500px; margin-left:auto; margin-right:auto;}
#showForm{align:center;}

Postat av 85:an (77.218.18.233) den 08 Maj, 2011 kl 18:56:55.


Svar på inlägget:

Posta ett svar:

Namn:
E-Mail:
Rubrik:
Meddelande:
Ja tack, maila mig om andra svarar på detta inlägg.
Ja tack, maila mig om andra svarar på mitt inlägg.

[ JavaScript.nu's Forum ] [ Viktigt om forumet ] [ JavaScript.nu's Startsida ]



Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]