-
befuddled by foo
Hello
I have a working code that when you click an image in 1 div it shows a larger image & a few words.
I my html each div increases the number by 1 i.e.: foo1, foo2, foo3 & so on.
for some reason, foo9 & foo10 will not work & I cant seem to figure out why. :confused:
I have checked to make sure the image path is correct & all names are correct & everything looks good.
if anyone can pls help i would greatly appreciate it.
I have included the code/html but you can see it in action at: http://whambamgames.com/wb/formats/pattern.html & scroll down near bottom.
Code:
<script type="text/javascript">
function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}
function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
</script>
HTML Code:
<tr>
<td class="auto-style1"><a href="#foo4" onclick="show_visibility('foo4')"><img border="0" src="images/pattern/smileyface.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo5" onclick="show_visibility('foo5')"><img border="0" src="images/xtreme/xtreme4.gif" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo6" onclick="show_visibility('foo6')"><img border="0" src="images/pattern/arrow.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo9" onclick="show_visibility('foo9')"><img border="0" src="images/pattern/rectangle.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo3" onclick="show_visibility('foo3')"><img border="0" src="images/pattern/plus.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo7" onclick="show_visibility('foo7')"><img border="0" src="images/pattern/butterfly.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo8" onclick="show_visibility('foo8')"><img border="0" src="images/pattern/corners.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo2" onclick="show_visibility('foo2')"><img border="0" src="images/pattern/cross.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo1" onclick="show_visibility('foo1')"><img border="0" src="images/pattern/pinwheel.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo10" onclick="show_visibility('foo10')"><img border="0" src="images/pattern/rrtracks.jpg" width="75" height="148"></a></td>
<td class="auto-style1"><img border="0" src="images/pattern/blank.gif" width="75" height="150"></td>
</tr>
<div id="lnks" style="height: 300px; margin-left: 200px; margin-top: -2px; width: 592px;">
<div id='foo0' style="display:show; background: #ffffff; width:99%;">
<p style="width: 354px"><b><font face="Arial">Click any Image to see how to make it.</font></b></p>
<p><img border="0" src="images/pattern/blank.gif" width="168" height="333"></div>
<div id='foo1' style="display:none; background: #ffffff; width:100%;">
<p><b><u>PINWHEEL:</u></b><br> Do NOT let BALLS 2 & 4 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/pinwheel.jpg" width="168" height="333"></p>
<p> </div>
<div id='foo2' style="display:none; background: #ffffff; width:100%; ">
<p><b><u>CROSS:</u></b><br> 3 Players MUST only get BALL 3 in the Home Triangle! 1 Player must get BALL 3 & 4</p>
<p><img border="0" src="images/pattern/cross.jpg" width="168" height="333"></p>
<p> </div>
<div id='foo3' style="display:none; background: #ffffff; width:100%;">
<p><b><u>PLUS:</u></b><br> Do NOT let balls 1 & 2 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/plus.jpg" width="168" height="333"></p>
<p> </div>
<div id='foo4' style="display:none; background: #ffffff; width:100%;">
<p><b><u>SMILEY FACE:</u></b><br> 1 Player MUST get BALLS 1,4 and 2 in the Home Triangle,<br> Their pard must get BALLS 1 and 2 in.</p><p> The other Pards must get in BALL 2 and his pard BALL 1</p>
<p> </p>
<p><img border="0" src="images/pattern/smileyface.jpg" width="168" height="333"></div>
<div id='foo5' style="display:none; background: #ffffff; width:100%;">
<p><b><u>SNOWFLAKE:</u></b><br> Do NOT let BALL 4 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/snowflake.gif" width="168" height="333"></p>
<p> </div>
<div id='foo6' style="display:none; background: #ffffff; width:100%;">
<p><b><u>ARROW:</u></b><br> 1 Player MUST get ALL 4 BALLs in the Home Triangle! Their Pard must get BALL 3 & 4 in <br> The other 2 players must get BALL 2 in and his Pard must get in BALL 1</p>
<p><img border="0" src="images/pattern/arrow.jpg" width="168" height="333"></p>
<p> </div>
<div id='foo7' style="display:none; background: #ffffff; width:100%;">
<p><b><u>BUTTERFLY:</u></b><br> 1 Player MUST get BALLs 1, 2 & 3 in the Home Triangle. His Pard must ONLY get BALL 3 in <br> The other 2 players must get BALLS 1, 2 and 4 in the Home Triangle!</p>
<p><img border="0" src="images/pattern/butterfly.jpg" width="168" height="333"></p>
<p> </div>
<div id='foo8' style="display:none; background: #ffffff; width:100%;">
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p>
<div id='foo9' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p>
<div id='foo10' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>
<div>
</div>
</div>
</div>
</p>
thanks
HippieChickie
-
This:
Code:
<div id='foo8' style="display:none; background: #ffffff; width:100%;">
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p>
<div id='foo9' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p>
<div id='foo10' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>
<div>
</div>
</div>
</div>
</p>
Should probably be:
Code:
<div id='foo8' style="display:none; background: #ffffff; width:100%;">
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p> </div>
<div id='foo9' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p> </div>
<div id='foo10' style="display:none; background: #ffffff; width:100%;">
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>
</div>
</div>
</p>
In any case there are missing closing </div> tags such that foo9 and 10 appear to the browser to be a part of foo8.
-
thanks so much! you are brilliant! that was exactly the problem!
Have a great day!
HippieChickie
-
As my previous post was removed without comment or reason given, I'll repeat it. Whereas earlier it was only 50+ errors, there are now over 100 errors in your page which the W3C Validator has picked up.
Link
Using the W3C Validator will frequently help you find simple errors yourself.
-
It is desirable to have valid code/markup - yet it's not essential. I would go further. It's a very good idea to have valid code/markup. That said - when a perfectly good solution has already been offered, I think it's also a very good idea to wait until the OP has digested and responded to that before anyone goes about harping about valid code/markup. Once that has happened (the OP has gotten and acknowledged their answer), then it's fine to harp on fundamentals - or whatever anyone might want to add, as long as it's constructive.
I would go further. If fundamentals are your main thing - you should probably blog about them (You can even do that here - the DD forum has free blogging available for regular participants such as yourself). The forum here is more about solutions to specific issues.
That said - I admit it's a gray area. If you get there first - fine, talk about valid markup all you want. If you are not first on the scene though, unless the advice already given is obviously wrong, PLEASE give the OP a chance to digest it before adding your own 2 cents.
