15 Replies Latest reply on Apr 24, 2014 5:42 AM by hans-g.

    Question about a multiple roll over image

    Plokoon111

      Okay so I am designing a school assignment website for college. I took a picture of a drumset and spliced it in photo shop, exported as an html and image. Then I opened it into a floating left column pre layout into the main space. I took each image (of the drum, which upon hovering over it, another image of the drum with a picture on it shows and links to sub pages.) and placed them correctly. However when I go to test them in live and online, there is a white gap space. Since the top portion of the image is split into 3 while the bottom is 4 pieces, the gap lays between that. I checked the styles for the div and there is no space set. Any ideas folks? I would love for this white bar of space to dissapear.

       

      I am also working on Windows 8.

        • 1. Re: Question about a multiple roll over image
          BenPleysier Adobe Community Professional & MVP

          A link to the site is worth more that your spiel.

           

          If that is not possible, paste a copy of the markup and images here so that we can see what you have done.

          1 person found this helpful
          • 2. Re: Question about a multiple roll over image
            Jon Fritz II Adobe Community Professional & MVP

            The table based layouts that Photoshop generates are notoriously inflexible and not meant for "real websites". They are really only for a quick mock-up to show clients what the page will do in some rudimentary fashion.

             

            As Ben says, it's pretty difficult to tell what might be happening in your specific case without seeing the code, but I'm going to guess it's going to be "just the way it is" when you attempt to use PS's generated html with your content.

             

            You would be much better off, if you're dead set on using a table based layout (a bit retro in todays internet), creating the tables within DW without using any column span or row span settings. Instead, when you need something like a two row table with 4 cells in the bottom and 3 in the top, to nest simple tables within each other.

             

            To do the above, it would be best to make a two row one column table, then in the top cell, place a 3 column one row table and in the bottom, a 4 column one row table. You then place your content within those nested table's cells.

             

            Usually, tables are not necessary for layout and everything can be done with css using floats, margins and padding. Though that might be something you cover further down the road if this college course is planning to teach modern techniques.

            1 person found this helpful
            • 3. Re: Question about a multiple roll over image
              Plokoon111 Level 1

              </header>
                <article class="content">
                <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/rotohighlight.jpg','images/middletomhighlight.jpg','imag es/right tom highlight.jpg','images/highathighlight.jpg','images/snarehighlight.jpg','images/bassdrumh ighlight.jpg','images/floortomhighlight.jpg')">
              <!-- Save for Web Slices (Main page sheet.psd) -->
              <table width="960" height="699" border="0" cellpadding="0" cellspacing="0" id="Table_01">
                  <tr>
                      <td class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','assets/rotohighlight.jpg',1)"><img src="assets/rototomnormal.jpg" alt="" width="274" height="273" id="Image3"></a></td>
                     
                      <td colspan="2" class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','assets/middletomhighlight.jpg',1)"><img src="assets/middletomnormal.jpg" alt="" width="296" height="273" id="Image4"></a></td>
                     
                    <td colspan="2" class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','assets/right tom highlight.jpg',1)"><img src="assets/righttomnormal.jpg" alt="" width="390" height="273" id="Image5"></a></td>
                </tr>
                  <tr>
                      <td colspan="2" class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','assets/highathighlight.jpg',1)"><img src="assets/highhatnormal.jpg" alt="" width="334" height="425" id="Image6"></a></td>
                     
                      <td class="table"><a href="About me.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','assets/snarehighlight.jpg',1)"><img src="assets/snarenormal.jpg" alt="" width="236" height="425" id="Image7"></a></td>
                     
                      <td class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','assets/bassdrumhighlight.jpg',1)"><img src="assets/bassdrumnormal.jpg" alt="" width="172" height="425" id="Image8"></a></td>
                     
                    <td class="table"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','assets/floortomhighlight.jpg',1)"><img src="assets/floortomnormal.jpg" alt="" width="218" height="425" id="Image9"></a></td>
                </tr>
                  <tr>
                      <td>
                          <img src="images/spacer.gif" width="274" height="1" alt=""></td>
                      <td>
                          <img src="images/spacer.gif" width="60" height="1" alt=""></td>
                      <td>
                          <img src="images/spacer.gif" width="236" height="1" alt=""></td>
                      <td>
                          <img src="images/spacer.gif" width="172" height="1" alt=""></td>
                      <td>
                          <img src="images/spacer.gif" width="218" height="1" alt=""></td>
                  </tr>
              </table>
              <!-- End Save for Web Slices -->
              </body>
                  <img src="assets/spacer.gif" width="1" height="1"  alt=""/>
                 
                  <table id="Table_01" width="960" height="699" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                          <td> </td>
                              <td colspan="2"> </td>
                  <td colspan="2"> </td>
                  </tr>
                  <tr>
                  <td colspan="2"> </td>
                 
                  <td> </td>
                 
                  <td> </td>
                 
                  <td> </td>
                  </tr>
                  </table>
                 
                </article>
                <footer class="footerjaun">
                  <p class="footerjaun"><em>Kyle's Drumming Zone 2014</em></p>
                </footer>

               

              I posted a lot of code, maybe a bit more than the table itself, but that should hopefully help you guys with the analysis.

              • 4. Re: Question about a multiple roll over image
                MurraySummers Level 8

                There is something wrong about using an HTML5 doctype on a page using tables for layout!

                 

                Your gaps and spaces are undoubtedly the result of using Photoshop to write your HTML. In addition, you have code errors in the part above the PS code - you cannot have any HTML above <body>, yet it appears that your <header> and <article> code is in that location (or is it that you have 2 body tags?):

                 

                <article class="content">

                  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/rotohighlight.jpg','images/middletom highlight.jpg','images/right tom highlight.jpg','images/highathighlight.jpg','images/snarehighlight.jp g','images/bassdrumhighlight.jpg','images/floortomhighlight.jpg')">

                 

                The PS tables are using colspan attributes which is usually fatal unless you really know what you are doing. To see why I say that, go here -

                 

                http://www.apptools.com/rants/spans.php

                • 5. Re: Question about a multiple roll over image
                  Plokoon111 Level 1

                  Is it possible that I set a table with 1 column, and 1 row and set the width at a certain point to where the pictures on the top row, which then pushes it below them?

                  • 7. Re: Question about a multiple roll over image
                    Jon Fritz II Adobe Community Professional & MVP

                    Plokoon111 wrote:

                     

                    Is it possible that I set a table with 1 column, and 1 row and set the width at a certain point to where the pictures on the top row, which then pushes it below them?

                     

                    A one cell table (one row and one column) is possible, yes.

                     

                    The second part of your question I don't understand.

                    • 8. Re: Question about a multiple roll over image
                      Plokoon111 Level 1

                      In theory if I set the table to only go to up to 950px in width max and 700px hieght max. (For example the picture is as wide as 950, and the h is 700 pixel, the table should place the images correctly right?

                       

                      Edit: I did try it and the table is not listening to my width and hieght, and I even made a rule for the table to abide and it doesn't seem to want to obey.

                      • 9. Re: Question about a multiple roll over image
                        Jon Fritz II Adobe Community Professional & MVP

                        Plokoon111 wrote:

                         

                        In theory if I set the table to only go to up to 950px in width max and 700px hieght max. (For example the picture is as wide as 950, and the h is 700 pixel, the table should place the images correctly right?

                         

                        Edit: I did try it and the table is not listening to my width and hieght, and I even made a rule for the table to abide and it doesn't seem to want to obey.

                         

                        Could you share what you have written? I'm guessing there's a simple error in the rule or the html of the table.

                        • 10. Re: Question about a multiple roll over image
                          Plokoon111 Level 1

                          </script>
                          </head>

                           

                          <body onLoad="MM_preloadImages('assets/rotohighlight.jpg','assets/middletomhighlight.jpg','asse ts/right tom highlight.jpg','assets/highathighlight.jpg','assets/snarehighlight.jpg','assets/bassdrumh ighlight.jpg','assets/floortomhighlight.jpg')">
                          <table width="980" border="0" align="left" cellpadding="0" cellspacing="0" class="none">
                            <tr>
                              <th width="970" height="970" align="left" valign="top" scope="col"><p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('roto','','assets/rotohighlight.jpg',1)"><img src="assets/rototomnormal.jpg" alt="" width="274" height="273" id="roto"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tom','','assets/middletomhighlight.jpg',1)"><img src="assets/middletomnormal.jpg" alt="" width="296" height="273" id="tom"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tomright','','assets/right tom highlight.jpg',1)"><img src="assets/righttomnormal.jpg" alt="" width="390" height="273" id="tomright"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('hh','','assets/highathighlight.jpg',1)"><img src="assets/highhatnormal.jpg" alt="" width="334" height="425" id="hh"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('snare','','assets/snarehighlight.jpg',1)"><img src="assets/snarenormal.jpg" alt="" width="236" height="425" id="snare"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('bass','','assets/bassdrumhighlight.jpg',1)"><img src="assets/bassdrumnormal.jpg" alt="" width="172" height="425" id="bass"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('floor','','assets/floortomhighlight.jpg',1)"><img src="assets/floortomnormal.jpg" alt="" width="218" height="425" id="floor"></a></p>
                          </th>
                            </tr>
                          </table>
                          </body>
                          </html>

                          • 11. Re: Question about a multiple roll over image
                            Jon Fritz II Adobe Community Professional & MVP

                            Were you talking about a css "rule" above?

                             

                            All I see are pixel widths/heights set with html attributes to amounts you didn't mention.

                             

                            Please post the code of the entire page, including css (if you can't upload and share a link). HTML fragments rarely tell the entire story and typically won't yeild  answers specific to your actual needs.

                            • 12. Re: Question about a multiple roll over image
                              hans-g. Adobe Community Professional & MVP

                              Hi and @ Jon,

                               

                              using your/his first source code from above I can see in Live View "there is a white gap space" (I hope we talk about it):

                               

                               

                              drRoll.JPG

                               

                               

                              I would try more, but first I would propose that you "Plokoon111" will give the three images in the first line the same width (by using a picture processing program) and after that so too to the four images in the second row (Total sum 960 px).

                               

                              Then please load up your files to your server and give us the link, no matter how the wesite looks like.

                               

                              Hans-Günter

                              1 person found this helpful
                              • 13. Re: Question about a multiple roll over image
                                Plokoon111 Level 1

                                You guys were extremely helpful and super quick in responses. What I ended up doing was setting each picture to an absolute position, and moving them correctly to the pixel width. So the first one I set to left 0, and top 200px, and then the second picture I took the width of the first pic and added that to the left pixel in the layout in CSS. Did that with all and it works, just gotta get the heading to lineup with it.

                                • 14. Re: Question about a multiple roll over image
                                  MurraySummers Level 8

                                  Bad plan and poor layout technique, but being as you are only using images, you are likely to get away with it. If I were grading your method, I would not be kind. The right way to do this would be to line the images up horizontally, then wrap them with a container, and use CSS to set the width of the container. Having done that, the images will (or should) fit perfectly. For example - consider 4 images each 100px wide. Wrapping them in a 200px width container will result in two images horizontally adjacent on each of two vertically adjacent lines.

                                  • 15. Re: Question about a multiple roll over image
                                    hans-g. Adobe Community Professional & MVP

                                    Hello,

                                     

                                    you are welcome and regardless of the many other opportunities we/you have got here, two of Nancy O.'s template come in my mind. See here:

                                     

                                    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml

                                    http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml

                                     

                                    I would try it, .. and I repeat, try to give all your images the same height and the same width.

                                     

                                    Hans-Günter

                                    1 person found this helpful