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

des55 · 06-07-2007, 08:36 PM

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">

</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>

Arbitrator · 06-07-2007, 10:58 PM

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 ().
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>

VIPStephan · 06-07-2007, 11:21 PM

Quote:

Originally Posted by Arbitrator

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.

06-07-2007, 08:36 PM	PM User \| #1
des55 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>

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: