when checked show image?

Bubbel

11-17-2010, 10:59 AM

I'm trying to make a simple image gallary where there are five images showing. When onmouseover a layer appears where a larger version of the pictures displays and under that picture are a checkbox. When checking the smaller picture underneath will change. And here is the problem, it doesn't change! Arrrghhh!

I'm trying to make it work like this:
Show all the pictures on a row.
Put the pictures I want to change into underneath those pictures and make them appear when checkbox is checked.

Is that even a possible way to do this or am I just wasting my time?

Heres my code:

/.../

<script type="text/javascript" language="javascript">

function showPictLayer(nr,show) {

var element = document.getElementById("storBild"+nr);
if (show) element.style.visibility = "visible";
else element.style.visibility = "hidden";
}

function showHidePict(nr) {
var element = document.getElementById("storBild"+nr);
if (element.style.visibility == "visible") show = false;
else var show = true;
for (var i=0; i<5; i++) showPictLayer(i,false);
showPictLayer(nr,show);
}

function showClear(nr) {
var clear = document.getElementById("clear" +nr);
if (clear.checked == true) {
document.getElementById("clear" +nr).src = imgNr;
}
}

</script>
</head>

<body>

<ul id="bilder">

<li class="bildBox">
<div onmouseover="showPictLayer(0,true)" onmouseout="showHidePict(0,false)"><span><img name="Båt" src="pics/boats_small0.jpg" alt="grå båt" /></span>
<ul id="storBild0">
<li><img id="Båt" src="pics/boats_small1.jpg" alt="båt" /></li>
<li><label><input type="checkbox" name="Kryss0" onclick="showClear(0)" /> Båt i sjö</label></li>
</ul>

</div>
</li>

<li class="bildBox">
<div onmouseover="showPictLayer(1,true)" onmouseout="showHidePict(1,false)"><span><img name="Fjäril" src="pics/butterfly_small0.jpg" alt="grå fjäril" /></span>
<ul id="storBild1">
<li><img id="Fjäril" src="pics/butterfly_small1.jpg" alt="fjäril" /></li>
<li><label><input type="checkbox" name="Kryss1" onclick="showClear(1)" /> Fjäril</label></li>
</ul>

</div>
</li>

<li class="bildBox">
<div onmouseover="showPictLayer(2,true)" onmouseout="showHidePict(2,false)"><span><img name="Kyrka" src="pics/church_small0.jpg" alt="grå kyrka" /></span>
<ul id="storBild2">
<li><img id="Kyrka" src="pics/church_small1.jpg" alt="kyrka" /></li>
<li><label><input type="checkbox" name="Kryss2" onclick="showClear(2)" /> Kyrka</label></li>
</ul>

</div>
</li>

<li class="bildBox">
<div onmouseover="showPictLayer(3,true)" onmouseout="showHidePict(3,false)"><span><img name="Blomma" src="pics/flower_small0.jpg" alt="grå blomma" /></span>
<ul id="storBild3">
<li><img id="Blomma" src="pics/flower_small1.jpg" alt="blomma" /></li>
<li><label><input type="checkbox" name="Kryss3" onclick="showClear(3)" /> Lila blomma</label></li>
</ul>

</div>
</li>

<li class="bildBox">
<div onmouseover="showPictLayer(4,true)" onmouseout="showHidePict(4,false)"><span><img name="Glas" src="pics/glass_small0.jpg" alt="grå glas" /></span>
<ul id="storBild4">
<li><img id="Glas" src="pics/glass_small1.jpg" alt="glas" /></li>
<li><label><input type="checkbox" name="Kryss4" onclick="showClear(4)" /> Glasblåsning</label></li>
</ul>

</div>
</li>

</ul>

<ul id="klaraBilder">

<li id="clear0"><span><img name="Båt" src="pics/boats_small1.jpg" alt="grå båt" /></span></li>

<li id="clear1"><span><img name="Fjäril" src="pics/butterfly_small1.jpg" alt="grå fjäril" /></span></li>

<li id="clear2"><span><img name="Kyrka" src="pics/church_small1.jpg" alt="grå kyrka" /></span></li>

<li id="clear3"><span><img name="Blomma" src="pics/flower_small1.jpg" alt="grå blomma" /></span></li>

<li id="clear4"><span><img name="Glas" src="pics/glass_small1.jpg" alt="grå glas" /></span></li>

</ul>

<div id=button>

<input type="button" value="Visa bildspel" />

</div>

</body>
</html>

Or is it the css thats wrong? I know its something wrong with it because it will not show the pictures at the same place as I want them too... But is it something else as well?

#bilder {display:table.row; }

#bilder li span {cursor:pointer;}

#bilder ul {visibility:hidden;}

.bildBox {display:table-cell; width:280px;}

.bildBox div {position:relative; display:inline-block;}
.bildBox ul {list-style:none; position:absolute;
top:30px; left:20px; z-index:10;
background:#DDDDDD; color:#333333; border:2px outset #333333; '
width:200px; padding:6px;}
.bildBox ul img {height:200px; width:250px;}

#klaraBilder {display:table.row; }

#klaraBilder li {position:relative; display:inline-block; width:144px;}

#button {position:relative; top:20px; }

Any advise or tips on how I should solve this?

Bubbel

11-17-2010, 11:22 AM

Okey, I got the css to work =)

It now looks like this:

#bilder {display:table.row; }

#bilder li span {cursor:pointer;}

#bilder ul {visibility:hidden;}

.bildBox {display:table-cell; width:280px;}

.bildBox div {position:relative; display:inline-block;}

.bildBox ul {list-style:none; position:absolute;
top:30px; left:20px; z-index:10;
background:#DDDDDD; color:#333333; border:2px outset #333333; '
width:200px; padding:6px;}
.bildBox ul img {height:200px; width:250px;}

#klaraBilder {display:table.row; position:relative; }

#klaraBilder li {position:relative; display:inline-block; display:table-cell; width:280px; visibility:hidden;}

#button {position:relative; top:20px; }

But still struggling whit the JS =(

Philip M

11-17-2010, 11:26 AM

for (var i=0; i<5; i++) {
showPictLayer(i,false);
showPictLayer(nr,show);
}

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Bubbel

11-17-2010, 11:39 AM

sorry it doesn't work =(

I don't have a problem with showing the layer, that works as i want it to.

But the picture underneath the layer wont change when I check the checkbox in the layer.... Then whats wrong?

Bubbel

11-18-2010, 02:08 PM

Okey, I'm now trying a different approach.

Heres the code:

/.../

<script type="text/javascript" language="javascript">

function showPictLayer(id,show) {

var layer = document.getElementById(id);
if (show) layer.style.visibility = "visible";
else layer.style.visibility = "hidden";
}

function showClear() {

if (document.form.check0.checked) document.boats.src = "pics/boats_small1.jpg";
else document.boats.src = "boats_small0.jpg";
if (document.form.check1.checked) document.butterfly.src = "pics/butterfly_small1.jpg";
else document.butterfly.src = "butterfly_small0.jpg";
if (document.form.check2.checked) document.church.src = "pics/church_small1.jpg";
else document.church.src = "church_small0.jpg";
if (document.form.check3.checked) document.glass.src = "pics/glass_small1.jpg";
else document.glass.src = "glass_small0.jpg";
if (document.form.check4.checked) document.flower.src = "pics/flower_small1.jpg";
else document.flower.src = "flower_small0.jpg";
}

</script>
</head>

<body>

<h1>Mitt första bildspel</h1>

<form name="form">
<ul id="bilder">

<li class="bildBox" >
<span><img name="Båt" src="pics/boats_small0.jpg" alt="grå båt" onmouseover="showPictLayer('boats',true)" onmouseout="showPictLayer('boats',false)" /></span>
<ul class="greyBox">
<img id="boats" src="pics/boats.jpg" alt="båt" />
<input type="checkbox" id="check0" onchange="showClear()" /> Båt i sjö
</ul>
</li>

<li class="bildBox" >
<span><img name="Fjäril" src="pics/butterfly_small0.jpg" alt="grå fjäril" onmouseover="showPictLayer('butterfly',true)" onmouseout="showPictLayer('butterfly',false)" /></span>
<ul class="greyBox">
<img id="butterfly" src="pics/butterfly.jpg" alt="fjäril" />
<input type="checkbox" name="check1" onclick="showClear()" /> Fjäril
</ul>
</li>

<li class="bildBox">
<span><img name="Kyrka" src="pics/church_small0.jpg" alt="grå kyrka" onmouseover="showPictLayer('church',true)" onmouseout="showPictLayer('church',false)" /></span>
<ul class="greyBox">
<img id="church" src="pics/church.jpg" alt="kyrka" />
<input type="checkbox" name="check2" onclick="showClear()" /> Kyrka
</ul>
</li>

<li class="bildBox" >
<span><img name="Blomma" src="pics/flower_small0.jpg" alt="grå blomma" onmouseover="showPictLayer('flower',true)" onmouseout="showPictLayer('flower',false)" /></span>
<ul class="greyBox">
<img id="flower" src="pics/flower.jpg" alt="blomma" />
<input type="checkbox" name="check3" onclick="showClear()" /> Lila blomma
</ul>
</li>

<li class="bildBox">
<span><img name="Glas" src="pics/glass_small0.jpg" alt="grå glas" onmouseover="showPictLayer('glass',true)" onmouseout="showPictLayer('glass',false)" /></span>
<ul class="greyBox">
<img id="glass" src="pics/glass.jpg" alt="glas" />
<input type="checkbox" name="check4" onclick="showClear()" /> Glasblåsning
</ul>
</li>

</ul>
</form>

<div id=button>

<input type="button" value="Visa bildspel" />

</div>

</body>
</html>

And the css:

#bilder li span img {visibility:visible; cursor:pointer;}

.bildBox {display:table-cell; width:280px;}

.greyBox {position:relative; display:inline-block;}

.greyBox img {visibility:hidden; position:absolute; top:-50px; left:40px; z-index:10;
background:#DDDDDD; color:#333333; border:2px outset #333333; '
width:200px; height: 200px; padding:6px;}

.greyBox img {width:200px; height:150px}

#button {position:relative; top:20px; }

The problem now is that the checkbox is underneath the picture, and not underneath the picture in the "greybox".

Can someone tell me whats wrong?