Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question when checked show image?

    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:

    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?

    Code:
    #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?

  • #2
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okey, I got the css to work =)

    It now looks like this:

    Code:
    #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 =(
    Last edited by Bubbel; 11-17-2010 at 11:25 AM.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,507 Times in 2,485 Posts
    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.

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okey, I'm now trying a different approach.

    Heres the code:

    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:

    Code:
    #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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •