...

View Full Version : when checked show image?



Bubbel
11-17-2010, 11: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, 12:22 PM
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, 12:26 PM
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, 12:39 PM
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, 03: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum