Problems with putting rollovers in table

  • Thralis
  • Born
  • Born
  • Thralis
  • Posts: 4
  • Loc: Washington State

Post 3+ Months Ago

I think the subject line explains it all. Im having trouble aligning my rollover images in my table. I want them one right underneath the other but they dont turn out that way. Here is the link to the site http://webpages.charter.net/hallowedwarrior/main.html This on the other hand is the HTML code:
----------------------------------------------------------------
Code: [ Select ]
<html>
  <head>
<!--Code generated by Cool Web Scrollbars from Harmony Hollow Software-->
<!--http://www.harmonyhollow.net-->
<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#7D0101;
scrollbar-highlight-color:#FD0000;
scrollbar-3dlight-color:#6A0000;
scrollbar-darkshadow-color:#060606;
scrollbar-shadow-color:#030303;
scrollbar-arrow-color:#D90000;
scrollbar-track-color:#030303;
}
-->
</STYLE>
<!--End Cool Web Scrollbars code-->

  <TITLE>Home of Giant Cog Productions</TITLE>
    
    <SCRIPT LANGUAGE="JavaScript">
<!-- Begin Image Mouseover Code

image0 = new Image();
image0.src = "Button-Personal2.jpg";


image1 = new Image();
image1.src = "Button-Tribes2.jpg";


image2 = new Image();
image2.src = "Button-Thief2.jpg";


image3 = new Image();
image3.src = "Button-UT2.jpg";

// end Image Mouseover Code-->
</script>

    
    
    <script language="JavaScript">
function Play(set)
{
  if(set == 1)
  {
   music.innerHTML="<img src='on.jpg' onClick='Play(0)'><embed autostart='true' loop='true' src='m01tone8.wav' width=0 height=0>";
  }
  else
  {
   music.innerHTML="<img src='off.jpg' onClick='Play(1)'>";
  }
}
</script>

  </head>
  <BODY BGcolor= "#000000">
  <table width="620" height="854" cellpadding="0" cellspacing="0" align="center">

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td><img src="LeftSelection.JPG" border="0"></td>
    <td><img src="TopSelection.JPG" width="350" height="83" alt="" border="0">
      <iframe width="348" height="350" src="writingarea.html"></iframe>

<a href="http://webpages.charter.net/hallowedwarrior/personal.html" onmouseover="image0.src='Button-Personal2.jpg';" onmouseout="image0.src='Button-Personal.jpg';"><img name="image0" src="Button-Personal.jpg" border=0></A>

<a href=" http://webpages.charter.net/hallowedwarrior/tribes.html" onmouseover="image1.src='Button-Tribes2.jpg';" onmouseout="image1.src='Button-Tribes.jpg';"><img name="image1" src="Button-Tribes.jpg" border=0></a

<a href=" http://webpages.charter.net/hallowedwarrior/thief.html" onmouseover="image2.src='Button-Thief2.jpg';" onmouseout="image2.src='Button-Thief.jpg';"><img name="image2" src="Button-Thief.jpg" border=0></a>

<a href=" http://webpages.charter.net/hallowedwarrior/ut.html" onmouseover="image3.src='Button-UT2.jpg';" onmouseout="image3.src='Button-UT.jpg';"><img name="image3" src="Button-UT.jpg" border=0></a>

     
      <img src="bottomselection.JPG" width="350" height="83" alt="" border="0" align="bottom"></td>
    <td><img src="RightSelection.JPG" border="0"></td>
</tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
</table>
<center>
<span id="music">
<img src='on.jpg' onClick='Play(0)'>
<embed autostart="true" loop="true" src="m01tone8.wav" width=0 height=0>
</span>
<BR>



<center>
<table width="100" border="0" cellspacing="0" cellpadding="0" <script language="JavaScript" type="text/javascript">
<!--

     document.write("Last Modified " + document.lastModified)

// -->
</script>><tr><td><a href="http://www.mydatanet.com"><img border="0" src="http://www.pro-counter.com/cgi-bin/gd-count.cgi?page=http://webpages.charter.net/hallowedwarrior/main.html&style=fff_manager_black&nbdigits=8&reloads=1" alt="isp"></a></td></tr><tr><td><div align="center"><font size="2" face="arial, helvetica, sans-serif"><a href="http://www.mydatanet.com">isp</a></font></div></td></tr></table>
            
    
    <script language="JavaScript" type="text/javascript">
<!--

     document.write("Last Modified " + document.lastModified)

// -->
</script>
</center>
<center>
    <A HREF="http://www.buttongenerator.com/"><IMG SRC="http://www.buttongenerator.com/ima/link.gif" WIDTH=88 HEIGHT=31 BORDER=0 ALT="ButtonGenerator"></A>
  </center>
    </Body>
  1. <html>
  2.   <head>
  3. <!--Code generated by Cool Web Scrollbars from Harmony Hollow Software-->
  4. <!--http://www.harmonyhollow.net-->
  5. <STYLE type="text/css">
  6. <!--
  7. BODY {
  8. scrollbar-face-color:#7D0101;
  9. scrollbar-highlight-color:#FD0000;
  10. scrollbar-3dlight-color:#6A0000;
  11. scrollbar-darkshadow-color:#060606;
  12. scrollbar-shadow-color:#030303;
  13. scrollbar-arrow-color:#D90000;
  14. scrollbar-track-color:#030303;
  15. }
  16. -->
  17. </STYLE>
  18. <!--End Cool Web Scrollbars code-->
  19.   <TITLE>Home of Giant Cog Productions</TITLE>
  20.     
  21.     <SCRIPT LANGUAGE="JavaScript">
  22. <!-- Begin Image Mouseover Code
  23. image0 = new Image();
  24. image0.src = "Button-Personal2.jpg";
  25. image1 = new Image();
  26. image1.src = "Button-Tribes2.jpg";
  27. image2 = new Image();
  28. image2.src = "Button-Thief2.jpg";
  29. image3 = new Image();
  30. image3.src = "Button-UT2.jpg";
  31. // end Image Mouseover Code-->
  32. </script>
  33.     
  34.     
  35.     <script language="JavaScript">
  36. function Play(set)
  37. {
  38.   if(set == 1)
  39.   {
  40.    music.innerHTML="<img src='on.jpg' onClick='Play(0)'><embed autostart='true' loop='true' src='m01tone8.wav' width=0 height=0>";
  41.   }
  42.   else
  43.   {
  44.    music.innerHTML="<img src='off.jpg' onClick='Play(1)'>";
  45.   }
  46. }
  47. </script>
  48.   </head>
  49.   <BODY BGcolor= "#000000">
  50.   <table width="620" height="854" cellpadding="0" cellspacing="0" align="center">
  51. <tr>
  52.     <td></td>
  53.     <td></td>
  54.     <td></td>
  55. </tr>
  56. <tr>
  57.     <td><img src="LeftSelection.JPG" border="0"></td>
  58.     <td><img src="TopSelection.JPG" width="350" height="83" alt="" border="0">
  59.       <iframe width="348" height="350" src="writingarea.html"></iframe>
  60. <a href="http://webpages.charter.net/hallowedwarrior/personal.html" onmouseover="image0.src='Button-Personal2.jpg';" onmouseout="image0.src='Button-Personal.jpg';"><img name="image0" src="Button-Personal.jpg" border=0></A>
  61. <a href=" http://webpages.charter.net/hallowedwarrior/tribes.html" onmouseover="image1.src='Button-Tribes2.jpg';" onmouseout="image1.src='Button-Tribes.jpg';"><img name="image1" src="Button-Tribes.jpg" border=0></a
  62. <a href=" http://webpages.charter.net/hallowedwarrior/thief.html" onmouseover="image2.src='Button-Thief2.jpg';" onmouseout="image2.src='Button-Thief.jpg';"><img name="image2" src="Button-Thief.jpg" border=0></a>
  63. <a href=" http://webpages.charter.net/hallowedwarrior/ut.html" onmouseover="image3.src='Button-UT2.jpg';" onmouseout="image3.src='Button-UT.jpg';"><img name="image3" src="Button-UT.jpg" border=0></a>
  64.      
  65.       <img src="bottomselection.JPG" width="350" height="83" alt="" border="0" align="bottom"></td>
  66.     <td><img src="RightSelection.JPG" border="0"></td>
  67. </tr>
  68. <tr>
  69.     <td></td>
  70.     <td></td>
  71.     <td></td>
  72. </tr>
  73. </table>
  74. <center>
  75. <span id="music">
  76. <img src='on.jpg' onClick='Play(0)'>
  77. <embed autostart="true" loop="true" src="m01tone8.wav" width=0 height=0>
  78. </span>
  79. <BR>
  80. <center>
  81. <table width="100" border="0" cellspacing="0" cellpadding="0" <script language="JavaScript" type="text/javascript">
  82. <!--
  83.      document.write("Last Modified " + document.lastModified)
  84. // -->
  85. </script>><tr><td><a href="http://www.mydatanet.com"><img border="0" src="http://www.pro-counter.com/cgi-bin/gd-count.cgi?page=http://webpages.charter.net/hallowedwarrior/main.html&style=fff_manager_black&nbdigits=8&reloads=1" alt="isp"></a></td></tr><tr><td><div align="center"><font size="2" face="arial, helvetica, sans-serif"><a href="http://www.mydatanet.com">isp</a></font></div></td></tr></table>
  86.             
  87.     
  88.     <script language="JavaScript" type="text/javascript">
  89. <!--
  90.      document.write("Last Modified " + document.lastModified)
  91. // -->
  92. </script>
  93. </center>
  94. <center>
  95.     <A HREF="http://www.buttongenerator.com/"><IMG SRC="http://www.buttongenerator.com/ima/link.gif" WIDTH=88 HEIGHT=31 BORDER=0 ALT="ButtonGenerator"></A>
  96.   </center>
  97.     </Body>

-----------------------------------------------------------------------

You will also notice that one of the rollovers doesnt work. I could use some help with that as well. THanx in advance
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • lilcutie009
  • Novice
  • Novice
  • User avatar
  • Posts: 20
  • Loc: UK

Post 3+ Months Ago

I usually put a full stop or something between images to seperate them. I make the colour of the full stop the same colour as the background so it's not visible. Not a very good method but it works sometimes!


xxx
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

Thralis...use the code block tags provided in the post reply, in the future when posting code.

This:
Code: [ Select ]
<tr>
   <td></td>
   <td></td>
   <td></td>
</tr>
  1. <tr>
  2.    <td></td>
  3.    <td></td>
  4.    <td></td>
  5. </tr>


Should be this:
Code: [ Select ]
<tr>
   <td colspan=3>&nbsp</td>
</tr>
  1. <tr>
  2.    <td colspan=3>&nbsp</td>
  3. </tr>

Your's isn't wrong...but I think this is more correct...does that make since.


The other thing that catches my attention is how you inserted the iframe. I don't know anything really about iframes, but the way it's inserted into this table looks suspect to me. But again, I'm in no way an expert on iframes. So, it's possible that's how it's done.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Posts: 524
  • Loc: NC, USA

Post 3+ Months Ago

I just did some reading on iframes here

i'm thinking that it would be easiest if you separated the iframe from the table like this (pseudo code)

Code: [ Select ]
<table align=center>
   <tr>
     <td>
         
     </td>
   </tr>
</table>
<div align=center><iframe></iframe></div>
<table align=center>
   <tr>
     <td>
     </td>
   </tr>
</table>
  1. <table align=center>
  2.    <tr>
  3.      <td>
  4.          
  5.      </td>
  6.    </tr>
  7. </table>
  8. <div align=center><iframe></iframe></div>
  9. <table align=center>
  10.    <tr>
  11.      <td>
  12.      </td>
  13.    </tr>
  14. </table>


While the iframe can be inserted into the table. It's just easier to explain how to fix the problems w/ your particular table by just reworking the structure of your page.
  • Thralis
  • Born
  • Born
  • Thralis
  • Posts: 4
  • Loc: Washington State

Post 3+ Months Ago

Hmm, first off thanx for the replies. I havent been around cause I erased my activation email so I lost the URL for this site :P. 2nd your replies make SOME sense but I'm really having trouble understanding wat your talking about. I understand wat you mean about consolidating the code for my table. Personally though it helps me see wats going on in the code better if I have it written that way anyway. As to the IFrame suggestion I want the iframe in the table. Besides thats not really wat Im having problems with. My question is still unanswered. thnx for the tips though. As to the whole code tags my excuse is I never knew I could do that so............*shrugs*
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

The a tag for the second image is broken - you're missing the closing angle bracket (>). Trying putting that in and it should solve some of your problems.

Also I would advise that you just get rid of those empty rows entirely (or use s15199d's suggestion and add non-breaking spaces &nbsp;). I would also add height, width and alt attributes for all your images. Maybe you could try something like this for the table code:

Code: [ Select ]
<table width="620" height="854" cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td><img src="LeftSelection.JPG" border="0" height="620" width="256" alt=""></td>
<td><img src="TopSelection.JPG" width="350" height="83" alt="" border="0">
<iframe width="348" height="350" src="writingarea.html"></iframe>
<a href="http://webpages.charter.net/hallowedwarrior/personal.html" onmouseover="image0.src='Button-Personal2.jpg';" onmouseout="image0.src='Button-Personal.jpg';"> <img name="image0" src="Button-Personal.jpg" width="348" height="23" alt="" border=0></a>
<a href=" http://webpages.charter.net/hallowedwarrior/tribes.html" onmouseover="image1.src='Button-Tribes2.jpg';" onmouseout="image1.src='Button-Tribes.jpg';"><img name="image1" src="Button-Tribes.jpg" width="348" height="23" alt="" border=0></a>
<a href=" http://webpages.charter.net/hallowedwarrior/thief.html" onmouseover="image2.src='Button-Thief2.jpg';" onmouseout="image2.src='Button-Thief.jpg';"><img name="image2" src="Button-Thief.jpg" width="348" height="23" alt="" border=0></a>
<a href=" http://webpages.charter.net/hallowedwarrior/ut.html" onmouseover="image3.src='Button-UT2.jpg';" onmouseout="image3.src='Button-UT.jpg';"><img name="image3" src="Button-UT.jpg" width="348" height="23" alt="" border=0></a>
<img src="bottomselection.JPG" width="350" height="83" alt="" border="0" align="bottom"></td>
<td><img src="RightSelection.JPG" border="0" height="620" width="256" alt=""></td>
</tr>
</table>
  1. <table width="620" height="854" cellpadding="0" cellspacing="0" align="center" border="0">
  2. <tr>
  3. <td><img src="LeftSelection.JPG" border="0" height="620" width="256" alt=""></td>
  4. <td><img src="TopSelection.JPG" width="350" height="83" alt="" border="0">
  5. <iframe width="348" height="350" src="writingarea.html"></iframe>
  6. <a href="http://webpages.charter.net/hallowedwarrior/personal.html" onmouseover="image0.src='Button-Personal2.jpg';" onmouseout="image0.src='Button-Personal.jpg';"> <img name="image0" src="Button-Personal.jpg" width="348" height="23" alt="" border=0></a>
  7. <a href=" http://webpages.charter.net/hallowedwarrior/tribes.html" onmouseover="image1.src='Button-Tribes2.jpg';" onmouseout="image1.src='Button-Tribes.jpg';"><img name="image1" src="Button-Tribes.jpg" width="348" height="23" alt="" border=0></a>
  8. <a href=" http://webpages.charter.net/hallowedwarrior/thief.html" onmouseover="image2.src='Button-Thief2.jpg';" onmouseout="image2.src='Button-Thief.jpg';"><img name="image2" src="Button-Thief.jpg" width="348" height="23" alt="" border=0></a>
  9. <a href=" http://webpages.charter.net/hallowedwarrior/ut.html" onmouseover="image3.src='Button-UT2.jpg';" onmouseout="image3.src='Button-UT.jpg';"><img name="image3" src="Button-UT.jpg" width="348" height="23" alt="" border=0></a>
  10. <img src="bottomselection.JPG" width="350" height="83" alt="" border="0" align="bottom"></td>
  11. <td><img src="RightSelection.JPG" border="0" height="620" width="256" alt=""></td>
  12. </tr>
  13. </table>
  • Thralis
  • Born
  • Born
  • Thralis
  • Posts: 4
  • Loc: Washington State

Post 3+ Months Ago

HOLY *plum*!! IT *peach* WORKS!! WOOHOO! Thanx for the keen eyes RichB for some wierd reason I missed that broken tag. Suprisingly that fixed my problem. LOL damn code is finickey to the max. Ill take your advise and clean up some of that table code ASAP.
  • Nem
  • Guru
  • Guru
  • Nem
  • Posts: 1243
  • Loc: UK

Post 3+ Months Ago

thralis let me see a preview

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.