Menu
I am trying to combine two forum scripts into one.
What I want to do is have some links and text that is hidden by an image with the opacity overwriting the information.
I change the opacity with the onmouseover() function and back when moved off image.
I thought changing the z-index would help as well, but no luck yet.
I want to be able to click on the links when the mouse is over the image.
In the script below I am only overwriting a portion of the text & links by shifting
the image right by 50px as a test, but the final version wlll have it set at 0px;
I can click on the link that is outside the image, but not when the opacity is reduced to 25%.
Any ideas how I could change to following?
[code=php]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>DIV menus</title>
<style type=”text/css”>
.Titles {
background-color:cyan;
font-size: 1.5em;
text-decoration: none;
}
.mTitles {
display:none;
background-color:yellow;
width:200px;
}
.makeTransparent {
opacity: 0.25;
/* filter: alpha(opacity=50); */
}
</style>
<script type=”text/javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=189854
// and: http://www.webdeveloper.com/forum/showthread.php?t=190157
function Toggle(Info) {
var CState = document.getElementById(Info).style;
if ((CState.display == “none”) || (CState.display == “”)) { CState.display = “block”; }
else { CState.display = “none”; }
}
function changeOpacity(el) {
el.className = ‘makeTransparent’;
document.getElementById(‘DIVControl’).style.zIndex = 5;
}
function clearCSS(el) {
el.className = ”;
document.getElementById(‘DIVControl’).style.zIndex = 0;
}
</script>
</head>
<body>
<div id=”DIVControl” style=”z-index:0″>
<a href=”#” onclick=”Toggle(‘titleA’)” class=”Titles”>Title A</a> (not a link)<br>
<div id=”titleA” class=”mTitles”>
<a href=”javascript:alert(‘Put link 1 here’)”>Link 1</a> (is a link)<br>
<a href=”javascript:alert(‘Put link 2 here’)”>Link 2</a> (is a link)<br>
<a href=”javascript:alert(‘Put link 3 here’)”>Link 3</a> (is a link)<br>
</div>
<a href=”#” onclick=”Toggle(‘titleB’)” class=”Titles”>Title B</a> (not a link)<br>
<div id=”titleB” class=”mTitles”>
<a href=”javascript:alert(‘Put link 1 here’)”>Link 1</a> (is a link)<br>
<a href=”javascript:alert(‘Put link 2 here’)”>Link 2</a> (is a link)<br>
<a href=”javascript:alert(‘Put link 3 here’)”>Link 3</a> (is a link)<br>
</div>
Text before…
</div>
<div style=”position:absolute;top:0px;left:50px”> <!– final version will have left:0px instead –>
<img src=”http://www.lastpersonwins.com/pixel/uploaded_img/funny%20face.jpg”
onmouseover=”changeOpacity(this)” onmouseout=”clearCSS(this)”/>
</div>
Text after…
</body>
</html>