Jonas Schmeltz Aaberg <julledyret@e-mail.dk> writes:
> Jeg har brug for at kunne sætte en masse billeder ind ved siden
> af og under hinanden, så det danner "mosaik"..
> Det er dog ikke kvadratiske billeder, men seks-kanter [1] på
> (h*b) 7*12pixels, og skal sættes "tæt" sammen - næsten som en
> bikube [2].
> Nu vil jeg gerne dynamisk kunne ændre udseendet af denne
> "collage" udfra 2 variabler, altså højde og bredde, dvs. hvor
> mange enkelte billeder, collagen skal bestå af hhv. i bredden og
> i højden.
hvad mener du med "dynamisk"? Efter at siden er loadet, eller mens
siden loader? Det gør en forskel. Det sidste kan klares med
document.write, som understøttes af alle browsere der forstår
Javascript, mens det første kræver en browser hvor man kan tilføje
elementer efter at siden er loadet.
> [1]: se [
http://frip.dk/3m/gfld.gif]
> [2]: se [
http://frip.dk/3m/bfld.gif]
>
> Hvordan skal jeg lave det?
Billedet er allerede gennemsigtigt, det er godt.
Jeg ville placere billederne absolut i forhold til en kasse omkring
dem.
Forslag: Put følgende i head-elementet:
---
<style type="text/css">
.hive {
border:1px dotted black;
position:relative;
}
.cell {
position:absolute;
width:12px;
height:7px;
}
</style>
<script type="text/javascript">
function writeHive(x,y) {
var hiveWidth = x * 8 + 3;
var hiveHeight = y * 6 + 4;
document.write("<div class=\"hive\" style=\"width:",
hiveWidth,"px",
";height:",
hiveHeight,"px",
"\">");
for (var yi = 0; yi<y; yi++) {
for (var xi = 0; xi<x; xi++) {
document.write("<img src=\"
http://frip.dk/3m/gfld.gif\" ",
"class=\"cell\" style=\"",
"left:",xi*8,"px;",
"top:",yi*6 + (xi%2==1?3:0),"px",
"\">");
}
}
document.write("<\/div>");
}
</script>
----
Så kan der indsættes en bikube på siden med
---
<script type="text/javascript">
writeHive(8,7);
</script>
---
Husk at bruge en DOCTYPE der sætter browseren i standards mode, ellers
passer tallene ikke helt.
Hvis du vil indsætte cellerne senere, så skal du bruge en anden metode:
---
<script type="text/javascript">
function insertCells(hive,x,y) {
// tøm indhold.
while(hive.hasChildNodes()) {hive.removeChild(hive.lastChild);}
hive.style.width = (x * 8 + 3) + "px";
hive.style.height = (y * 6 + 4) + "px";
for (var yi = 0; yi<y; yi++) {
for (var xi = 0; xi<x; xi++) {
var img = document.createElement("img");
img.src = "
http://frip.dk/3m/gfld.gif";
img.className = "cell";
img.style.left = (xi*8) + "px";
img.style.top = (yi*6 + (xi%2==1?3:0)) + "px";
hive.appendChild(img);
}
}
}
</script>
---
Du kan fx bruge den sådan:
---
X:<input id="cellsX">
Y:<input id="cellsY">
<input type="button" value="update"
onclick="insertCells(document.getElementById('hiveElem'),
+document.getElementById('cellsX').value,
+document.getElementById('cellsY').value);">
<div class="hive" id="hiveElem">X</div>
---
(brug samme style sheet som det første eksempel).
Held og lykke :)
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:
http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'