SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Santa Fe, NM
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    innerHTML Question

    Javascript newb here. I'm trying to write a script where text and an image change when you mouseover a link. I stumbled upon innerHTML as a way to handle changing the contents of a tag but this approach doesn't appear to work with all browsers. Is there a better way to do this that will work in all browsers? My code follows.

    Thanks,
    Kevin

    HTML Code:
     <html lang="en">
     	<head>
     		<title>Test Page</title>
     		<script>
     			<!-- Hide Script
     			function move_in(img_src,txt_title,txt_txt) 
     			{
     				document['logo'].src='exploreSFI/'+img_src+'.gif';
     		    	txtbox.innerHTML='<B>'+txt_title+':</b> '+txt_txt+'.';
     			}
     
     			function move_out(img_src) 
     			{
     				document['logo'].src='images/'+img_src+'.gif';
     		    	txtbox.innerHTML='<b>About Us:</b> Description of the organization.';
     			}
     			//End Hide Script-->
     		</script>
     	</head>
     	<body>
     		<img src="images/sfi.gif" name="logo" align=center>
     		<div id="txtbox">
     			<b>About Us:</b> Description of the organization.
     			</div>
     			<br />
     			<div>
     			<a href="#" class="mainlink" onmouseover="move_in('bali','Programs', 'Description of programs')" onmouseout="move_out('sfi')">
     				Programs
     			</a>
     			&bull;
     			<a href="#" class="mainlink" onmouseover="move_in('city','Research','Description of research')" onmouseout="move_out('sfi')">
     				Research
     			</a>
     			</div>
     	</body>
     </html>

  2. #2
    SitePoint Guru
    Join Date
    Mar 2004
    Location
    Earth
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're using IE-proprietary shortcut object references. Instead of this:
    Code:
    txtbox.innerHTML
    You want:
    Code:
    document.getElementById("txtbox").innerHTML
    IE puts all elements with an ID or NAME in the global scope - which is wrong, and other browsers don't do that, which is why it doesn't work. As a point of interest, it's also incredibly inefficient - those references point to the document.all collection, which takes significantly longer to iterate through, because it's bigger, and requires more per-element evaluation since its members are not of a predictable type. This is the same reason why you shouldn't use eval() to create an object reference.

    By the same token - although you might get away with this - your image reference is also too short; you should have this:
    Code:
    document.images['logo'].src
    The important thing - in both examples - is that you always have to identify the collection in which your object resides - don't rely on it being the global scope.

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As a follow-on, innerHtml itself is microsoft-proprietary, though it is supported by Mozilla-based browsers too. I've no idea how many other browsers support it.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  5. #5
    SitePoint Member Siddhartha's Avatar
    Join Date
    Mar 2004
    Location
    Bulgaria
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    consider using CSS with :hover pseudoclasses for the changes, because usually onmouseover is not fired correctly. IE have :hove pseudo class on the anchor element only, but in most cases (your too) it does the work.
    simple code (have some bugs but you can catch the idea):
    HTML Code:
    <HTML>
      <HEAD>
    	<STYLE type="text/css">
    	a .descr{
    		display:none;
    	}
    	a:hover .descr{
    		display:inline;
    		position:relative;
    	}
    	.img{
    		display:inline;
    		width:20px;
    		height:20px;
    		background-repeat:no-repeat;
    	}
    	a #img1{
    		background-image:url(images/edit.gif);
    	}
    	a #img2{
    		background-image:url(images/edit.gif);
    	}
    	a:hover #img1{
    		background-image:url(images/change.gif);
    	}
    	a:hover #img2{
    		background-image:url(images/change.gif);
    	}
    	</STYLE>
        <TITLE></TITLE>
      </HEAD>
    
      <BODY>
        <A href="#">link1<DIV class="img" id="img1"></DIV>
        	<DIV class="descr">Some text 1</DIV>
    	</A>
        <A href="#">link2<DIV class="img" id="img2"></DIV>
        	<DIV class="descr">Some text 2</DIV>
    	</A>
      </BODY>
    </HTML>

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brothercake - good explanation.

    adios - glad to see you're familiar with Tim's work.

    Siddhartha - very nice suggestion.

    This thread has almost become a tutorial In fact, a lot of our threads do. Members like the above make the SPF Javascript forum a dhtml gold-mine I'm glad to be hangin-out with you guys.


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
  •