Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Virginia
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    stacked layer/div with rollover and linking -- ??

    Is there a way to create a simultaneous effect of both linking and onmouseover for two different layers that are stacked in the same position? Meaning ... I have LAYER 1 which would have the "initial image" and the "hot text" that would trigger a rollover (onmouseover) effect for the "new image" to repopulate the same position but in the same or "new" div ... onmouseout, the "new image" would hide and the "initial image and "hot text" div content would reappear ...

    I've attempted something of what I wanted, but am still having issues. Any assistance you can provide would be greatly appreciated -- THANKS!


    <html>
    <head>
    <title></title>
    <style type="text/css">
    .hidden {position: absolute; visibility: hidden}
    #netcalltext
    {
    z-index: 1;
    position: absolute;
    top: 2px;
    left: 2px;
    }

    #d1
    {
    z-index: 2;
    position: absolute;
    top: 2px;
    left: 2px;
    }
    </style>
    <script language="JavaScript">
    <!--
    function showIt(obj) {
    if (document.getElementById)
    {document.getElementById("d1").style.visibility = "visible";}
    else
    {if (document.layers)
    {
    document.layers[obj].visibility = "show";}
    else
    {document.all("d1").style.visibility = "visible";}
    }
    }
    function hideIt(obj) {
    if (document.getElementById)
    {document.getElementById("d1").style.visibility = "hidden";}
    else
    {if (document.layers)
    {
    document.layers[obj].visibility = "hide";}
    else
    {document.all("d1").style.visibility = "hidden";}
    }
    }
    //-->
    </script>
    </head>
    <body>
    <div id="d1" class="hidden"><img src="images/tools-on.jpg" alt="" width="194" height="280" border="0"></div>
    <div id="netcalltext"><a href="#" onMouseOver="showIt('d1')" onMouseOut="hideIt('d1')"><img src="images/tools-off.jpg" alt="" width="194" height="280" border="0"></a></div>
    </body>
    </html>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Your code is rather outdated and contains errors:
    • The document type declaration is missing.
    • The language attribute is deprecated (obsolete) in favor of the type attribute.
    • You should not comment out your scripts using SGML comments (<!-- and -->).
    • I believe that document.layers is a Netscape invention that’s no longer supported by modern browsers. There’s no need to reference it.
    • I believe that document.all is a Microsoft invention that should also not be used. Contemporary versions of Internet Explorer supports the modern method of document.getElementById().
    • The border attribute is deprecated in favor of a CSS property by the same name.
    • The title element and alt attributes should not be left blank.

    With regard to your issue, a live example demonstrates how you could achieve a rollover effect using a method that makes more sense. The code is shown below for future reference:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-Latn-US">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo CF115878</title>
    		<meta name="Author" content="Patrick Garies">
    		<meta name="Created" content="2007-06-07">
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			html { background: white; color: black; }
    			div { margin: 1em; }
    			a, img { display: block; width: 157px; margin: 0 auto; text-align: center; }
    			a { color: #ed145a; text-decoration: none; }
    			a:hover { color: #148fed; }
    			img { border: none; }
    		</style>
    		<script type="application/ecmascript">
    			document.defaultView.addEventListener("load", function () {
    				var anchor = document.getElementsByTagName("a");
    				(function () {
    					var original = anchor[0].firstChild.getAttribute("src");
    					anchor[0].addEventListener("mouseover", function () {
    						anchor[0].firstChild.setAttribute("src", "button_b.png");
    					}, false);
    					anchor[0].addEventListener("mouseout", function () {
    						anchor[0].firstChild.setAttribute("src", original);
    					}, false);
    				})();
    			}, false);
    		</script>
    		<!--[if IE]>
    			<style type="text/css">
    				* html a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='button_a.png', sizingMethod='scale'); }
    				* html a:hover { cursor: pointer; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='button_b.png', sizingMethod='scale'); }
    				* html img { filter: alpha(opacity=0); }
    			</style>
    			<script type="text/javascript">
    				window.onload = function () {
    					var anchor = document.getElementsByTagName("a");
    					(function () {
    						var original = anchor[0].firstChild.getAttribute("src");
    						anchor[0].onmouseover = function () {
    							anchor[0].firstChild.setAttribute("src", "button_b.png");
    						};
    						anchor[0].onmouseout = function () {
    							anchor[0].firstChild.setAttribute("src", original);
    						};
    					})();
    				};
    			</script>
    		<![endif]-->
    		
    	</head>
    	<body>
    
    		<div><a href="CF115878.html"><img alt="button" width="157" height="45" src="button_a.png"></a></div>
    
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Quote Originally Posted by Arbitrator View Post
    The […] alt attributes should not be left blank.
    Actually that’s not quite correct. The alt attribute provides alternative content if the image can’t be displayed. Now, actually this shouldn’t be the case anymore but if you have images that serve a stylistic purpose it would be annoying to read the alternative description (there was a great article about that with example but everytime I need an example I can’t remember where it was), e.g. if there were a table layout with a lot of spacer images and the URL of that image in the alt attribute (I seem to recall that some editors used to do that) you would read th URL a thousand times before getting to the actual content.
    Now, to come to a point: For this reason the W3C allows and even suggests that the value of the alt attribute can be left blank if it wouldn’t help for the understanding of the page. The alt attribute itself is mandatory, though.

    However, in the above mentioned case, that’s right, the alt attributes should not be left blank. Just wanted to clarify that someone that’s coming along isn’t picking up the wrong phrases.
    Last edited by VIPStephan; 06-07-2007 at 11:24 PM.


  •  

    Posting Permissions

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