SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover help needed

    hello,

    I am not that experienced with javascript and I have been relying on articals and examples from the web to get javascript into my pages, howerver I have been searching for days and I cannot quite get what i want.

    Basically what I am trying to do is, when the user hovers over the "box" the description would appear ( "info-visible" ) but when the user isnt hovering over the "box" the class "info-hidden" would be used.

    heres a picture: http://i44.photobucket.com/albums/f1...javascript.png

    I want to ahieve this by changeing the classes inside the "info-XXXX" div using javascript.

    Heres the HTML:

    HTML Code:
    <div class="box">
     <div class="image-area"><img src="whatever" alt="test"/></div>
     <div class="hidden-info">desciption of image</div>
    </div>
    And the CSS:

    Code:
    .hidden-info {
    width: 228px;
    background: none;
    visibility: hidden;     /* notice the div is hidden */
    overflow: hidden;
    }
    
    .visible-info {
    width: 228px;
    background: none;
    visibility: visible;     /* notice it is visible (when hovered will change to this class) */
    overflow: hidden;
    }
    
    .box {
    width: 228px;
    height: 228px;
    background: white;
    border: 1px solid #ffffff;
    margin: 0 0 10px 0;
    text-align: center;
    }
    
    .image-area {
    width: 228px;
    height: 158px;
    line-height: 158px;
    }
    I know that if i used code like so:

    Code:
    onmouseover="this.className='visible-info'"; 
    onmouseout="this.className='hidden-info'";
    That i can alter the class for that elemnt. But I dont know how to change a different element's class when another is hovered on (in this case hovering over the "box", and the class changing in the "hidden-info".

    I hope you understand what I am trying to say.

    Thanks in advance, Breadstick.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can do this without javascript:
    HTML Code:
    <div class="box">
      <a href="#">
        <img src="whatever" alt="test"/>
        <span>desciption of image</span>
      </a>
    </div>
    Code:
    .box {
      width: 228px;
      height: 228px;
      background: white;
      border: 1px solid #ffffff;
      margin: 0 0 10px 0;
      text-align: center;
    }
    .box a {
      position:relative;
    }
    .box a:hover {
      visibility:visible; /* nothing to do with the effect you're after, this is to make it work in IE6 */
    }
    .box a span {
      display:none;
      position:absolute;
      border:1px solid black;
      top:232px;
      width:228px;
      left:0;
    }
    .box a:hover span {
      display:block;
    }
    Give that a try. If you don't like it, I'll post you a solution in javascript.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks this method works in IE and mozila, but in opera there are strange rendering problems with it and the image doesnt center in any brower. Also the space between the image and description is double what it should be in Moliza. If posible a javascript version would be much appreciated. Thanks a lot.

    opera: http://i44.photobucket.com/albums/f1...ster/opera.png

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm, that's odd about Opera. And I don't know what you mean about the images not being centred... they are for me. Anyway, here's a javascript version. I just copied the whole document over.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
      <title>H</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <meta name="generator" content="Crimson Editor" />
      <link rel="stylesheet" type="text/css" href="" />
      <style type="text/css">
    * {
      padding:0;
      margin:0;
      border:0;
    }
    .box {
      float:left;
      padding:10px;
      border:1px solid black;
    }
    .box div {
      width: 228px;
      height: 228px;
      background: white;
      border: 1px solid red;
      margin-bottom:10px;
      text-align: center;
    }
    .box p {
      display:none;
      border:1px solid black;
      width:228px;
    }
      </style>
      <script type="text/javascript">
      window.onload = function() {
      var divs = document.getElementsByTagName('div');
      for (var i = 0; i < divs.length; i++) {
        sdiv = divs[i];
        if (sdiv.className == 'box') {
          var simg = sdiv.getElementsByTagName('div')[0].getElementsByTagName('img')[0];
          simg.onmouseover = function() {
            this.parentNode.parentNode.getElementsByTagName('p')[0].style.display = 'block';
          }
          simg.onmouseout = function() {
            this.parentNode.parentNode.getElementsByTagName('p')[0].style.display = 'none';
          }
        }
      }
    }
      </script>
    </head>
    
    <body>
    <div class="box">
      <div>
        <img src="1.gif" alt="test"/>
      </div>
      <p>desc</p>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks a lot mate! It works like a charm


Bookmarks

Posting Permissions

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