Results 1 to 7 of 7

Thread: mouseOver text to change image in display area...

  1. #1
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default mouseOver text to change image in display area...

    I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...)

    I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page.

    I REALLY hope that made sense. Someone please help me!

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You could use the hover css state for the element but you'd need a javascript solution still for ie.

  3. #3
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wouldn't the css hover need to consist of a link? My text doesn't lead to anywhere. I'm sooooo confused.

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    You can do hovers on other elements beside the "a", but IE doesn't support it. So you'd need javascript as well for the hover to work in IE.

    Code:
    span:hover img {
    visibility:visible;
    position:relative;
    top:where ever;
    left:where ever;
    }
    span img {
    visibility:hidden;
    height:0;
    width:0;
    }
    Code:
    <span>TEXT TO DISPLAY<img src="" alt="image will appear when text is hovered where ever you set position to go to" /></span>

  5. #5
    Join Date
    Sep 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't know what javaScript code to use.

  6. #6
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    This might do it... This is a guess and alteration of suckerfish from alistapart.

    Code:
    <script type="text/javascript">
    startList = function() {
    if (document.all&&document.getElementById) {
    mouseRoot = document.document.getElementsByClassName("show");
    for (i=0; i<mouseRoot.childNodes.length; i++) {
    node = mouseRoot.childNodes[i];
    if (node.nodeName=="span") {
    node.onmouseover=function() {
    this.className+=" over";
      }
      node.onmouseout=function() {
      this.className=this.className.replace(" over", "");
       }
       }
      }
     }
    }
    window.onload=startList;
    </script>
    
    
    <span class="show">TEXT TO DISPLAY<img src="" alt="image will appear when text is hovered where ever you set position to go to" /></span>
    Code:
    .show:hover img {
    visibility:visible;
    position:relative;
    top:where ever;
    left:where ever;
    }
    .show img {
    visibility:hidden;
    height:0;
    width:0;
    }

  7. #7
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Hi bluewalrus i have the same problem here, i've already try your suggestion

    You could use the hover css state for the element
    this is my code:

    Code:
    .ya a {
    position:fixed;
    display:block;
    width:400px;
    height: 20px;
    background:no-repeat;
    margin-left:-50px;
    margin-top:-100px;
    }
    .ya a:hover {
    position:absolute;
    display:block;
    width:400px;
    height: 200px;
    background: transparent url(openImgInHover.png) no-repeat;
    background-position:bottom right;
    padding-bottom:100px;
    padding-right:80px;
    }
    this what i put in the body

    Code:
    <td colspan="2" rowspan="3" align="right" valign="middle" class="ya">
             <a href="indexCarousel.html" onmouseover="document.images['s1a'].src='images/homeFlash/carousel-icon-hover.png';" onmouseout="document.images['s1a'].src='images/homeFlash/carousel-icon.png';">
                     <img src="images/homeFlash/carousel-icon.png" name="s1a" id="s1a" border="0" title="carousel-flash definition" />
              </a>
    </td>
    and it's true ie looks like a mess, is there some code to fix this problem or may be there's something wrong with my css code.

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
  •