...

View Full Version : 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">
<!--
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>

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 (<!-- 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 (http://www.jsgp.us/demos/CF115878.html) demonstrates how you could achieve a rollover effect using a method that makes more sense. The code is shown below for future reference:


<!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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum