• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2561
  • Last Modified:

Mouseover action to show/hide div

How do I set it so that putting the mouse pointer over Image A in DIV A causes DIV B to become visible, and as soon as the mouse pointer is moved off of Image A, DIV B is hidden again?  The DIVs are already all named and laid out; I just need the CSS and/or JavaScript to execute the action.  The page is in XHTML 1.0 Transitional, served as text/html (SGML).  So far all the JavaScript solutions I have tried fail to work properly; they either require clicking "Image A" or else do nothing at all.  It needs to work in Firefox and Safari, and preferably in IE and Opera.
0
joelwnelson
Asked:
joelwnelson
  • 17
  • 15
  • 5
  • +1
1 Solution
 
prsupriyaCommented:
Hello....

Try this:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.off {
position:         absolute;
left:             5;
top:                    5;
z-index:          1;
visibility:       visible;
}

.on {
position:         absolute;
left:             5;
top:                    5;
z-index:          2;
visibility:       hidden;
}
</STYLE>
<SCRIPT>
/* Shows an object  */
function showIt(object) {
      document.getElementById('img1').style.visibility = "visible";
            
}

/* Hides an object */
function hideIt(object) {
      document.getElementById('img1').style.visibility = "hidden";
      document.getElementById('img2').style.visibility = "visible";
}
//stop hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>

<!--These are the static OFF images-->
<DIV CLASS="off" ID="img2">
<A HREF = "#" onMouseOver = "showIt(img1)">
<IMG src="image1.gif" BORDER=0>
</A><BR></DIV>


<!--These are the hidden ON images-->
<DIV CLASS="on" ID = "img1">
<A HREF = "#" onMouseOut = "hideIt(img1)">
<IMG src="image2.gif" BORDER=0>
</A><BR></DIV>

</BODY>
</HTML>

Hope this helps.

S:
0
 
joelwnelsonAuthor Commented:
That's close to what I need but not quite the solution yet.  For one, the mouseover image located in Div A must always remain visible; Div B is positioned elsewhere on the page and is made active only when the mouse is over the thumbnail image in Div A.  The application for this is a thumbnail image in Div A that is displayed at a larger size in Div B, the "viewer box" when the mouse pointer is over the thumbnail image.
0
 
prsupriyaCommented:
oh...here is the modified code..

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.off {
visibility:       visible;
}

.on {
visibility:       hidden;
}
</STYLE>
<SCRIPT>
/* Shows an object  */
function showIt(object) {
     document.getElementById('img1').style.visibility = "visible";
         
}

/* Hides an object */
function hideIt(object) {
     document.getElementById('img1').style.visibility = "hidden";
   
}
//stop hiding -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>

<!--These are the static OFF images-->
<DIV CLASS="off" ID="img2">
<A HREF = "#" onMouseOver = "showIt(img1)" onMouseOut = "hideIt(img1)">
<IMG src="image1.gif" BORDER=0>
</A><BR></DIV>


<!--These are the hidden ON images-->
<DIV CLASS="on" ID = "img1">
<A HREF = "#" >
<IMG src="image2.gif" BORDER=0>
</A><BR></DIV>

</BODY>
</HTML>


0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
joelwnelsonAuthor Commented:
Are you sure about this:

<STYLE TYPE="text/css">
.off {
visibility:       visible;
}

.on {
visibility:       hidden;
}
</STYLE>

It seems like having "off" be visible and "on" be hidden would be the opposite of what I want -- or am I missing the point?  Anyway, it still doesn't seem to be working.

Here is the URL of the page: http://floodwarning.mmjcdes.net/beta/index.html
and of the CSS file: http://floodwarning.mmjcdes.net/beta/default.css

Display of the DIVs in the right column is erratic  (one doesn't display; the others do) and none of the mouseovers are working.  I'm sure I'm doing something wrong with this but I haven't identified what yet. :-)

For the XHTML to validate I had to convert all markup and JavaScript to lowercase.
0
 
prsupriyaCommented:
Here is what you need...I pasted the whole page source of index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

<html>

      <head>
            <title>Flood Warning Systems Information</title>
            <base href="http://floodwarning.mmjcdes.net/beta/" />
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
            <meta name="description" content="Your source for weather radio news and information. Features two station lists and an expansion station list" />
            <meta name="author" content="Joel W. Nelson" />
            <meta name="keywords" content="noaa weather radio station directory listing list expansion nwr national service emwin emergency disaster tornado flood hurricane earthquake fema transmitter same fips" />
            <meta name="revisit-after" content="7days" />
            <meta name="robots" content="index, follow" />
            <link href="default.css" rel="stylesheet" type="text/css" media="all"/>

<SCRIPT>
/* Shows an object  */
function showIt(obj) {
      hideAll();
      switch (obj.id)
      {
            case 'index_alerts_big':{ 
                  document.getElementById('index_alerts_big').style.visibility = "visible";
                  break;
            }
            case 'index_asd_big':{ 
                  document.getElementById('index_asd_big').style.visibility = "visible";
                  break;
            }
            case 'index_hybrid_big':{ 
                  document.getElementById('index_hybrid_big').style.visibility = "visible";
                  break;
            }
            case 'index_msd_big':{ 
                  document.getElementById('index_msd_big').style.visibility = "visible";
                  break;
            }
      }      
}

/* Hides an object */
function hideAll() {
     document.getElementById('index_alerts_big').style.visibility = "hidden";
     document.getElementById('index_asd_big').style.visibility = "hidden";
     document.getElementById('index_hybrid_big').style.visibility = "hidden";
     document.getElementById('index_msd_big').style.visibility = "hidden";
   
}
//stop hiding -->
</SCRIPT>
      </head>

            <body>
            <div id="header">
                  <div id="logo"></div>
                  <div id="navbar">
                        <ul>
                              <li><a href="index.html">Home</a></li>
                              <li><a href="alert.html">ALERT Systems</a></li>
                              <li><a href="asd.html">Automated Stage Detection</a></li>
                              <li><a href="hybrid.html">Hybrid Systems</a></li>
                              <li><a href="msd.html">Manual Stage Detection</a></li>
                              <li><a href="contact.html">Contact</a></li>
                        </ul>
                  </div>
            </div>
            <div id="body">
                  <div id="leftzone">
                        <div id="whatsnew">
                              <strong>Left Content Area</strong>
                              
                              <p><em>Header</em>:<br/>
                                    plain</p>
                              
                         </div>
                   </div>
                  <div id="centerzone">
                        <span class="welcomeheader">Flood Warning Systems Information Page</span><br/>
                        <span class="tagline">floodwarning.mmjcdes.net</span>
                        <p></p>
                        <div id="index_alert">
                              <p></p><a href = "#" onmouseover = "showIt(index_alerts_big)" onmouseout = "hideAll()"><img id="index_alert_img" src="images/alert1.jpg" alt="" /></a>
                              <div id="index_alert_text"><br /><strong><a href="alert.html">ALERT Systems</a></strong> - A type of computer-based flood warning system developed by the California-Nevada River Forecast Center of the National Weather Service around 1980. The acronym stands for Automated Local Evaluation in Real Time.
                                    </div>
                              </div>
                        <div id="index_asd">
                              <p></p><a href = "#" onmouseover = "showIt(index_asd_big)" onmouseout = "hideAll()"><img id="index_asd_img" src="images/asd1.jpg" alt="" /></a>
                              <div id="index_asd_text"><br /><strong><a href="asd.html">Automated Stage Detection</a></strong> - Automated stage detection flood warning  systems come in many forms, but most rely on some device to use a telephone connection, or a current loop to warn people when a certain stage threshold is exceeded.
                                    </div>
                        </div>
                        <div id="index_hybrid">
                              <p></p><a href = "#" onmouseover = "showIt(index_hybrid_big)" onmouseout = "hideAll()"><img id="index_hybrid_img" src="images/hybrid1.jpg" alt="" /></a>
                              <div id="index_hybrid_text"><br /><strong><a href="hybrid.html">Hybrid Systems</a></strong> - A Hybrid Flood Warning System is one that employs a combination of ALERT and USGS stream gaging methods and equipment. Hybrid systems feature remote rain and stream gages and may, or may not have a computer base station.</div>
                        </div>
                        <div id="index_manual">
                              <p></p><a href = "#" onmouseover = "showIt(index_msd_big)" onmouseout = "hideAll()"><img id="index_manual_img" src="images/msd1.jpg" alt="" /></a>
                              <div id="index_manual_text"><br /><strong><a href="msd.html">Manual Stage Detection</a></strong> - Manual stage detection is as old as civilization. It is simply determining the level of water against a known reference point. Modern manual stage detection methods include staff gages, wire weight gages and chain gages.</div>
                        </div>
                        <p>
                        </p>
                        <div id="copyright">
                              <p><a href="http://validator.w3.org/check?uri=floodwarning.mmjcdes.net%2Findex.html">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a></p>
                              <p></p>
                              </div>
                  </div>
                  <div id="rightzone" style="z-index:1;" >
                        <div id="about" style="z-index:2;position:absolute;" >
                              <strong>Image Viewer Area</strong>
                              <p><strong>(text currently serves as a placeholder for the future images)</strong></p>
                              <div id="index_alerts_big" style="visibility:hidden; position:absolute;top:70px; z-index:3;">alert</div>
                              <div id="index_asd_big" style="visibility:hidden; position:absolute;top:70px;  z-index:4;">asd</div>
                              <div id="index_hybrid_big" style="visibility:hidden; position:absolute;top:70px;  z-index:5;">hybrid</div>
                              <div id="index_msd_big" style="visibility:hidden; position:absolute;top:70px;  z-index:6;">manual</div>
                        </div>      
                  </div>
            </div>      
      </body>
</html>
0
 
prsupriyaCommented:
oops....remove the <base href from the code... I just put it for testing :)-

S:
0
 
joelwnelsonAuthor Commented:
Which browsers did you test it in?  I'm still not having any success in either Firefox or Safari.  Otherwise it looks good so I really don't understand why it fails to work in either browser.  When I put the mouse cursor over the four little pictures in the center column I expect the text to appear in the right box or at least the mouse pointer to change to the hand (due to the a href="#" tag) but nothing happens.
0
 
joelwnelsonAuthor Commented:
*I got it to work* although the only the upper-left pixels of each image respond; the remainder of the thumbnail images don't activate with the mouseover.  It sounds like that could be a problem with my CSS.  What do I need to do to make the entire thumbnail image work with the mouseover?
0
 
prsupriyaCommented:
hmmm.....I was looking in IE and hadn't checked it Firefox earlier.... try this modified code...
and also check your style sheet for #index_alert_img ...because of this mouse over is not proper in firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

<html>

      <head>
            <title>Flood Warning Systems Information</title>
            <base href="http://floodwarning.mmjcdes.net/beta/" />
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
            <meta name="description" content="Your source for weather radio news and information. Features two station lists and an expansion station list" />
            <meta name="author" content="Joel W. Nelson" />
            <meta name="keywords" content="noaa weather radio station directory listing list expansion nwr national service emwin emergency disaster tornado flood hurricane earthquake fema transmitter same fips" />
            <meta name="revisit-after" content="7days" />
            <meta name="robots" content="index, follow" />
            <link href="default.css" rel="stylesheet" type="text/css" media="all"/>

<SCRIPT>
/* Shows an object  */
function showIt(obj) {
      hideAll();
      switch (obj)
      {
            case 'index_alerts_big':{ 
                  document.getElementById('index_alerts_big').style.visibility = "visible";
                  break;
            }
            case 'index_asd_big':{ 
                  document.getElementById('index_asd_big').style.visibility = "visible";
                  break;
            }
            case 'index_hybrid_big':{ 
                  document.getElementById('index_hybrid_big').style.visibility = "visible";
                  break;
            }
            case 'index_msd_big':{ 
                  document.getElementById('index_msd_big').style.visibility = "visible";
                  break;
            }
      }      
}

/* Hides an object */
function hideAll() {
     document.getElementById('index_alerts_big').style.visibility = "hidden";
     document.getElementById('index_asd_big').style.visibility = "hidden";
     document.getElementById('index_hybrid_big').style.visibility = "hidden";
     document.getElementById('index_msd_big').style.visibility = "hidden";
   
}
//stop hiding -->
</SCRIPT>
      </head>

            <body>
            <div id="header">
                  <div id="logo"></div>
                  <div id="navbar">
                        <ul>
                              <li><a href="index.html">Home</a></li>
                              <li><a href="alert.html">ALERT Systems</a></li>
                              <li><a href="asd.html">Automated Stage Detection</a></li>
                              <li><a href="hybrid.html">Hybrid Systems</a></li>
                              <li><a href="msd.html">Manual Stage Detection</a></li>
                              <li><a href="contact.html">Contact</a></li>
                        </ul>
                  </div>
            </div>
            <div id="body">
                  <div id="leftzone">
                        <div id="whatsnew">
                              <strong>Left Content Area</strong>
                              
                              <p><em>Header</em>:<br/>
                                    plain</p>
                              
                         </div>
                   </div>
                  <div id="centerzone">
                        <span class="welcomeheader">Flood Warning Systems Information Page</span><br/>
                        <span class="tagline">floodwarning.mmjcdes.net</span>
                        <p></p>
                        <div id="index_alert">
                              <p></p><a href = "#" onmouseover = "showIt('index_alerts_big')" onmouseout = "hideAll()"><img id="index_alert_img" src="images/alert1.jpg" alt="" /></a>
                              <div id="index_alert_text"><br /><strong><a href="alert.html">ALERT Systems</a></strong> - A type of computer-based flood warning system developed by the California-Nevada River Forecast Center of the National Weather Service around 1980. The acronym stands for Automated Local Evaluation in Real Time.
                                    </div>
                              </div>
                        <div id="index_asd">
                              <p></p><a href = "#" onmouseover = "showIt('index_asd_big')" onmouseout = "hideAll()"><img id="index_asd_img" src="images/asd1.jpg" alt="" /></a>
                              <div id="index_asd_text"><br /><strong><a href="asd.html">Automated Stage Detection</a></strong> - Automated stage detection flood warning  systems come in many forms, but most rely on some device to use a telephone connection, or a current loop to warn people when a certain stage threshold is exceeded.
                                    </div>
                        </div>
                        <div id="index_hybrid">
                              <p></p><a href = "#" onmouseover = "showIt('index_hybrid_big')" onmouseout = "hideAll()"><img id="index_hybrid_img" src="images/hybrid1.jpg" alt="" /></a>
                              <div id="index_hybrid_text"><br /><strong><a href="hybrid.html">Hybrid Systems</a></strong> - A Hybrid Flood Warning System is one that employs a combination of ALERT and USGS stream gaging methods and equipment. Hybrid systems feature remote rain and stream gages and may, or may not have a computer base station.</div>
                        </div>
                        <div id="index_manual">
                              <p></p><a href = "#" onmouseover = "showIt('index_msd_big')" onmouseout = "hideAll()"><img id="index_manual_img" src="images/msd1.jpg" alt="" /></a>
                              <div id="index_manual_text"><br /><strong><a href="msd.html">Manual Stage Detection</a></strong> - Manual stage detection is as old as civilization. It is simply determining the level of water against a known reference point. Modern manual stage detection methods include staff gages, wire weight gages and chain gages.</div>
                        </div>
                        <p>
                        </p>
                        <div id="copyright">
                              <p><a href="http://validator.w3.org/check?uri=floodwarning.mmjcdes.net%2Findex.html">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a></p>
                              <p></p>
                              </div>
                  </div>
                  <div id="rightzone">
                        <div id="about" >
                              <strong>Image Viewer Area</strong>
                              <p><strong>(text currently serves as a placeholder for the future images)</strong></p>
                              <div id="index_alerts_big" style="visibility:hidden;">alert</div>
                              <div id="index_asd_big" style="visibility:hidden;">asd</div>
                              <div id="index_hybrid_big" style="visibility:hidden;">hybrid</div>
                              <div id="index_msd_big" style="visibility:hidden;">manual</div>
                        </div>      
                  </div>
            </div>      
      </body>
</html>
0
 
joelwnelsonAuthor Commented:
It is still doing the same thing -- only the top (appx.) 5 (Horizontal) and 10 (Vertical) pixels respond.
What should I check for in #index_alert_img on the default.css file -- and why is the mouse over not proper in Firefox?
I'm doing all my coding and testing on a Mac (my primary computer). I have periodic access to a Windows PC but have not tried it yet on this site.

Increasing point value...

>hmmm.....I was looking in IE and hadn't checked it Firefox earlier.... try this modified code...
>and also check your style sheet for #index_alert_img ...because of this mouse over is not
>proper in firefox
0
 
seanpowellCommented:
The javascript:

<script type="text/javascript">
<!--
function toggle(theDiv)
{
      var elem = document.getElementById(theDiv);
      elem.style.display = (elem.style.display == "none")?"":"none";
}
//-->
</script>


The images that get the rollover:

<a href="#" onmouseover="toggle('pic1');return false;" onmouseout="toggle('pic1');return false;"><img src=""></a>
<a href="#" onmouseover="toggle('pic2');return false;" onmouseout="toggle('pic2');return false;"><img src=""></a>
<a href="#" onmouseover="toggle('pic3');return false;" onmouseout="toggle('pic3');return false;"><img src=""></a>


The rollover images goe here:
<div id="pic1" style="display:none;"><img src=""></div>
<div id="pic2" style="display:none;"><img src=""></div>
<div id="pic3" style="display:none;"><img src=""></div>


Thanks,
Sean


0
 
joelwnelsonAuthor Commented:
It's still not working -- only certain pixels along the left side of the image respond to the mouseover.  The remainder of the image doesn't trigger the mouseover effect.
0
 
seanpowellCommented:
Show me the page - the code is fine.

Sean
0
 
seanpowellCommented:
BTW - the CSS is rather a mess there - you should try removing all the unnecessary attributes and the redundant html...

Sean
0
 
joelwnelsonAuthor Commented:
I'll work with the CSS -- I know it's a mess but I was trying to put it off until the HTML development on the site was finished.

Here's the HTML...
-- -- -- -- -- -- -- -- --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

<html>

     <head>
          <title>Flood Warning Systems Information</title>
          <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
          <meta name="robots" content="index, follow" />
          <link href="default.css" rel="stylesheet" type="text/css" media="all"/>

<script type="text/javascript">
<!--
function toggle(theDiv)
{
     var elem = document.getElementById(theDiv);
     elem.style.display = (elem.style.display == "none")?"":"none";
}
//-->
</script>

     </head>

          <body>
          <div id="header">
               <div id="logo"></div>
               <div id="navbar">
                    <ul>
                         <li><a href="index.html">Home</a></li>
                         <li><a href="alert.html">ALERT Systems</a></li>
                         <li><a href="asd.html">Automated Stage Detection</a></li>
                         <li><a href="hybrid.html">Hybrid Systems</a></li>
                         <li><a href="msd.html">Manual Stage Detection</a></li>
                         <li><a href="contact.html">Contact</a></li>
                    </ul>
               </div>
          </div>
          <div id="body">
               <div id="leftzone">
                    <div id="whatsnew">
                         <strong>Left Content Area</strong>
                         
                         <p><em>Header</em>:<br/>
                              plain</p>
                         
                     </div>
                </div>
               <div id="centerzone">
                    <span class="welcomeheader">Flood Warning Systems Information Page</span><br/>
                    <span class="tagline">floodwarning.mmjcdes.net</span>
                    <p></p>
                    <div id="index_alert">
                         <p></p><a href="#" onmouseover="toggle('index_alert_big');return false;" onmouseout="toggle('index_alert_big');return false;"><img id="index_alert_img" src="images/alert1.jpg" alt="" /></a>
                         <div id="index_alert_text"><br /><strong><a href="alert.html">ALERT Systems</a></strong> - A type of computer-based flood warning system developed by the California-Nevada River Forecast Center of the National Weather Service around 1980. The acronym stands for Automated Local Evaluation in Real Time.
                              </div>
                         </div>
                    <div id="index_asd">
                         <p></p><a href="#" onmouseover="toggle('index_asd_big');return false;" onmouseout="toggle('index_asd_big');return false;"><img id="index_asd_img" src="images/asd1.jpg" alt="" /></a>
                         <div id="index_asd_text"><br /><strong><a href="asd.html">Automated Stage Detection</a></strong> - Automated stage detection flood warning  systems come in many forms, but most rely on some device to use a telephone connection, or a current loop to warn people when a certain stage threshold is exceeded.
                              </div>
                    </div>
                    <div id="index_hybrid">
                         <p></p><a href="#" onmouseover="toggle('index_hybrid_big');return false;" onmouseout="toggle('index_hybrid_big');return false;"><img id="index_hybrid_img" src="images/hybrid1.jpg" alt="" /></a>
                         <div id="index_hybrid_text"><br /><strong><a href="hybrid.html">Hybrid Systems</a></strong> - A Hybrid Flood Warning System is one that employs a combination of ALERT and USGS stream gaging methods and equipment. Hybrid systems feature remote rain and stream gages and may, or may not have a computer base station.</div>
                    </div>
                    <div id="index_manual">
                         <p></p><a href="#" onmouseover="toggle('index_msd_big');return false;" onmouseout="toggle('index_alert_big');return false;"><img id="index_manual_img" src="images/msd1.jpg" alt="" /></a>
                         <div id="index_manual_text"><br /><strong><a href="msd.html">Manual Stage Detection</a></strong> - Manual stage detection is as old as civilization. It is simply determining the level of water against a known reference point. Modern manual stage detection methods include staff gages, wire weight gages and chain gages.</div>
                    </div>
                    <p>
                    </p>
                    <div id="copyright">
                         <p><a href="http://validator.w3.org/check?uri=floodwarning.mmjcdes.net%2Findex.html">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a></p>
                         <p></p>
                         </div>
               </div>
               <div id="rightzone">
                    <div id="about" >
                         <strong>Image Viewer Area</strong>
                         <p><strong>(text currently serves as a placeholder for the future images)</strong></p>
                         <div id="index_alert_big" style="display:none;">alert</div>
                         <div id="index_asd_big" style="display:none;">asd</div>
                         <div id="index_hybrid_big" style="display:none;">hybrid</div>
                         <div id="index_msd_big" style="display:none;">manual</div>
                    </div>    
               </div>
          </div>    
     </body>
</html>
0
 
seanpowellCommented:
You need to read my comment again, as you haven't changed the html:

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21400102.html#13853253

Specifically this part:

The images that get the rollover:

<a href="#" onmouseover="toggle('pic1');return false;" onmouseout="toggle('pic1');return false;"><img src=""></a>
<a href="#" onmouseover="toggle('pic2');return false;" onmouseout="toggle('pic2');return false;"><img src=""></a>
<a href="#" onmouseover="toggle('pic3');return false;" onmouseout="toggle('pic3');return false;"><img src=""></a>


The rollover images goe here:
<div id="pic1" style="display:none;"><img src=""></div>
<div id="pic2" style="display:none;"><img src=""></div>
<div id="pic3" style="display:none;"><img src=""></div>

Sean
0
 
seanpowellCommented:
Once you have the js working, I can show you how to reduce a lot the html and css that you're using.

Sean
0
 
joelwnelsonAuthor Commented:
Sorry--I didn't fully understand what I was supposed to do with the html.  For the images that get the rollover I did change the HTML although I used different names than pic1, pic2, and pic3 for the divs.  What specific changes do I still need to make?

I am also uploading the latest edition to http://floodwarning.mmjcdes.net/beta/ so it can be tested in action.
0
 
joelwnelsonAuthor Commented:
I finally got a chance to test it on a PC -- it works perfectly fine in MSIE 6 but in Firefox displays the same as on the Mac (only certain pixels at the extreme left edge of the thumbnail generate the large image).   Do Mozilla-based browsers treat rollovers different than IE?  I am not familar with the Explorer browser but know that it doesn't respect "standards" as well as the newer browsers such as Firefox and Safari.
0
 
benwiggyCommented:
Mozilla based browsers generally follow far closer to the W3C recommendations than IE.
http://www.sitepronews.com/archives/2005/apr/13.html - Read the part on MS' competitive advantage if you are interested in the "why".
Basically we would probably all prefer it if everyone switched to Mozilla-based browsers such as firefox as it makes our lives much easier - but while MSIE holds the largest percentage of users - over 90% on my gaming site - we need to keep catering for it...
0
 
seanpowellCommented:
The problem is all that unnecessary css and html you're using. You have div's everywhere :-)

Here:

.alert
{
      width:100%;
      font-size: 12px;
      padding-bottom:10px;
}

.alert a img
{
      border:none;
}

.alert img
{
      float: left;
      width:40px;
      height:70px;
      margin: 3px 5px 0 0;
}

.clear
{
      clear:left;
}


and:

<div class="alert">
      <a href="#" onmouseover="toggle('pic1');return false;" onmouseout="toggle('pic1');return false;"><img src="alert1.jpg" alt="" /></a>
      <a href="alert.html">ALERT Systems</a> &#8212; A type of computer-based flood warning system developed by the California-Nevada River Forecast Center of the National Weather Service around 1980. The acronym stands for Automated Local Evaluation in Real Time.
      <div class="clear"></div>
</div>
<div class="alert">
      <a href="#" onmouseover="toggle('pic2');return false;" onmouseout="toggle('pic2');return false;"><img src="asd1.jpg" alt="" /></a>
      <a href="asd.html">Automated Stage Detection</a> &#8212; Automated stage detection flood warning  systems come in many forms, but most rely on some device to use a telephone connection, or a current loop to warn people when a certain stage threshold is exceeded.
      <div class="clear"></div>
</div>
<div class="alert">
      <a href="#" onmouseover="toggle('pic3');return false;" onmouseout="toggle('pic3');return false;"><img src="hybrid1.jpg" alt="" /></a>
      <a href="hybrid.html">Hybrid Systems</a> &#8212; A Hybrid Flood Warning System is one that employs a combination of ALERT and USGS stream gaging methods and equipment. Hybrid systems feature remote rain and stream gages and may, or may not have a computer base station.
      <div class="clear"></div>
</div>
<div class="alert">
      <a href="#" onmouseover="toggle('pic4');return false;" onmouseout="toggle('pic4');return false;"><img src="msd1.jpg" alt="" /></a>
      <a href="msd.html">Manual Stage Detection</a> &#8212; Manual stage detection is as old as civilization. It is simply determining the level of water against a known reference point. Modern manual stage detection methods include staff gages, wire weight gages and chain gages.
      <div class="clear"></div>
</div>

and

<div id="pic1" style="display:none;"><img src="alert.jpg" height="322px" width="165px" alt="" /></div>
<div id="pic2" style="display:none;"><img src="lcfws.jpg" height="322px" width="128px" alt="" /></div>
<div id="pic3" style="display:none;"><img src="hybrid.jpg" height="322px" width="136px" alt="" /></div>
<div id="pic4" style="display:none;"><img src="staff.jpg" height="322px" width="104px" alt="" /></div>

That should put you back on track.

Sean
0
 
joelwnelsonAuthor Commented:
That worked with Safari -- haven't tested it on Firefox yet but it should work there also!  What else should I do to tidy up the HTML and the CSS further?  
0
 
seanpowellCommented:
Good :-)

Let me go through your file more closely, I'll post a cleaner version later.

Don't get me wrong, your code is not the worst I've seen - but you're fighting with it instead of working with it.

Any time I see this:

<p></p>

or this:

<div id="index_alert_text"><br />

it's because the foundation was not set up correctly, and so you start sticking pieces of wood in between the bricks where the mortar is not doing what you need it to.

Give me some time (may be late or the morning), but we can work through this to relax it a little. Let it breath, so to speak.
Otherwise we may as well go back to table cells, right ? :-)

Sean
0
 
seanpowellCommented:
Okay...

First - are you using xml data for this site?
0
 
joelwnelsonAuthor Commented:
It is in XHTML 1.0 Transitional so that I can have a "foundation" for further expansion including possible XML content.  Right now I am serving the XHTML 1.0 as SGML; there is not currently any XML data.
0
 
seanpowellCommented:
Good...

Start a new page.

First the header area:
Too many div's, and some unecessary styling. Div's are nothing more than boxes without any default styling - <img> and <ul> are also boxes, so:

<div id="header">
      <img id="logo" src="Flood-Warning-Information.jpg" alt="Flood Warning Information">
      <ul id="navbar">
            <li><a href="index.html">Home</a></li>
            <li><a href="alert.html">ALERT Systems</a></li>
            <li><a href="asd.html">Automated Stage Detection</a></li>
            <li><a href="hybrid.html">Hybrid Systems</a></li>
            <li><a href="msd.html">Manual Stage Detection</a></li>
            <li><a href="contact.html">Contact</a></li>
      </ul>
</div>

Unless there's a really good reason, I would not include your logo with CSS, write it directly to the page. This also let's us use alt text, the first thng a search engine gets to read. As long as we reference the image with an id, we still have total control over it.

So the CSS becomes:

body          
{
      background-color: #efefef;
      margin: 0;
      padding: 0;
}

#header
{
      border-bottom: 3px groove #666666;
      text-align: center;
}

img#logo
{
      display:block;
      margin:0 auto;
      width:720px;
      border-bottom: 1px solid #000;
}

ul#navbar
{
      margin: 0 auto;
      width: 720px;
      background-color: #bfb196;
      padding: 0;
      text-align: center;
      white-space: nowrap;
      list-style: none;
}

ul#navbar li
{
      display: inline;
}

ul#navbar li a
{
      font-size: small;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 30px;
      color: #342b1b;
      text-decoration: none;
      padding: 7px 10px;
}

ul#navbar li a:visited
{
      color: #342b1b;
}

/* some direct feedback for the user */

ul#navbar li a:hover  
{
      color: #ffffff;
}


If you can post a link for this new page, we can reference that from now on.
Sean


0
 
joelwnelsonAuthor Commented:
Thanks for the help so far. I'm going to be out for a few hours today so it will be a few hours before I can get this uploaded and post a link.
0
 
seanpowellCommented:
That's okay - I've got a crazy day today, so it may take me some time too :-)

Sean
0
 
joelwnelsonAuthor Commented:
One quick question:

This is slightly different from what I had before (text turns white instead of generating a dark border to create a button effect) -- is it better than what I had before?

ul#navbar li a:hover  
{
     color: #ffffff;
}
0
 
seanpowellCommented:
Yes - outline-style has very little support so there's really no point in using it. So, given that - we can't add a normal border because it takes up space, so the simplest form of feedback is to change the color of the text. It's also the most direct method for letting the user know the link is clickable (most similar to an underline from a UI perspective) and it works in all browsers.

Sean
0
 
seanpowellCommented:
... and remove the extra closing div tag. Only one is needed.

</ul>
</div>
</div>
0
 
joelwnelsonAuthor Commented:
The page has been updated again.  Note that some of the CSS references in default.css appear to not be used in index.html; they are used in some of the other pages on the site.
0
 
seanpowellCommented:
Yes, that's fine.

It may be easier though if you deleted the all the html and css other than what I just gave you for the header (create a new page if you like) and then we add the components back in one by one - it saves us having to delete all the unused css after...
0
 
joelwnelsonAuthor Commented:
I'll work on the CSS and HTML this afternoon and when I have time tomorrow.  Do you have more tips or suggestions for the site or are you ready for me to award the 200 points?
0
 
seanpowellCommented:
I'd forgotten about the points - all this other stuff was just to help give you a better foundation for your site, free of charge :-)

Sean
0
 
joelwnelsonAuthor Commented:
Are there any specific DIVs or markup tags on the index page that should still be removed/consolidated (such as the leftarea/rightarea or copyright DIVs)?
0
 
seanpowellCommented:
Yes, get rid of <div id="body"> you don't need it. Just make sure to position the side boxes the right height from the top of the page, instead of the top of that div.

Have to run to a client meeting...

Sean

0
 
joelwnelsonAuthor Commented:
I awarded points for the answer -- if you have any more suggestions for the site I'd appreciate it, but the original question I posted about has been answered.  Thank you! :-)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 17
  • 15
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now